如何在网页执行回发时停止注册表单？ [英] How to stop on the Sign Up Form when web page performs Postback?
问题描述
我在一个页面上登录和注册表单（WebForm）：
当用户点击锚点注册 DropDown ddlType （隐藏）和文本框 - txtCustName ，<$ c
$ txtEmail 和 txtConfirmPassword （显示器）位于 Javascript 客户端：
函数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';
登录表单： -
$ c> btnSignUp_Click 事件没有做任何事 - 它不会将用户发送到其他任何地方。因此，它只是重新加载页面。
通过创建用户完成您的 btnSignUp_Click ，完成登录并发送用户转到另一个页面。
更新：
您所做的所有更改都是通过Javascript实现的，因此服务器不知道你隐藏了一些领域并展示了其他领域。当您执行回发时，页面会被服务器发回的内容重写。服务器仍然认为登录控件是可见的，所以这就是发生了什么。
如果您需要在服务器端代码中设置这些控件的可见性必须留在页面上：
protected void btnSignUp_Click（object sender，EventArgs e）
{
字符串cusname = txtCustName.Text;
string email = txtEmail.Text;
string pass = txtPassword.Text;
字符串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（填充顾客的所有要求）;
}
else
{
// ..注册用户
Response.Redirect（〜/ CustomerPanel / Dashboard.aspx）;
}
}
更新2 ：
这就是发生了什么：
- 服务器将页面发送到浏览器，登录控件可见。
- 在浏览器中，Javascript隐藏登录控件并显示注册控件而不涉及服务器。
- 单击按钮导致回发。 >
- 服务器重新发送页面的全部内容，将所有控件重置为服务器上的最后一个已知状态，这意味着我们返回到步骤1，并且登录控件可见。 >
您只有两种解决方案：
-
btnSignUp_Click事件，隐藏登录控件并显示注册控件（基本上重复已经在Javascript中发生的事情）。这是可行的，因为我们知道如果btnSignUp_Click事件完全在运行，那么该按钮必须已经可见。 - 使用client-在完成回发之前验证数据。您使用Javascript函数和 OnClientClick 按钮上的属性来做到这一点。 文档，但是关键是如果要停止回发，则从函数返回
返回false;。
I'm working on my final year project. In which:
I have Login and Signup forms on one page (WebForm):
When user click on anchor Sign Up the DropDown ddlType (hides) and TextBoxes - txtCustName, txtEmail and txtConfirmPassword (Displays) in Javascript client side:
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';
}
Login Form:-
And when user click on anchor Login the DropDown ddlType (Displays) and TextBoxes - txtCustName, txtEmail and txtConfirmPassword (Hides) in Javascript client side:
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';
}
Sign Up Form:-
The .aspx code of anchors and buttons is:
<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>
Question:
When user click on button Sign Up the DropDown ddlType (Displays) and TextBoxes - txtCustName, txtEmail and txtConfirmPassword (Hides) but I want to prevent this condition and the sign up form should be shown:
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);
});
}
How I can stop it on the Sign Up Form?
Updated:
My problem is when click on Sign Up button it sets to the Login form as like:
Your btnSignUp_Click event isn't doing anything - it isn't sending the user anywhere else. So it just ends up reloading the page.
Finish your btnSignUp_Click by creating the user, completing the login and sending the user to another page.
Update: All the changes you are doing is via Javascript, so the server has no idea that you hid some fields and showed others. When you do a postback, the page gets rewritten with what the server sends back. The server still thinks the "Login" controls are visible, so that's what happens.
You will have to set the visibility of those controls in your server-side code if you have to stay on the page:
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");
}
}
Update 2: This is what's happening:
- Server sends page to browser with login controls visible.
- Within the browser, the Javascript hides the login controls and shows the signup controls without involving the server.
- The button is clicked causing a postback.
- The server resends the entire contents of the page, which resets all the controls to the last known state at the server, which means we're back at step 1 with the login controls visible.
Your only two solutions are:
- In the
btnSignUp_Clickevent, hide the login controls and show the signup controls (basically repeating what already happened in Javascript). This works since we know that if thebtnSignUp_Clickevent is running at all, then that button must have been visible. - Use client-side Javascript to validate the data before doing a postback at all. You use a Javascript function and the OnClientClick property on the button to do this. There is an example in the documentation, but the key is to
return false;from the function if you want to stop the postback.
这篇关于如何在网页执行回发时停止注册表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
