在我的登录页面上，我想显示一个表示加载的简单表格行。我在aspx页面中添加了一个带有jquery函数的简单脚本标记，以便在单击登录按钮时显示表格行。用户第一次单击登录按钮时，一切正常。要显示的登录按钮和表行位于UpdatePanel容器中。
当用户再次单击登录时，如果凭据有好或坏，则表行不会显示。
这是我在页面上的代码：
<%@ Page Language="c#" AutoEventWireup="false" StylesheetTheme="Theme1" Codebehind="Default.aspx.cs" Inherits="....Default" %>
<%@ MasterType VirtualPath="~/..." %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css" media="screen">
* {margin:0;padding:0}
html,body{height:100%}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
</head>
<div style="height: 100%; width: 100%; display: table; vertical-align: middle;">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td valign="middle" align="center">
<form id="frmLogin" runat="server" autocomplete="off">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:Panel ID="Panel1" runat="server" Width="371px" BackColor="white" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
<asp:UpdatePanel ID="upLogin" runat="server" RenderMode="block" UpdateMode="always">
<ContentTemplate>
<table cellpadding="0" width="100%" style="background-color: white" cellspacing="0" border="0">
<tr>
<td colspan="2" align="right" class="reportHeader" style="height: 30px; padding-right: 10px">
<%= this.VersionName %>
</td>
</tr>
<tr>
<td valign="middle" style="height: 140px" class="Yellow">
<table cellpadding="0" cellspacing="0" border="0" style="height: 100%" width="100%">
<tr>
<td colspan="3"><b>Please Log In:</b></td>
</tr>
<tr>
<td>Username:</td>
<td><b><asp:TextBox Width="150" ID="txtUserName" runat="server" AutoCompleteType="Disabled" /></b></td>
</tr>
<tr>
<td>Password:</td>
<td>
<asp:TextBox Width="150" TextMode="password" ID="txtPassword" runat="server" AutoCompleteType="Disabled" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" align="left" style="height: 30px; background-color: #f2dcac;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="bottom" style="padding-left: 5px">
<a class="menuLink" href="email.aspx">I forgot my password</a></td>
<td align="right" valign="bottom">
<asp:Button Text="Log In" CssClass="actionButton" ID="btnLogin" runat="server" onclick="BtnLoginClick1" /></td>
</tr>
</table>
</td>
</tr>
<tr id="trInvalidLoginMessage" visible="false" runat="server">
<td align="center" colspan="2" style="background-color: #f2dcac;">
<font class="pageError">Invalid login. Please try again.</font>
</td>
</tr>
<tr id="trLoading" visible="False" style="display: none; text-align: center">
<td align="center" colspan="2" style="background-color: #f2dcac">
<font class="pageBodyBold"><h3>Loading...</h3></font>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
Sys.Application.add_load(page_load);
function page_load() {
var txt = $get('<%= this.txtUserName.ClientID %>');
txt.focus();
}
$(function () {
if (<%= Page.IsPostBack.ToString().ToLower() %> == false) {
$("#trLoading").css("display", "none");
$("#loading-div").css("display", "none");
}
$("#btnLogin").click(function () {
if ($("#trLoading").css("display") == 'none') {
$("#trLoading").css("display", "inline");
}
else {
$("#trLoading").css("display", "none");
}
});
});
</script>
</body>
</html>
是否可以获取jquery click事件处理程序来处理登录按钮？
答案 0 :(得分：0)
经过一番搜索后，我在这个答案中找到了一个解决方案。
解决方案是使用按钮的OnClientClick属性，并禁用提交行为。
按钮代码：
<asp:Button Text="Log In" CssClass="actionButton" ID="btnLogin" runat="server" onclick="BtnLoginClick1" OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = 'Logging in...';" UseSubmitBehavior="False"/>