当网页执行回发时,如何在注册表单上停止?

我正在做我的最后一年项目。 其中:

我在一个页面上有登录和注册表单(WebForm):

当用户点击锚点时,在Javascript客户端注册 DropDown ddlType (隐藏)和TextBoxes – txtCustNametxtEmailtxtConfirmPassword (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 – txtCustNametxtEmailtxtConfirmPassword (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代码是:

   

题:

当用户单击按钮注册 DropDown ddlType (显示)和TextBoxes – txtCustNametxtEmailtxtConfirmPassword (Hides)但我想阻止这种情况并且应该显示注册表单:

 private void ShowMessage(string msg) { ScriptManager.RegisterStartupScript(this, GetType(), null, "AutoHideAlert('" + msg + "');", true); } 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)) { ShowMessage("Fill all cradentials of customer."); } else { //.. Register user Response.Redirect("~/CustomerPanel/Dashboard.aspx"); } } --- JavaScript Function --- function AutoHideAlert(msg) { // lblAlert is an asp:Label for displaying alert message var al = document.getElementById(''); al.innerText = msg; // alert is a DIV to show message $("#alert").fadeTo(3500, 500).slideUp(1500, function () { $("#alert").slideUp(500); }); } 

如何在注册表单上停止它?

更新:

我的问题是当点击注册按钮时,它设置为登录表单,如:

在此处输入图像描述

你的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 :这就是发生的事情:

  1. 服务器将页面发送到浏览器,并显示登录控件
  2. 在浏览器中,Javascript隐藏登录控件并显示注册控件而不涉及服务器
  3. 单击该按钮导致回发。
  4. 服务器重新发送页面的全部内容,这会将所有控件重置为服务器上的最后一个已知状态,这意味着我们回到第1步,可以看到登录控件。

您唯一的两个解决方案是:

  1. btnSignUp_Click事件中,隐藏登录控件并显示注册控件(基本上重复Javascript中已经发生的事情)。 这是有效的,因为我们知道如果btnSignUp_Click事件正在运行,那么该按钮必须是可见的。
  2. 在进行回发之前,使用客户端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元素。

 $(document).ready(function(){ sigin(); }); function sigin() { $("#Idselection").show(); $("#cutname").hide(); $("#cpass").hide(); } function signUp() { $("#Idselection").hide(); $("#cutname").show(); $("#cpass").show(); }