返回首页


{S0的}介绍
ASP.NET提供了一个内置在创建用户向导可以自动根据用户要求定制的成员。如果你想自己的自定义创建用户向导,那么这篇文章介绍了如何实现你的要求。所设计的控制提供了一种灵活的方式来实现成员向导为用户。背景
对于任何网站/应用程序,一个共同的任务是为用户提供一个注册页面,并在网,你可以找到不同类型的设施。我希望这可能是一个简单的实现这个任务。使用代码
创建用户向导可以非常有效的设计,只用几行代码。用于导航记录的代码,代码将类似在一个数据集或任何其他集合。最初,声明一个数组的div ID的存储阵列中的所有向导,并确定下一步()和以前()方法,它会显示当前的向导。
代码中的注释提供有关方法的信息:

// stores the div id in an array.



var divlist =["SignUp","BasicInfo","ProfessionalProfile","MyProfile"];



//Declare Variables



var 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 = '';

    }

    return false;

}

定义以前的方法来显示前面的步骤。下面的方法演示了如何显示在向导的前面步骤。{C}
最后,定义提交显示一条确认消息的方法,向用户提交的细节。
function Submit()

{

  if(confirm("Are You Sure You Want Submit?") == false)

  {

   return false;

  }

  else

  { 

     HideAll();

     btnprevious.style.display = 'none';

     btnnext.style.display = 'none';

     btnfinish.style.display = 'none';

     document.getElementById("MyProfile").style.display = '';

     alert("Submitted Succesfully");

  }

}

HideAll方法用来隐藏网页中的所有控制:{体C3}
使用下面的代码上按一下按钮调用的方法:{的C4}
您可以在附件中下载完整的代码,并通过代码或者使用它。景点
该向导可以帮助刚刚加入div标签的HTML代码,然后保存的div ID的数组对象,添加任何步骤。这样,您就可以添加您的领域和个人资料数据。向导是简单的代码,没有任何复杂的设计。包括进一步发展使用CSS的应用为向导的样式。在进一步修改,CSS将被添加到应用程序。结论
在这篇文章中,我们已经看到了如何创建我们自己的自定义使用JavaScript创建用户向导。在接下来的文章中quot; ASP.NET简介Providerquot的;,我们将学习如何实现这个向导来保存配置文件的配置文件提供者。

回答

评论会员:游客 时间:2012/02/06
所以很简单!我喜欢它。伟大的工作:查尔斯・J库珀这样一个简单但非常有用的想法

评论会员:SVSaichandra 时间:2012/02/06
!......
评论会员:| 时间:2012/02/06