如何使用jquery驗證asp.net Web表單中的登錄模式？

Question

我有一個簡單的asp.net網頁，它使用模態引導程序進行登錄。 用戶單擊“登錄”按鈕后，它應通過調用服務器端方法“ ExportToZip”對用戶進行身份驗證並下載zip文件。 我面臨的問題是我找不到首先驗證用戶名和密碼，然后調用服務器端方法“ExportToZip”的方法。 它一直驗證表單字段，但無論如何都會調用服務器方法。 如果服務器方法出錯，則模態窗口關閉。

我想我需要找到一種方法，以便首先觸發jquery click事件。 然后觸發服務器端方法。

模態窗口：

<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;</button>
                        <h4 class="modal-title" id="ModalTitle">Login with your Syncade credentials</h4>
                    </div>
                    <div class="modal-body">
                        <span id="userNamSpan"></span>
                        <asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" placeholder="Enter Username" AutoCompleteType="Disabled" />
                        <br />
                        <span id="passwordSpan"></span>
                        <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control" placeholder="Enter Password" AutoCompleteType="Disabled" />


                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnLogin" Text="Login" runat="server" OnClientClick="ExportToZip;" Class="btn btn-primary" />
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    </div>
                </div>
            </div>
        </div>

jquery部分：

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnShowLogin").click(function () {
            $('#LoginModal').modal('show');
        });

        //validate form inputs
        $("#btnLogin").click(function (e) {
            if ($("#txtUsername").val() == "")
                $("#userNamSpan").text("Enter Username:");
            else
                $("#userNamSpan").text("");

            if ($("#txtPassword").val() == "")
                $("#passwordSpan").text("Enter Password:");
            else
                $("#passwordSpan").text("");

        });
    });
</script>

Answer 1

嘗試這樣的事情：

<asp:Button ID="btnLogin" Text="Login" runat="server" OnClientClick="return ExportToZip();" Class="btn btn-primary" />

function ExportToZip() {
var isValid = true:
if ($("#txtUsername").val() == "")  {
                $("#userNamSpan").text("Enter Username:");
                isValid = false:
     }
        if ($("#txtPassword").val() == "") {
                $("#passwordSpan").text("Enter Password:");
        isValid = false:
   }

   return isValid:
}