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

Question

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

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

当锚用户点击注册下拉ddlType(隐藏)和文本框- txtCustName,txtEmail并txtConfirmPassword在(显示器)的JavaScript客户端:

function signupClick() {
  document.getElementById('divType').style.display = 'block' ? 'none' : 'block';

  document.getElementById('<%=txtCustName.ClientID%>').style.display = 'inherit';
  document.getElementById('<%=txtConfirmPassword.ClientID%>').style.display = 'inherit';

  document.getElementById('<%=btnLogin.ClientID%>').style.display = 'none';
  document.getElementById('<%=btnSignUp.ClientID%>').style.display = 'inherit';

  document.getElementById('lblLogin').style.display = 'inherit';
  document.getElementById('lblSignup').style.display = 'none';
}

登录表格:-

当用户点击锚点登录 DropDown ddlType(Displays)和TextBoxes - txtCustName,txtEmail以及txtConfirmPassword(隐藏)在Javascript客户端:

function loginClick() {
  document.getElementById('divType').style.display = 'none' ? 'block' : 'none';

  document.getElementById('<%=txtCustName.ClientID%>').style.display = 'none';
  document.getElementById('<%=txtConfirmPassword.ClientID%>').style.display = 'none';

  document.getElementById('<%=btnLogin.ClientID%>').style.display = 'inherit';
  document.getElementById('<%=btnSignUp.ClientID%>').style.display = 'none';

  document.getElementById('lblLogin').style.display = 'none';
  document.getElementById('lblSignup').style.display = 'inherit';
}

注册表格: -

锚点和按钮的.aspx代码是:

<label id="lblSignup" style="float: right">
    For new account?
  <a href="javascript:;" id="signup" onclick="signupClick()">Sign Up</a>
</label>
  <label id="lblLogin" style="float: right; display: none">
      For existing account?
  <a href="javascript:;" id="login" onclick="loginClick()">Login</a>
  </label>
</div>
<label style="width: 28%">
  <asp:HyperLink ID="hlHome" NavigateUrl="Index.aspx" Text="Home" CssClass="btn btn-default" Width="100%" runat="server" />
</label>
<label style="width: 70%; float: right">
  <asp:Button ID="btnLogin" OnClick="btnLogin_Click" CssClass="btn btn-success" Width="100%" runat="server" Text="Login" />
  <asp:Button ID="btnSignUp" OnClick="btnSignUp_Click" Style="display: none" Width="100%" CssClass="btn btn-primary" runat="server" Text="Sign Up" />
</label>

题:

当用户点击Sign UpDropDown ddlType(显示)和TextBoxes - 和(隐藏)按钮时txtCustName,我想阻止这种情况,并且应该显示注册表单:txtEmailtxtConfirmPassword

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('<%=lblAlert.ClientID%>');

  al.innerText = msg;

  // alert is a DIV to show message
  $("#alert").fadeTo(3500, 500).slideUp(1500, function () {
      $("#alert").slideUp(500);
  });
}

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

更新:

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

Answer 1

您的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来验证数据.您使用Javascript函数和按钮上的OnClientClick属性来执行此操作.文档中有一个示例,但关键是return false;如果要停止回发,请从函数中获取.