当网页执行回发时,如何在注册表单上停止?
我正在做我的最后一年项目。 其中:
我在一个页面上有登录和注册表单(WebForm):
当用户点击锚点时,在Javascript客户端注册 DropDown ddlType
(隐藏)和TextBoxes – txtCustName
, txtEmail
和txtConfirmPassword
(Displays):
function signupClick() { document.getElementById('divType').style.display = 'block' ? 'none' : 'block'; document.getElementById('').style.display = 'inherit'; document.getElementById('').style.display = 'inherit'; document.getElementById('').style.display = 'none'; document.getElementById('').style.display = 'inherit'; document.getElementById('lblLogin').style.display = 'inherit'; document.getElementById('lblSignup').style.display = 'none'; }
登录表格:-
当用户点击锚点时,在Javascript客户端登录 DropDown ddlType
(Displays)和TextBoxes – txtCustName
, txtEmail
和txtConfirmPassword
(Hides):
function loginClick() { document.getElementById('divType').style.display = 'none' ? 'block' : 'none'; document.getElementById('').style.display = 'none'; document.getElementById('').style.display = 'none'; document.getElementById('').style.display = 'inherit'; document.getElementById('').style.display = 'none'; document.getElementById('lblLogin').style.display = 'none'; document.getElementById('lblSignup').style.display = 'inherit'; }
报名表: –
锚点和按钮的.aspx代码是:
你的btnSignUp_Click
事件没有做任何事情 – 它不是在其他任何地方发送用户。 所以它最终会重新加载页面。
通过创建用户,完成登录并将用户发送到另一个页面来完成您的btnSignUp_Click
。
更新:您正在进行的所有更改都是通过Javascript进行的,因此服务器不知道您隐藏了某些字段并显示其他字段。 当您执行回发时,页面将被服务器发回的内容重写。 服务器仍然认为“登录”控件是可见的,所以这就是发生的事情。
如果必须留在页面上,则必须在服务器端代码中设置这些控件的可见性:
protected void btnSignUp_Click(object sender, EventArgs e) { string cusname = txtCustName.Text; string email = txtEmail.Text; string pass = txtPassword.Text; string confirm = txtConfirmPassword.Text; if (string.IsNullOrEmpty(cusname) || string.IsNullOrEmpty(email) || string.IsNullOrEmpty(pass) || string.IsNullOrEmpty(confirm)) { txtCustName.Visible = true; txtEmail.Visible = true; txtPassword.Visible = true; txtConfirmPassword.Visible = true; //etc.... ShowMessage("Fill all cradentials of customer."); } else { //.. Register user Response.Redirect("~/CustomerPanel/Dashboard.aspx"); } }
更新2 :这就是发生的事情:
- 服务器将页面发送到浏览器,并显示登录控件
- 在浏览器中,Javascript隐藏登录控件并显示注册控件而不涉及服务器 。
- 单击该按钮导致回发。
- 服务器重新发送页面的全部内容,这会将所有控件重置为服务器上的最后一个已知状态,这意味着我们回到第1步,可以看到登录控件。
您唯一的两个解决方案是:
- 在
btnSignUp_Click
事件中,隐藏登录控件并显示注册控件(基本上重复Javascript中已经发生的事情)。 这是有效的,因为我们知道如果btnSignUp_Click
事件正在运行,那么该按钮必须是可见的。
- 在进行回发之前,使用客户端Javascript来validation数据。 您使用Javascript函数和按钮上的OnClientClick属性来执行此操作。 文档中有一个例子,但关键是
return false;
从函数中如果要停止回发。
服务器端代码需要告诉客户端知道要根据validation结果显示的表单字段(注册或登录),一种方法是在代码中添加受保护的属性,如:
protected bool showSignUpDialog = false;
validation失败:
if (string.IsNullOrEmpty(cusname) || string.IsNullOrEmpty(email) || string.IsNullOrEmpty(pass) || string.IsNullOrEmpty(confirm)) { txtCustName.Visible = true; txtEmail.Visible = true; txtPassword.Visible = true; txtConfirmPassword.Visible = true; //etc.... ShowMessage("Fill all cradentials of customer."); showSignUpDialog = true; }
在您的javascript部分中,使用showSignUpDialog和现有loginClick / signupClick:
$(document).ready(function () { <% if (showSignUpDialog) {%> signupClick(); <% } else {%> loginClick(); <% } %> });
默认情况下,showSignUpDialog为false,因此它将调用loginClick()来显示登录字段,这是演示中的默认行为
在ASP.NET WebForms中,按钮( asp:Button
)的默认行为是将页面回发到服务器。 正如您已经发现的那样,这是您需要防止的,因为服务器使用新的HTML响应,这是您的案例中的登录屏幕。
另一个缺陷是服务器控件不会在客户端保留其名称,因此您需要使用内联服务器标记中的ClientId
属性在脚本中呈现正确的名称。
要开始解决此问题,请通过将validation条件从C#处理程序复制到JavaScript来创建客户端事件处理程序。 然后将OnClientClick
属性添加到服务器按钮。
所以问题的解决方案如下所示。
function btnSignUp_Click(e) { var cusname = $("<%=txtCustomerName.ClientId%>").val(); var email = $("<%=txtCustomerName.ClientId%>").val(); var password = $("<%=txtEmail.ClientId%>").val(); var confirmPassword = $("<%=txtPassword.ClientId%>").val(); var isValid = cusName !== "" && email !== "" && password !== "" && password === confirmPassword; return isValid; }
然后,在asp:Button
元素的标记中添加OnClientClick
属性:
SignUp
这样就防止了对服务器的不必要的往返,并且浏览器中的UI不会改变。
使用“少写多做”的jquery,这对于隐藏和显示function来说也很容易和灵活。 在下面的例子中,我使用简单的Html元素,但你也可以将它用于asp.net元素。