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

时间:2014-01-28 13:14:54

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

我在我的aspx页面上使用bootstrap模式。在这个弹出窗口中,我有一个按钮,其中包含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函数在代码隐藏中调用Webmethod,如下所示:

  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;
    }
}

请建议解决方案。

1 个答案:

答案 0 :(得分:0)

$("#<%=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;
    }
}