从 JavaScript 中的代码隐藏调用函数，而无需回发

本文关键字：函数 调用 JavaScript 代码 隐藏 | 更新日期: 2023-09-27 17:56:58

我有一个用户可以选择的客户列表。当他们选择客户时，我需要加载该客户的联系人。我需要从 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的值来查找客户的联系人。问题是按钮导致回发，我失去了我选择的客户，因此lblCustID总是返回为零。如何停止回发以免丢失任何值？

从 JavaScript 中的代码隐藏调用函数，而无需回发

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

*以及其他控件，例如下拉列表等

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

设置自动回发="false"以防止按钮导致单击时回发

<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 调用并返回结果

相关文章：