How to Customizing create user wizard of login contols in asp.net

ramesh · December 6th, 2011, 04:56 AM

i have a problem in customizing user create wizard.

i want to add a extra control(Mobile number) to user create wizard and data provided in that control should be inserted in the database table, when i click create user button..

but i am not able to do it...
is there any procedure to customize it.

can any one help me out of this problem.........

jack_hilary · December 6th, 2011, 02:01 PM

Hi there,
You can achieve this in few steps.

1. Create a new field Mobile in table aspnet_Users table.

2. Convert your createUserWizard to template.

I am removing much of the code for keeping it short and nice. Notice how Mobile filed is included in wizard.

Code:

<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" 
            
            CreateUserButtonText="Sign Up" 
            oncreateduser="CreateUserWizard1_CreatedUser" >
            <WizardSteps>
                <asp:CreateUserWizardStep ID="CreateUserWizardStep1" Title="CreateUser" runat="server">
                    <ContentTemplate>
                        <table border="0" style="background:gray" id="TABLE2">
                            <tr>
                                <td align="center" colspan="2">
                                    Sign Up for Your New Account</td>
                            </tr>
                            <tr>
                                <td align="right" class="style4">
                                    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User 
                                    Name:</asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
                                </td>
                            </tr>
<tr>
      <td align="right" class="style4">
                                    <asp:Label ID="Label1" runat="server" AssociatedControlID="Mob">Your Mobile No:</asp:Label>
         </td>
         <td> 
      <asp:TextBox ID="Mob" runat="server"></asp:TextBox>
                   <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="Mob" ErrorMessage="City is required." 
                                  ToolTip="Mobile is required." ValidationGroup="CreateUserWizard1" Display="Dynamic">Enter Mobile No</asp:RequiredFieldValidator>

3. In code behind add namespace System.Data.SqlClient ;

and below page_load event use this code

Code:

 protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
    {
        
        if (CreateUserWizard1.ActiveStep.Title == "CreateUser")
        {
            TextBox mobile = (TextBox)CreateUserWizardStep1.ContentTemplateContainer.FindControl("Mob");
            string connectionString = ConfigurationManager.ConnectionStrings["LocalSqlServer"].ConnectionString;
            string insertSql = "INSERT INTO aspnet_Users(Mobile) VALUES(@AddMob)";

            using (SqlConnection myConnection = new SqlConnection(connectionString))
            {
                myConnection.Open();

                SqlCommand myCommand = new SqlCommand(insertSql, myConnection);
                myCommand.Parameters.AddWithValue("@AddMob", mobile.Text);
                myCommand.ExecuteNonQuery();

                myConnection.Close();
            }
        }
    }

Hope this helps...

ramesh · December 7th, 2011, 03:38 AM

thanks for your reply..
it worked fine. but i am getting an error while executing this command
myCommand.ExecuteNonQuery();

error description:Cannot insert the value NULL into column 'ApplicationId', table 'C:\DOCUMENTS AND SETTINGS\RRODDAM\MY DOCUMENTS\VISUAL STUDIO 2008\JOBSITE\APP_DATA\ASPNETDB.MDF.dbo.aspnet_User s'; column does not allow nulls. INSERT fails.
The statement has been terminated.

Thank you so much for your reply....

JaypeeHuda · December 10th, 2011, 05:25 AM

You can customize the contents of the CreateUserWizard control using the CreateUserWizardStep and CompleteWizardStep templates. By specifying the contents of the templates, you can specify your own custom user interface (UI) that includes controls that the CreateUserWizard control uses to gather information about the new user, as well as additional controls that you specify (for a list of the controls that the CreateUserWizard control uses, see Customizing the Appearance of ASP.NET Login Controls.)

Additionally, because the CreateUserWizard control inherits from the Wizard class, you can add your own custom steps to the CreateUserWizard control. For more information on the Wizard control, see Wizard Web Server Control Overview.

For more details please check out this link...
http://msdn.microsoft.com/en-us/library/ms178342.aspx

