Click here to Skip to main content
15,113,692 members
Articles / Web Development / ASP.NET
Posted 10 Nov 2011


28 bookmarked

JavaScript Create User Wizard for ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.78/5 (9 votes)
10 Nov 2011CPOL2 min read
Custom Create User Wizard control for ASP.NET.

Sample Image


ASP.NET provides a built in Create User wizard for memberships which can be customized automatically depending on user requirements. If you want your own custom Create User wizard, then this article explains how to achieve your requirement. The designed control provides a flexible way to implement a membership wizard for users.


For any website/application, a common task is provide a registration page for users and in the net, you can find different types of facilities. I hope this could be a simple one to achieve this task.

Using the Code

The Create User wizard can be designed very effectively just with a few lines of code. The code will be similar to code used for navigating records in a dataset or any other collection. Initially, declare an array and store the div IDs of all the wizards in an array and define the Next() and Previous() methods which will display the current wizard.

Comments in the code will provide information about the methods:

// 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. 
    // loop through the array and display the current div on button click.
    i++; = '';
    document.getElementById(divlist[i]).style.display = '';
    if(divlist[i] == "MyProfile")
    // check for the length of the array and hide the next button.
    if (i == divlist.length-1 )
    { = 'none' = '';
    return false;

Define the Previous method to display the previous steps. The following method shows how to show the previous steps of the wizard.

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

Finally, define the Submit method which displays a confirmation message to the user to submit the details.

function Submit()
  if(confirm("Are You Sure You Want Submit?") == false)
   return false;
     HideAll(); = 'none'; = 'none'; = 'none';
     document.getElementById("MyProfile").style.display = '';
     alert("Submitted Succesfully");

The HideAll method is used to hide all the controls in the web from:

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

The following code is used to call the methods on button click:

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

You can download the complete code in the attachment and go through the code or use it.

Points of Interest

The wizard helps to add any number of steps by just adding div tags to your HTML code and then saving the div IDs to the array object. This way, you can add your fields and profile data. The wizard is designed with simple code without any complexity. Further development would include the use of CSS to apply styles for the wizard. In a further revision, CSS would be added to the application.


In this article, we have seen how to create our own custom Create User wizard using JavaScript. In the next article " ASP.NET Profile Provider", we will learn how to implement a profile provider with this wizard to save profiles.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

S V Saichandra
Software Developer Collabera
Singapore Singapore
S V Sai Chandra is a Software Engineer from Hyderabad Deccan. He started Embedded Programing in his college days and now he is a Web Developer by Profession. He Loves coding and his passion has always been towards Microsoft Technologies. Apart from coding his other hobbies include reading books, painting and hang out with friends is his most favorite past time hobby.
He blogs at
Technical Skills:
C#,Ado.Net,Asp.Net,Sql Server,JavaScript,XML,Web services.

Comments and Discussions

GeneralGreat Idea! Pin
Charles J Cooper10-Nov-11 14:27
MemberCharles J Cooper10-Nov-11 14:27 
GeneralMy vote of 5 Pin
Charles J Cooper10-Nov-11 14:26
MemberCharles J Cooper10-Nov-11 14:26 
GeneralRe: My vote of 5 Pin
S V Saichandra18-Nov-11 5:08
professionalS V Saichandra18-Nov-11 5:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.