Ajax Post URL 在 ASP.net 图像按钮 OnClientClick onClick 上不起作用答案

【问题标题】：Ajax Post URL not working on ASP.net Image Button OnClientClickClickAjax Post URL 在 ASP.net 图像按钮 OnClientClick onClick 上不起作用
【发布时间】：2013-08-23 09:47:15
【问题描述】：

Ajax Post URL 在 ASP.net Image Button OnClientClick 上不起作用。我想通过 OnClientClick 中的 Ajax Post URL 获取值。

 <asp:ImageButton ID="btngo" runat="server" ImageUrl="~/oea_images/login_btn.png"
      OnClick="btngo_Click" OnClientClick="clean_all();" Width="80px" />

    function clean_all() {
        try {
            alert("enter");
            $.ajax({
                type: "POST",
                url: "WebForm9.aspx/ForceOut",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msgs) {
                    //alert(msgs);
                    //alert(msgs.d);
                    if (msgs.d == "out") {
                        alert("check");
                    }
                }
            });
        } catch (ex) {
            alert(ex.Message);
        }
    }

【问题讨论】：

你在firebug中检查了吗

标签： javascript asp.net ajax

【解决方案1】：

return false 避免回发。也去掉asp Image按钮的OnClick属性试试看。

       var varglobal=false;
                function clean_all() {
                        try {
                          if(!varglobal){
                            alert("enter");
                            $.ajax({
                                type: "POST",
                                url: "WebForm9.aspx/ForceOut",
                                data: "{}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (msgs) {
                                    //alert(msgs);
                                    //alert(msgs.d);
                                    if (msgs.d == "out") {
                                        alert("check");

                                        varglobal=true;
                                        $("#btngo").click();// hopes master page isn't                           used.

                                    }
                                }
                            });
                          }
                        } catch (ex) {
                            alert(ex.Message);
                        }
                     return varglobal;
                    }

由于是 ASP 图片按钮，return false 可能无法阻止回发（回发不是input[type=image] 的默认功能）。请参考here 了解它。

当回发发生时，对服务器的 Ajax 请求将被取消并执行错误函数。您可以通过阻止回发来避免这种情况。

【讨论】：

它工作正常，而且我想使用 OnClick 属性和相同的图像按钮。有没有可能

【解决方案2】：

如果使用这种方式，可以避免回发，但之后不能直接调用服务器函数。您必须在成功回调时回发。

你可以使用简单的锚标签，不需要asp:imagebutton。

<asp:ImageButton ID="btngo" runat="server" ImageUrl="~/oea_images/login_btn.png"
  OnClientClick="return clean_all();" Width="80px" />

function clean_all() {
    try {
        alert("enter");
        $.ajax({
            type: "POST",
            url: "WebForm9.aspx/ForceOut",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msgs) {                   
                if (msgs.d == "out") {                     
                    //call btngo_Click here with __doPostback()
                    // or execute the code inside "btngo_Click"
                    // on server after "ForceOut" completed
                }
            }
        });
    } catch (ex) {
        alert(ex.Message);
    }
return false;
}

【讨论】：