在 asp.net 文本框中单击输入按钮时调用 Js 方法答案

【问题标题】：Calling Js method on enter button click in asp.net text box在 asp.net 文本框中单击输入按钮时调用 Js 方法
【发布时间】：2014-02-19 19:23:28
【问题描述】：

我在我的 aspx 页面上使用引导模式。在这个弹出窗口中，我有一个按钮，它有这样的 onclick 事件：

  <asp:TextBox ID="LoginUsernameTextBox" runat="server" CssClass="login-name" placeholder="Use your email" />

                            <asp:TextBox ID="LoginPasswordTextBox" runat="server" TextMode="Password" CssClass="login-pass"
                                placeholder="Password (min. 8 chars)" />

<asp:Button ID="btnLogin" runat="server" UseSubmitBehavior="false" OnClientClick="LoginPopup();  return false;"
                                CssClass="login-button" Text="<%$ Resources: HRGELoggedOutMaster, Login %>">
                            </asp:Button>

此 LoginPopup javascript 函数在代码隐藏中调用 Web 方法，如下所示：

  function LoginPopup() {       

        var username = $("#<%= LoginUsernameTextBox.ClientID %>").val();
        var password = $("#<%= LoginPasswordTextBox.ClientID %>").val();     

        if (username != '' && password != '')
            CallPageMethod("LoginPopup", ["username", username, "password", password, "rememberMe", remMe], LoginPopupSucceeded, LoginPopupFailed);
        else
            return false;
    }

和调用webmethod的CallPageMethod：

 function CallPageMethod(fn, paramArray, successFn, errorFn) {      

        var pagePath = window.location.pathname;
        var Id = getParameterByName('ID');

        //Create list of parameters in the form : {"paramName1":"paramValue1","paramName2":"paramValue2"}
        var paramList = '';
        if (paramArray.length > 0) {
            for (var i = 0; i < paramArray.length; i += 2) {
                if (paramList.length > 0)
                    paramList += ',';
                paramList += '"' + paramArray[i] + '":"' + paramArray[i + 1] + '"';
            }
        }
        paramList = '{' + paramList + '}';
        //Call the page method
        $.ajax({
            type: "POST",
              url: pagePath + "/" + fn + '?ID=' + Id,
            contentType: "application/json; charset=utf-8",
            data: paramList,
            dataType: "json",
            success: successFn,
            error: function(req, status, err) {
                console.log('something went wrong', status, err);
                alert('something went wrong' + status + err);
            }
        });
    }

这一切都很好。我有一个功能，用户可以输入用户名和密码，然后单击输入按钮和登录按钮单击功能被调用。但这总是在我按下回车后立即进入 ajax 错误方法。这是在弹出窗口中单击登录按钮时触发的 js：

$("#<%=this.LoginUsernameTextBox.ClientID%>").keypress(function (event) {     
      fireButtonClick($("#<%=this.btnLogin.ClientID%>"), event);
});

$("#<%=this.LoginPasswordTextBox.ClientID%>").keypress(function (event) {
        fireButtonClick($("#<%=this.btnLogin.ClientID%>"), event);
    });


// default button stuff
function fireButtonClick(ctrl, event) {
    if (event.which || event.keyCode) {
        if ((event.which == 13) || (event.keyCode == 13)) {
            ctrl.click();
            return false;
        }
    }
    else {
        return true;
    }
}

请提出解决方案。

【问题讨论】：

你指的是什么错误“但这总是出现在 ajax 错误方法”？
您确定此网址是否正确创建？ url: pagePath + "/" + fn + '?ID=' + Id,
我不确定是什么错误，但我收到一个在 ajax 错误函数错误中设置的警报：function(req, status, err) { console.log('something wrong', status ，呃）; alert('出了点问题' + status + err);
那么，错误值是多少？
使用 WebInspector 和调试

标签： javascript jquery asp.net ajax twitter-bootstrap

【解决方案1】：

$("#<%=this.LoginUsernameTextBox.ClientID%>").keyup(function (event) {     
      fireButtonClick($(this), event);
});

$("#<%=this.LoginPasswordTextBox.ClientID%>").keyup(function (event) {
        fireButtonClick($(this), event);
    });


// default button stuff
function fireButtonClick(ctrl, event) {
    if (event.which || event.keyCode) {
        if ((event.which == 13) || (event.keyCode == 13)) {
            ctrl.click();
            return false;
        }
    }
    else {
        return true;
    }
}

【讨论】：