ASP.NET - 如何：自定义 ASP.NET CreateUserWizard 控件

可以使用 CreateUserWizardStep 和 CompleteWizardStep 模板来自定义 CreateUserWizard 控件的内容。通过指定模板的内容，您可以指定自己的自定义用户界面 (UI)，该用户界面包括 CreateUserWizard 控件用于收集有关新用户的信息的控件，以及您指定的其他控件。此外，由于 CreateUserWizard 控件继承自 Wizard 类，因此可以向 CreateUserWizard 控件添加您自己的自定义步骤。

一、自定义 CreateUserWizard 步骤

1.1、按照下面的语法将一个 CreateUserWizard 控件放在页上。
<asp:CreateUserWizard ID="CreateUserWizard1" Runat="server">
<WizardSteps>
<asp:CreateUserWizardStep runat="server">
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep runat="server">
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>

1.2、若要自定义用户帐户创建步骤，请在 <asp:CreateUserWizardStep> 元素中创建一个 <ContentTemplate> 元素。在该模板中，添加标记和控件来定义收集所需用户信息的用户界面布局和内容。下面的代码示例演示一个 CreateUserStep 属性，该属性包括允许用户指定其他选项的 CheckBox 控件。
<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>

1.3、若要自定义完成步骤，请在 <asp:CompleteWizardStep> 元素中创建一个 <ContentTemplate> 元素。在该模板中，添加标记和控件来定义用于显示确认消息及使用户定位以继续（可选）的用户界面的布局和内容。下面的代码示例演示一个 CompleteStep 属性，该属性引用前一个示例中的 CheckBox 控件。
<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>

1.4、添加代码以引用其他控件。例如，通过处理 CreatingUser 事件，可以在创建新的用户帐户之前输入代码以收集、验证和修改信息。 下面的代码示例演示引用前面示例中的 CheckBox 控件的 CreatedUser 事件的处理程序，并将它们添加到新创建的用户帐户的 Comment 属性。您将需要向页上的 CreateUserWizard 控件添加一个 OnCreatedUser 属性，该控件引用 CreatedUser 事件的处理程序（例如 OnCreatedUser="CreateUserWizard1_CreatedUser"。）
protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
{
// Determine the checkbox values.
CheckBox subscribeCheckBox =
(CheckBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("SubscribeCheckBox");
CheckBox shareInfoCheckBox =
(CheckBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("ShareInfoCheckBox");
TextBox userNameTextBox =
(TextBox)CreateUserWizardStep1.ContentTemplateContainer.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.ContentTemplateContainer.FindControl("SubscribeLabel");
Label shareInfoLabel =
(Label)CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("ShareInfoLabel");

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

二、添加向导步骤

2.1、向 CreateUserWizard 控件的 <WizardSteps> 节添加 <asp:WizardStep> 元素。在您的自定义 CreateUserWizard 控件将使用的附加向导步骤中包括任何控件和标记。
例如，下面的代码示例演示要添加在 CreateUserWizard 控件（该控件包含供用户输入用户名的文本框控件）的 CreateUserStep 之前的步骤。将检查用户名以确保该名称在成员资格数据库中不存在。
<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.2、添加向导步骤的代码。可以处理 Wizard 控件的 NextButtonClick 事件以执行您的代码。CurrentStepIndex 属性值通过步骤索引号（从代表第一个步骤的 0 开始）来指示哪个附加向导步骤引发了 NextButtonClick 事件。 下面的代码示例演示 NextButtonClick 事件的处理程序，该处理程序使用在前一个代码示例的向导步骤的 TextBox 控件中输入的用户名，并验证该用户名，以确保它不是空白的并且在成员资格数据库中不存在。您将需要向页上的 CreateUserWizard 控件添加一个 OnNextButtonClick 属性，该控件引用 NextButtonClick 事件的处理程序（例如 OnNextButtonClick="CreateUserWizard1_NextButtonClick"。）
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.ContentTemplateContainer.FindControl("UserName");
userName.Text = SearchAccount.Text;
SearchAccountMessage.Text = "";
e.Cancel = false;
}
}
}

三、示例
下面的代码示例演示一个 CreateUserWizard 控件，该控件具有为两个基本步骤（CreateUserStep 和 CompleteStep）以及一个添加在 CreateUserStep 之前的附加向导步骤定义的模板。
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
{
// Determine the checkbox values.
CheckBox subscribeCheckBox =
(CheckBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("SubscribeCheckBox");
CheckBox shareInfoCheckBox =
(CheckBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("ShareInfoCheckBox");
TextBox userNameTextBox =
(TextBox)CreateUserWizardStep1.ContentTemplateContainer.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.ContentTemplateContainer.FindControl("SubscribeLabel");
Label shareInfoLabel =
(Label)CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("ShareInfoLabel");

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

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.ContentTemplateContainer.FindControl("UserName");
userName.Text = SearchAccount.Text;
SearchAccountMessage.Text = "";
e.Cancel = false;
}
}
}
</script>

<html >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"
OnNextButtonClick="CreateUserWizard1_NextButtonClick"
OnCreatedUser="CreateUserWizard1_CreatedUser" ContinueDestinationPageUrl="~/Default.aspx">
<WizardSteps>
<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>
<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>
<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>
</WizardSteps>
<SideBarStyle BackColor="#5D7B9D" BorderWidth="0px" Font-Size="0.9em" VerticalAlign="Top" />
<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<SideBarButtonStyle BorderWidth="0px" Font-Names="Verdana" ForeColor="White" />
<NavigationButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana" ForeColor="#284775" />
<HeaderStyle BackColor="#5D7B9D" BorderStyle="Solid" Font-Bold="True" Font-Size="0.9em"
ForeColor="White" HorizontalAlign="Center" />
<CreateUserButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana" ForeColor="#284775" />
<ContinueButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana" ForeColor="#284775" />
<StepStyle BorderWidth="0px" />
</asp:CreateUserWizard>
 </div>
</form>
</body>
</html>