从 javascript 后面的代码调用函数，无需回发

Question

我有一个客户列表，用户可以从中进行选择。当他们 select 一个客户时，我需要加载该客户的联系人。我需要从 JavaScript 调用函数，所以我添加了一个按钮：

<asp:Button ID="btnSample" runat="server" style="float:right;display:none" OnClick="btnSample_Click" />

然后那个按钮被我的 JavaScript 函数触发：

function OnGetCustomer(result){
                document.getElementById('lblCustID').innerHTML = result.ID;
                document.getElementById('lblCustName').innerHTML = result.Name; 
                document.getElementById("btnSample").click();
}

加载联系人的隐藏代码：

protected void btnSample_Click(object sender, EventArgs e)
    {
        RateSheet r = new RateSheet(ID, Company.Current.CompanyID);
        if (!string.IsNullOrEmpty(lblCustID.Text))
        {
            Customer c = new Customer(int.Parse(lblCustID.Text));

            bool e2 = false;
            foreach (Customer.CustomerContact cc in c.Contacts)
            {
                HtmlGenericControl li = new HtmlGenericControl("li");
                CheckBox cb = new CheckBox();
                cb.ID = "cbCustContact_" + cc.ID;
                cb.Checked = true;
                if (!string.IsNullOrEmpty(cc.Email))
                {
                    cb.Text = cc.Email;
                    cb.TextAlign = TextAlign.Right;
                    li.Controls.Add(cb);
                    ulCustContacts.Controls.Add(li);
                }
            }
        }
    }

我需要 lblCustID 中的值来查找客户的联系人。问题是按钮导致回发，我失去了我 selected 的客户，所以 lblCustID 总是返回零。如何停止回发以免丢失任何值？

Answer 1

lblCustID是标签还是输入？在回发中保留更改的唯一*控件是输入。您可以使用 <asp:HiddenField /> 或任何 <input runat="server" ... /> 发送信息以供后面的代码使用。

*连同其他控件，例如下拉列表等

Answer 2

您可以使用异步调用来实现：

设置AutoPostback="false"防止按钮引起postback onclick

<asp:Button ID="btnSample" runat="server" style="float:right" AutoPostback="false" />

或者只添加一个原始的 HTML 按钮（注意：添加一个 type="button" 否则会导致回发）：

<button id="btnSample" type="button">Click</button>

然后向该按钮添加事件侦听器并执行 ajax 调用：

$(document).on('click', '[id$=btnSample]', function() {
   ajax({
      url: 'path/to/handler',
      method: 'POST',
      data: { key: 'value', ... },
      success: function(data) {
         OnGetCustomer(data);
      },
      error: function() {
         console.log('Error on ajax call!');
      }
   });
});

注意：您必须将 cobebehind 代码移动到通用处理程序中以处理 ajax 调用和 return 结果

从 javascript 后面的代码调用函数，无需回发

call function from code behind in javascript without postback

javascript

c#

asp.net

jquery

postback