I am currently working on an asp.net webpage that utilizes a modal bootstrap for user login. Upon clicking the Login button, it should authenticate the user and initiate a server-side method called "ExportToZip" to download a zip file. My issue lies in ensuring that the username and password are validated before triggering the server-side method "ExportToZip". Currently, it always validates the form fields but calls the server method regardless. Additionally, if there is an error in the server method, the modal window closes.
To resolve this problem, I need to establish a system where the jQuery click event is triggered first before initiating the server-side method.
Modal window:
<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">
×</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 section:
<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>