JavaScript Create User Wizard for Asp.Net

Introduction

Asp.net provides built in create user wizard for membership which can be customized automatically depending on the user requirements. But in some cases if you want your own custom create user wizard and then this articles explains you the way to achieve your requirement. The Designed control provides you the flexible way to implement the membership wizard for the user.

Background

For any webiste/application general task is provide the registration page for the user and in the net you can different types of but, i hope this could be the 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 which is used for navigating the records in a dataset or any other collection.
Initially declare an array and store the div id’s of all the wizard of the html page in the array and define the Next () and Previous () methods which will display the current wizard.
Comments in the code will provide informatin about the method.

// 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;
 }

Define the previous to display the previous steps: The following method implement to show previous steps of the wizard.

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';
            } 
            return false;
 }

Finally define the sumbit method which display’s an confirm message to the user to submit the details.

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");
     
  }
 }

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 as shown below:

<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 attachement and go through the code or use it.

Points of Interest

The wizard helps to add any number of steps by just simpling adding div tags to your html code and then saving the div id's to the array object. In these way you can add your fields and profile data. The wizard is designed with simple coding standard without any complexity. Further development would inlcude the use of css sheets to apply styles for the wizard. In the further revision, the css style sheets would be added to the application.

Conclusion:

In this article we have seen how to create your own custom create user wizard by using the javascript, In the next article " Asp.Net Profile Provider.", u can learn how to implement profile provider along with this wizard to save the profiles.