javascript - onclick和onclientclick web方法在onclick之后执行

Question

我正在尝试使用网络方法 (.asmx) 设置变量

按钮使用 onclick 调用服务器端方法，使用 onclientclick 调用调用 web 方法的 javascript ajax。

我需要在调用 onclick 服务器端方法之前完全执行 javascript 代码，但似乎在进行回发之前 ajax 调用没有完全执行。

警报在回发之前被调用，但是 web 方法在回发之后被调用。我需要在回发完成之前从 webmethod 设置变量。我试过从 javascript 返回一个 false，但是回发根本没有完成。

我在 asp.net 中使用母版页。我在另一个项目中也有类似的功能，但效果很好，唯一的区别是我使用的是 MasterPage。

<asp:TemplateField>
<ItemTemplate>
    <asp:Button ID="btnAddRegistration" ClientIDMode="Static" CssClass="btn-sm btn-default" runat="server"
        CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"
        onclick="btnAddRegistration_Click"
        OnClientClick='<%# "getSetContactID(\"" + Container.DataItemIndex + "\")" %>'
        Text="Add &#010;Registration" />
 </ItemTemplate>
</asp:TemplateField>

Javascript(调用网络方法)

 function getSetContactID(rowIndex) {

    var CellValue, cell, dataItemIndex;
    var table = document.getElementById('<%=gvContactSearch.ClientID %>');

    $.ajax({
        type: "POST",
        url: "WebService1.asmx/setContactIDgvContact",
        data: '{DataItemIndex: "' + rowIndex + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: alert(rowIndex), <--this gets called before postback
        failure: function (response) {alert(response.d);}

        })
 }

网络服务方法

 [WebMethod]
        public string setContactIDGV1(int DataItemIndex){
           classDetails.gV1DataItemIndex = DataItemIndex; 
           return "";
        }

Answer 1

这里是一个经典的竞争条件场景。

默认情况下，AJAX 调用是异步的，因此当您触发 AJAX 调用时，JS 代码块逻辑上结束，并触发下一个顺序事件，在本例中为服务器端事件。然后是 AJAX 代码执行的函数与您的服务器端 onclick 事件之间的竞争。在我看来，您有几种选择:

1. 在您的服务器端点击方法调用您的网络服务方法
2. 阻止 JS block 内的默认元素操作 (event.preventDefault)，并在完成序列的 AJAX success 方法内挂接一些内容
3. 在 AJAX 调用上设置 async: false 选项