Extending the ASP.NET CreateUserWizard Control

The CreateUserWizard control (CUW) has been a significant addition to ASP.NET since it has been introduced in ASP.NET 2.0. It simplifies the method of adding users in our web applications without having to write additional lines of code and the information is stored, by default, in a Server Express database file in the App_Data folder of our web application.

In the Security section of the ASP.NET Forums, a lot of times questions have been asked on how to extend the CreateUserWizard control in ways such as adding additional fields in the CUW, and how to use e-mail instead as the user account’s username. Steps to accomplish these are explained below:

Creating Additional Fields

By default, when one drags a CUW on the designer, the information that’s being collected are the most common information a web application collects from its users: username, password, confirm password, e-mail, security question, and security answer.

However, there are circumstances where we want to collect more information from the user, such as address, phone number, state, etc. The information is limitless, depending on what we want to achieve. Our first approach is that we want to customize the CUW to add the extra fields.

On the Smart Tag of the control, we click on the “Customize Create User Step”, after which we have the ability to add rows and additional controls which we deem fit.

In this example, noticed that I have added two extra fields – Custom Textbox and Custom Dropdownlist. These controls could contain other information relevant to your application. Furthermore, you can use a SqlDataSource associated with the Dropdownlist for a more custom information display. Now that we handled the UI properly, there’s one more step that we need to handle on this part. Even if we have created the additional fields, we need to write code that will handle the extra information by populating the CreateUserWizard1_CreatedUser event. This event is raised once the user has been successfully created in the Membership database.

There are two ways to store this additional information. First it could be through the profile service or it could be in another table in the same database where the user’s key (ProviderUserKey) serves as the foreign key.


protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
{
// This event is raised only when the user
// has been successfully created. Therefore
// when we call Membership.GetUser, we won't
// get a null user

Guid userFKey;

MembershipUser mu = Membership.GetUser(CreateUserWizard1.UserName);
userFKey = (Guid)mu.ProviderUserKey;

// Next is we need to access the custom fields
// added to the CreateUserWizard control (CUW).
// Make sure that when we call the FindControl method,
// we are calling the ID of these custom fields

// Custom Textbox
TextBox cuwTb = (TextBox)CreateUserWizardStep1.ContentTemplateContainer.FindControl("TextBox1");
// Custom Dropdownlist
DropDownList cuwDdl = (DropDownList)CreateUserWizardStep1.ContentTemplateContainer.FindControl("DropDownList1");

// Then get the values
try
{
string txtValue = cuwTb.Text;
int ddlValue = cuwDdl.SelectedIndex;
}
catch
{
throw new Exception("Fields not found");
}

// Now that we have extracted the values
// we can opt to utilize them by storing either
// using the profile service or as an insert
// statement parameter to another table.

}

Using E-Mail as Username

For some web applications, owners opt to use e-mail as the username to lessen the information that’s being collected from the users. I would highly suggest that in implementing this, it is much more flexible to create our own UI for the user registration and take advantage of the Membership API. In this way, we won’t be having problems on the built-in logic of the CUW to look for what’s the username, and which one is the password. By simply modifying the UI to something like this:

When this control is being loaded in the browser, we would be having an error “CreateUserWizard1: CreateUserWizardStep.ContentTemplate does not contain an IEditableTextControl with ID UserName for the username.” To prevent further debugging, I would suggest writing your own code for creating a new user. Example of implementing it through Membership API would be this:

    protected void btnRegister_Click(object sender, EventArgs e)
    {
        muMember = Membership.CreateUser(Email.Text, Password.Text, Email.Text, "Question", "Answer", false, out createStatus);

        // Let's validate if the user has been successfully created
        if (muMember != null)
        {
            // Access custom information
            // Note that we can access them directly since
            // they are no longer enclosed inside the 
            // CreateUserWizardControl
            string customText = TextBox1.Text;
            int customDDL = DropDownList1.SelectedIndex;

            // Utilize them accordingly

        }

    }

You may download the sample code in this location. Note that you need to rename the file to .rar as wordpress doesn’t accept .rar file attachements. Extending the CUW is quite straightforward and easy. Should you have questions, feel free to post below.

Advertisements

9 thoughts on “Extending the ASP.NET CreateUserWizard Control

  1. I need to validate a company code prior to storing the membership info. If the company is invalid..I want the process to stop. I added the Database call to the CreatingUser step, but not matter what I do..it keeps processing and calls the CreatedUser step. Is there a way to stop the process..so I dont get invalid company field stored?

  2. Your post is very nice and really helpful…but i think there is a little mistake. The code inside CreateUserWizard1_CreatedUser event handler must be something like this:

    TextBox cuwTb = (TextBox)CreateUserWizardStep1.CreateUserStep.ContentTemplateContainer.FindControl(“TextBox1”);

    DropDownList cuwDdl = (DropDownList)CreateUserWizardStep1.CreateUserStep.ContentTemplateContainer.FindControl(“DropDownList1”);

    without CreateUserStep it didn’t worked for me…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s