JavaScript为 ASP.NET 创建用户向导

分享于 

5分钟阅读

Web开发

  繁體

样例图像

介绍

ASP.NET 为会员提供了内置的创建用户向导,可以根据用户需求自动定制。 如果你想要自己的定制创建用户向导,那么本文将介绍如何实现你的需求。 设计的控件为用户实现成员资格向导提供了一种灵活的方式。

Background

对于任何网站/应用,一个常见任务是为用户和网络提供注册页面,你可以在网上找到不同类型的设备。 我希望这是一个简单的实现这个任务的。

使用代码

可以只使用几行代码就可以非常有效地设计创建用户向导。 代码类似于在数据集或者任何其他 Collection 中导航记录时使用的代码。 最初,声明一个 array 并存储 array 中所有向导的div 并定义将显示当前向导的Next()Previous() 方法。

代码中的注释将提供有关方法的信息:

// stores the div id in an array.var divlist =["SignUp","BasicInfo","ProfessionalProfile","MyProfile"];//Declare Variablesvar i=0;var j; var btnprevious; var btnnext;var btnfinish;//Define the next () Method to hide/show the steps as shown below://The following method implement the code to increment the steps of the wizard.function Next()
{
 //increment the array index value.  HideAll();
 // loop through the array and display the current div on button click. i++;
 btnprevious.style.display = '';
 document.getElementById(divlist[i]).style.display = '';
 if(divlist[i] == "MyProfile")
 {
 DisplayValues();
 }
 // check for the length of the array and hide the next button.if (i == divlist.length-1 )
 {
 btnnext.style.display = 'none' btnfinish.style.display = '';
 }
 returnfalse;
}

定义 Previous 方法以显示前面的步骤。 下面的方法演示如何显示向导的前面步骤。

function Previous()
{ 
 //decrement the array index value. btnfinish.style.display = 'none';
 btnnext.style.display = '' HideAll();
 i--;
 //loop through the array to display the current div and hide others. btnnext.Text = "Next";
 btnnext.style.display = '';
 document.getElementById(divlist[i]).style.display = '';
 if (i == 0)
 {
 btnprevious.style.display = 'none';
 } 
 returnfalse;
}

finally,定义将确认消息显示给用户以提交详细信息的Submit 方法。

function Submit()
{
 if(confirm("Are You Sure You Want Submit?") == false)
 {
 returnfalse;
 }
 else { 
 HideAll();
 btnprevious.style.display = 'none';
 btnnext.style.display = 'none';
 btnfinish.style.display = 'none';
 document.getElementById("MyProfile").style.display = '';
 alert("Submitted Succesfully");
 }
}

HideAll 方法用于将站点中的所有控件隐藏:

function HideAll()
{
 document.getElementById(divlist[0]).style.display = 'none';
 document.getElementById(divlist[1]).style.display = 'none';
 document.getElementById(divlist[2]).style.display = 'none';
 document.getElementById("MyProfile").style.display = 'none';
}

下面的代码用于调用按钮单击中的方法:

<asp:ButtonID="btnprevious"runat="server"Text="Previous"OnClientClick="return Previous();"/><asp:ButtonID="btnnext"runat="server"Text="Next"OnClientClick="return Next();"/><asp:ButtonID="btnfinish"runat="server"Text="Finish"Height="26px"Width="60px"OnClientClick="return Submit();"OnClick="btnfinish_Click"/>

你可以下载附件中的完整代码,并通过代码或者使用它。

Points of Interest

通过添加 div 标记,然后将 div id保存到 array 对象中,向导可以帮助添加任意数量的步骤。 这样,你就可以添加你的字段和概要数据。 向导设计简单,代码不复杂。 进一步的开发将包括使用CSS应用向导的样式。 在进一步的修订中,CSS将被添加到应用程序中。

结束语

在本文中,我们看到了如何使用JavaScript创建自己的自定义创建用户向导。 在下一篇文章中,我们将学习如何使用这个向导实现一个概要文件提供者来。


JAVA  Javascript  USE  asp  asp-net  用户  
相关文章