Click here to Skip to main content
Click here to Skip to main content

JavaScript Create User Wizard for ASP.NET

, 10 Nov 2011
Rate this:
Please Sign up or sign in to vote.
Custom Create User Wizard control for ASP.NET.

Sample Image

Introduction

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.

Background

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. 
    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 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.
    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 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;
  }
  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:

<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.

Conclusion

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.

License

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 GSS Infotech Ltd.
India India
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 is 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
http://technowallet.blogspot.com
Technical Skills:
C#,Ado.Net,Asp.Net,Sql Server,JavaScript,XML,Web services.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralGreat Idea! PinmemberCharles J Cooper10-Nov-11 13:27 
So very simple! I love it. Great job.
GeneralMy vote of 5 PinmemberCharles J Cooper10-Nov-11 13:26 
GeneralRe: My vote of 5 PinmemberS V Saichandra18-Nov-11 4:08 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140709.1 | Last Updated 10 Nov 2011
Article Copyright 2011 by S V Saichandra
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid