javascript - 在 linkbutton 回发后提交表单

Question

我发现我的 javascript 和页面隐藏代码之间存在一些奇怪的交互。这是页面:

<form name="form1" id="form1" runat="server">
    <button onclick="submitForm()">Submit Form</button>
    <asp:LinkButton runat="server" OnClick="btn_download">Download!</asp:LinkButton>
</form>
<script type="text/javascript">
    function submitForm()
    {
        document.form1.submit();
    }
</script>

以及背后的代码:

protected void btn_download(object sender, EventArgs e)
{
    Response.Clear();
    Response.ContentType = "application/octet-stream";
    Response.AppendHeader("Content-Disposition", String.Concat("attachment; filename=", "download.txt"));
    string hw = "hello world!";
    byte[] info = new byte[hw.Length * sizeof(char)];
    System.Buffer.BlockCopy(hw.ToCharArray(), 0, info, 0, info.Length);
    Response.OutputStream.Write(info, 0, info.Length);
    Response.Flush();
    Response.End();
}

当我点击下载按钮时，我得到了预期的文件。点击下载后，如果我点击提交表单按钮，表单将被提交，但它也会像下载被按下一样 - 触发 btn_download 方法。如果我注释掉 btn_download(..) 中的代码，这不会发生。

如果我在点击下载按钮之前点击了提交表单按钮，它不会触发 btn_download。我试着逐行注释掉后面的代码，似乎是 Response.appendHeader(..) 行导致了这个问题。有人可以解释这里发生了什么吗？为什么 form1.submit() 就像我点击下载一样？

Answer 1

对于 ASP.NET 网络表单，您应该避免使用 form.submit() 提交表单。相反，您应该调用 __doPostback 传递触发回发的控件的名称。否则，您将混淆 ASP.NET 基础结构，该基础结构确定是哪个按钮或事件触发了表单的提交。

从服务器的 Angular 来看，除了检查隐藏的表单变量“EVENTTARGET”外，ASP.NET 不知道表单是如何提交的(无论是通过按钮还是通过您的 Javascript 代码)。当您首先单击下载按钮时， doPostBack 填充事件目标，然后提交表单；如果您随后直接调用 submit，事件目标字段中仍有一个值是 doPostBack 调用留下的。结果，ASP.NET 认为您再次单击了下载按钮。

有关详细信息，请参阅 Article: How to use doPostBack