可以使用 CreateUserWizardStep 和 CompleteWizardStep 模板來自定義 CreateUserWizard 控件的內容。通過指定模板的內容,您可以指定自己的自定義用戶界面 (UI),該用戶界面包括 CreateUserWizard 控件用於收集有關新用戶的信息的控件,以及您指定的其他控件(有關 CreateUserWizard 控件使用的控件的列表,請參見自定義 ASP.NET 登錄控件的外觀。)
此外,由於 CreateUserWizard 控件繼承自 Wizard 類,因此可以向 CreateUserWizard 控件添加您自己的自定義步驟。有關 Wizard 控件的更多信息,請參見 Wizard Web 服務器控件概述。
注意 |
---|
您也可以使用主題和樣式屬性自定義 CreateUserWizard 控件的外觀。有關詳細信息,請參見 ASP.NET 主題和外觀概述 和 CreateUserWizard 控件的屬性。 |
自定義 CreateUserWizard 步驟
-
按照下面的語法將一個 CreateUserWizard 控件放在頁上。
<asp:CreateUserWizard ID="CreateUserWizard1" Runat="server"> <WizardSteps> <asp:CreateUserWizardStep runat="server"> </asp:CreateUserWizardStep> <asp:CompleteWizardStep runat="server"> </asp:CompleteWizardStep> </WizardSteps> </asp:CreateUserWizard>
-
若要自定義用戶帳戶創建步驟,請在 <asp:CreateUserWizardStep> 元素中創建一個 <ContentTemplate> 元素。在該模板中,添加標記和控件來定義收集所需用戶信息的用戶界面佈局和內容。
注意 如果成員資格提供程序用自定義成員來擴展 MembershipProvider 類,則必須添加用於收集成員資格提供程序創建新用戶所需的自定義信息的所有控件。有關詳細信息,請參見 CreateUserWizardStep。
下面的代碼示例演示一個 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>
-
若要自定義完成步驟,請在 <asp:CompleteWizardStep> 元素中創建一個 <ContentTemplate> 元素。在該模板中,添加標記和控件來定義用於顯示確認消息及使用戶定位以繼續(可選)的用戶界面的佈局和內容。(必須提供用於收集成員資格提供程序創建新用戶帳戶所需信息的控件。有關詳細信息,請參見 CompleteWizardStep。)
下面的代碼示例演示一個 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>
-
添加代碼以引用其他控件。例如,通過處理 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; }
添加嚮導步驟
-
向 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>
-
添加嚮導步驟的代碼。可以處理 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; } } }
安全注意 該控件具有一個文本框,用於接受用戶輸入,這是一個潛在的安全威脅。默認情況下,ASP.NET 網頁驗證用戶輸入,以確保輸入中不包含 HTML 元素或腳本。有關更多信息,請參見腳本侵入概述。
示例
下面的代碼示例演示一個 CreateUserWizard 控件,該控件具有爲兩個基本步驟(CreateUserStep 和 CompleteStep)以及一個添加在 CreateUserStep 之前的附加嚮導步驟定義的模板。
安全注意 |
---|
該控件具有一個文本框,用於接受用戶輸入,這是一個潛在的安全威脅。網頁中的用戶輸入可能會包含具有惡意的客戶端腳本。默認情況下,ASP.NET 網頁驗證用戶輸入,以確保輸入中不包含 HTML 元素或腳本。只要啓用了此驗證,就不需要顯式檢查用戶輸入中的腳本或 HTML 元素。有關更多信息,請參見腳本侵入概述。 |
<%@ 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 xmlns="http://www.w3.org/1999/xhtml" > <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>