Andrew_angusa · January 7th, 2012, 01:43 PM

To customize the CreateUserWizard steps

1.

Place a CreateUserWizard control on your page using the following syntax.
Copy

<asp:CreateUserWizard ID="CreateUserWizard1" Runat="server">
<WizardSteps>
<asp:CreateUserWizardStep runat="server">
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep runat="server">
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>

2.

To customize the user account creation step, create a <ContentTemplate> element within the <asp:CreateUserWizardStep> element. Inside the template, add markup and controls to define the layout and content of the UI for gathering the user information you need.
NoteNote

If your membership provider extends the MembershipProvider class with custom members, you must add any controls to gather custom information required by your membership provider for creating a new user. For details, see CreateUserWizardStep.

The following code example shows a CreateUserStep property that includes CheckBox controls that enable users to specify additional options.
C#
VB
Copy

<asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
<ContentTemplate>
<table border="0" style="font-size: 100%; font-family: Verdana">
<tr>
<td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d">
Sign Up for Your New Account</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">
User Name:</asp:Label></td>
<td>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"
ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">
Password:</asp:Label></td>
<td>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword">
Confirm Password:</asp:Label></td>
<td>
<asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword"
ErrorMessage="Confirm Password is required." ToolTip="Confirm Password is required."
ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email">
E-mail:</asp:Label></td>
<td>
<asp:TextBox ID="Email" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email"
ErrorMessage="E-mail is required." ToolTip="E-mail is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="QuestionLabel" runat="server" AssociatedControlID="Question">
Security Question:</asp:Label></td>
<td>
<asp:TextBox ID="Question" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="QuestionRequired" runat="server" ControlToValidate="Question"
ErrorMessage="Security question is required." ToolTip="Security question is required."
ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">
Security Answer:</asp:Label></td>
<td>
<asp:TextBox ID="Answer" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer"
ErrorMessage="Security answer is required." ToolTip="Security answer is required."
ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password"
ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="The Password and Confirmation Password must match."
ValidationGroup="CreateUserWizard1"></asp:CompareValidator>
</td>
</tr>
<tr>
<td align="center" colspan="2" style="color: red">
<asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal>
</td>
</tr>
</table>
<asp:CheckBox ID="SubscribeCheckBox" runat="server" Checked="True" Text="Send me a monthly newsletter." />
<br />
<asp:CheckBox ID="ShareInfoCheckBox" runat="server" Checked="True" Text="Share my information with partner sites." />
</ContentTemplate>
</asp:CreateUserWizardStep>

3.

To customize the completion step, create a <ContentTemplate> element within the <asp:CompleteWizardStep> element. Inside the template, add markup and controls to define the layout and content of the UI for displaying a confirmation message and optionally allowing the user to navigate to continue. (You must provide the controls to gather the information required by your membership provider for creating a new user account. For details, see CompleteWizardStep.)

The following code example shows a CompleteStep property that references the CheckBox controls from the previous example.
C#
VB
Copy

<asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
<ContentTemplate>
<table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
<tr>
<td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d; height: 18px;">
Complete</td>
</tr>
<tr>
<td>
Your account has been successfully created.<br />
<br />
<asp:Label ID="SubscribeLabel" runat="server" Text="You have elected to receive our monthly newsletter."></asp:Label><br />
<br />
<asp:Label ID="ShareInfoLabel" runat="server" Text="You have elected to share your information with partner sites."></asp:Label></td>
</tr>
<tr>
<td align="right" colspan="2">
 <asp:Button ID="ContinueButton" runat="server" BackColor="#FFFBFF" BorderColor="#CCCCCC"
BorderStyle="Solid" BorderWidth="1px" CausesValidation="False" CommandName="Continue"
Font-Names="Verdana" ForeColor="#284775" Text="Continue" ValidationGroup="CreateUserWizard1" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:CompleteWizardStep>

4.

Add code to reference the additional controls. For example, handling the CreatingUser event enables you to enter code to gather, verify, and modify information before a new user account is created.

The following code example shows a handler for the CreatedUser event that references the CheckBox controls from the previous examples and adds them to the Comment property of the newly created user account. You will need to add an OnCreatedUser attribute to the CreateUserWizard control on your page that references the handler for the CreatedUser event (for example, OnCreatedUser="CreateUserWizard1_CreatedUser".)
C#
VB
Copy

protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
{
// Determine the checkbox values.
CheckBox subscribeCheckBox =
(CheckBox)CreateUserWizard1.CreateUserStep.Content TemplateContainer.FindControl("SubscribeCheckBox") ;
CheckBox shareInfoCheckBox =
(CheckBox)CreateUserWizard1.CreateUserStep.Content TemplateContainer.FindControl("ShareInfoCheckBox") ;
TextBox userNameTextBox =
(TextBox)CreateUserWizardStep1.ContentTemplateCont ainer.FindControl("UserName");

MembershipUser user = Membership.GetUser(userNameTextBox.Text);
user.Comment = "Subscribe=" + subscribeCheckBox.Checked.ToString() + "&" +
"ShareInfo=" + shareInfoCheckBox.Checked.ToString();
Membership.UpdateUser(user);

// Show or hide the labels based on the checkbox values.
Label subscribeLabel =
(Label)CreateUserWizard1.CompleteStep.ContentTempl ateContainer.FindControl("SubscribeLabel");
Label shareInfoLabel =
(Label)CreateUserWizard1.CompleteStep.ContentTempl ateContainer.FindControl("ShareInfoLabel");

subscribeLabel.Visible = subscribeCheckBox.Checked;
shareInfoLabel.Visible = shareInfoCheckBox.Checked;
}

To add a wizard step

1.

Add an <asp:WizardStep> element to the <WizardSteps> section of the CreateUserWizard control. Include any controls and markup in the additional wizard step that your customized CreateUserWizard control will use.

For example, the following code example shows a step to be added before the CreateUserStep of the CreateUserWizard control that includes a textbox control for users to enter a user name. The user name will be checked to ensure that it does not already exist in the membership database.
C#
VB
Copy

<asp:WizardStep ID="CreateUserWizardStep0" runat="server">
<table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
<tr>
<td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d">
Select an Account Name</td>
</tr>
<tr>
<td>
<asp:Label ID="AccountNameLabel" runat="server" AssociatedControlID="SearchAccount" >
Account Name:</asp:Label>
<asp:TextBox ID="SearchAccount" runat="server"></asp:TextBox><br />
<asp:Label ID="SearchAccountMessage" runat="server" ForeColor="red" />
</td>
</tr>
</table>
</asp:WizardStep>

2.

Add code for your wizard step. You can handle the NextButtonClick event of the Wizard control to execute your code. The CurrentStepIndex property value indicates which additional wizard step raised the NextButtonClick event by the step index number (starting from 0 for the first step).

The following code example shows a handler for the NextButtonClick event that takes the user name entered in the TextBox control in the wizard step from the previous code example and verifies that the user name is not blank and does not currently exist in the membership database. You will need to add an OnNextButtonClick attribute to the CreateUserWizard control on your page that references the handler for the NextButtonClick event handler (for example, OnNextButtonClick="CreateUserWizard1_NextButtonCli ck".)
C#
VB
Copy

private bool UserExists(string username)
{
if (Membership.GetUser(username) != null) { return true; }

return false;
}

protected void CreateUserWizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
{
if (e.CurrentStepIndex == 0)
{
if (SearchAccount.Text.Trim() == "" || UserExists(SearchAccount.Text))
{
SearchAccountMessage.Text = "That account already exists. Please select an different account name.";
e.Cancel = true;
}
else
{
TextBox userName =
(TextBox)CreateUserWizard1.CreateUserStep.ContentT emplateContainer.FindControl("UserName");
userName.Text = SearchAccount.Text;
SearchAccountMessage.Text = "";
e.Cancel = false;
}
}
}