ASP.NET 2.0 向导控件

Namratha Shah

4.29/5 (26投票s)

2006年10月4日

CPOL

4分钟阅读

250367

3935

ASP.NET 2.0 向导控件

下载源文件 - 4.87 KB

引言

向导控件是 ASP.NET 2.0 中新增的控件。此控件使我们能够为用户创建基于向导的界面。通常，当我们要求用户输入大量数据时，会使用向导界面。向导使我们能够通过一系列多个步骤从用户那里获取数据。另一种替代向导界面的方法是使用选项卡界面，但与选项卡界面不同的是，向导只允许我们在步骤之间进行串行导航，也就是说，在选项卡界面中，用户可以跳转到不同的选项卡（如果未受控制），但在向导中，用户只能转到上一步或下一步。

ASP.NET 2.0 提供的控件完全模拟了向导。它为我们提供了开始、中间和完成模板。向导中的每个步骤都可以继承自这些模板之一。让我们创建一个电子邮件注册向导，它将允许我们在多个步骤中从用户那里获取数据。

电子邮件注册应用程序

让我们创建一个小型 Web 应用程序，它将允许我们使用向导控件获取用户的输入。

1. 如下所示，打开一个新的网站项目。

2. 从工具箱将向导控件添加到项目中，并将其命名为 EmailRegWizard。默认情况下，您会注意到向导中有 2 个步骤。

3. 如下所示，增大向导控件的大小。我们现在将向向导控件添加 3 个步骤。要向向导控件添加步骤，请选择向导控件，右键单击并选择“添加/删除向导步骤”。

4. 将启动“WizardStep Collection Editor”。单击“添加”并选择“WizardStep”。（如果直接单击“添加”，将添加一个向导）。如下所示，向向导控件再添加 2 个步骤。总共您应该有 5 个步骤，如下所示。

5. 现在，让我们根据我们将在该步骤中执行的操作来重命名向导控件的每个步骤。

在第一步中，我们将获取基本用户信息；第二步将处理电子邮件详细信息；第三步将处理忘记密码的详细信息；第四步，我们将询问用户的兴趣；第五步是最后一步，用户必须在此接受各种条款和条件。现在，让我们按如下方式重命名这些步骤（如下所示）：

步骤 1 -- 用户信息
步骤 2 -- 电子邮件详细信息
步骤 3 -- 忘记密码
步骤 4 -- 兴趣
步骤 5 -- 条款与条件

6. 对于第一步，让我们将 StepType 设置为“Start”（开始），对于最后一步，让我们将 step type 设置为“Finish”（完成）。设置完 step type 后，单击“OK”（确定）。

7. 现在，让我们为每个步骤添加一些控件。对于第一步，我们将添加基本用户信息，如名字、姓氏、性别、州、邮政编码、备用电子邮件地址。请参考下图和代码。

<asp:WizardStep runat="server" StepType="Start" Title="User Info">
<table cellpadding=0 cellspacing=0 width="100%">
 <tr>
     <td>
       First Name: 
     </td>
     <td>
       <asp:TextBox ID="FirstName" runat="server"></asp:TextBox>
     </td>
     <td>
       Last Name: 
     </td>
     <td>
        <asp:TextBox ID="LastName" runat="server"></asp:TextBox>
     </td>                            
 </tr>
 <tr>
     <td>
       Gender: 
     </td>
     <td>
       <asp:DropDownList ID="Gender" runat="server">
         <asp:ListItem>Male</asp:ListItem>
         <asp:ListItem>Female</asp:ListItem>
       </asp:DropDownList>
     </td>
 </tr>                        
 <tr>
     <td>
       State:
     </td>
     <td>
      <asp:DropDownList ID="State" runat="server">
        <asp:ListItem>Andaman and Nicobar Islands</asp:ListItem>
        <asp:ListItem>Andhra Pradesh</asp:ListItem>
        <asp:ListItem>Arunachal Pradesh</asp:ListItem>
        <asp:ListItem>Assam</asp:ListItem>
        <asp:ListItem>Bihar</asp:ListItem>
        <asp:ListItem>Chandigarh</asp:ListItem>
        <asp:ListItem>Chattisgarh</asp:ListItem>
        <asp:ListItem>Dadra and Nagar Haveli</asp:ListItem>
        <asp:ListItem>Daman and Diu</asp:ListItem>
        <asp:ListItem>Delhi</asp:ListItem>
        <asp:ListItem>Goa</asp:ListItem>
        <asp:ListItem>Gujarat</asp:ListItem>
        <asp:ListItem>Haryana</asp:ListItem>
        <asp:ListItem>Himachal Pradesh</asp:ListItem>
        <asp:ListItem>Jammu and Kashmir</asp:ListItem>
        <asp:ListItem>Jharkhand</asp:ListItem>
        <asp:ListItem>Karnataka</asp:ListItem>
        <asp:ListItem>Kerala</asp:ListItem>
        <asp:ListItem>Lakshadweep</asp:ListItem>
        <asp:ListItem>Madhya Pradesh</asp:ListItem>
        <asp:ListItem>Maharashtra</asp:ListItem>
        <asp:ListItem>Manipur</asp:ListItem>
        <asp:ListItem>Meghalaya</asp:ListItem>
        <asp:ListItem>Mizoram</asp:ListItem>
        <asp:ListItem>Nagaland</asp:ListItem>
        <asp:ListItem>Orissa</asp:ListItem>
        <asp:ListItem>Pondicherry</asp:ListItem>
        <asp:ListItem>Punjab</asp:ListItem>
        <asp:ListItem>Rajasthan</asp:ListItem>
        <asp:ListItem>Sikkim</asp:ListItem>
        <asp:ListItem>Tamil Nadu</asp:ListItem>
        <asp:ListItem>Tripura</asp:ListItem>
        <asp:ListItem>Uttarakhand</asp:ListItem>
        <asp:ListItem>Uttaranchal</asp:ListItem>
        <asp:ListItem>Uttar Pradesh</asp:ListItem>
        <asp:ListItem>West Bengal</asp:ListItem>
      </asp:DropDownList>                                
    </td>
 </tr>
 <tr>
     <td>
       Pin Code: 
     </td>
     <td>
       <asp:TextBox ID="PinCode" runat="server"></asp:TextBox>
     </td>
 </tr>
  <tr>
     <td>
        Alternate Email: 
     </td>
     <td>
       <asp:TextBox ID="AltEmail" runat="server"></asp:TextBox>
     </td>
 </tr>
</table>  
</asp:WizardStep>

添加用户信息后，我们将获取电子邮件详细信息，如电子邮件地址、密码和确认密码。

<asp:WizardStep runat="server" Title="Email Details">
<table>
 <tr>
     <td>
       Login Name: 
     </td>
     <td>
        <asp:TextBox ID="LoginName" runat="server"></asp:TextBox>
     </td>                        
 </tr>
 <tr>
     <td>
         Password: 
     </td>
     <td>
         <asp:TextBox ID="Password" runat="server" TextMode="Password">
</asp:TextBox>
     </td>                      
 </tr>
 <tr>
     <td>
        Confirm Password: 
     </td>
     <td>
        <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password">
        </asp:TextBox> 
     </td>
 </tr>
</table> 
</asp:WizardStep>

同样，我们将为最后三个步骤添加控件。

步骤 3

<asp:WizardStep runat="server" Title="Forgot Password">
<table cellpadding=0 cellspacing=0 width="100%">
 <tr>
     <td>
       Hint Question: 
     </td>
     <td>
       <asp:DropDownList ID="HintQuestion" runat="server">
        <asp:ListItem>What is the name of your first school?</asp:ListItem>
        <asp:ListItem>What is your favourite pass-time?</asp:ListItem>
        <asp:ListItem>What is your mother's maiden name?</asp:ListItem>
        <asp:ListItem>What is your favourite food?</asp:ListItem>
        <asp:ListItem>What is your exact time of birth?</asp:ListItem>
       </asp:DropDownList>
     </td>
 </tr>
 <tr>
     <td>
      Hint Answer: 
     </td>
     <td>
       <asp:TextBox ID="HintAnswer" runat="server" TextMode="Password"></asp:TextBox>
     </td>
 </tr>        
</table>
</asp:WizardStep>

步骤 4

<asp:WizardStep runat="server" Title="Interests">
    <table cellpadding=0 cellspacing=0 width="100%">
 <tr>
     <td>
  <asp:CheckBox ID="News" runat="server" Text="News"/>
     </td>
     <td>
  <asp:CheckBox ID="HnF" runat="server" Text="Home & Family"/>
     </td>
     <td>
  <asp:CheckBox ID="HnN" runat="server" Text="Health & Nutrition"/>
     </td>
     <td>
  <asp:CheckBox ID="Auto" runat="server" Text="Automobiles"/>
     </td>                            
 </tr>
 <tr>
     <td>
  <asp:CheckBox ID="Education" runat="server" Text="Education"/>
     </td>
     <td>
  <asp:CheckBox ID="Loand" runat="server" Text="Loans"/>
     </td>
     <td>
  <asp:CheckBox ID="Travel" runat="server" Text="Travel"/>
     </td>
     <td>
  <asp:CheckBox ID="Computers" runat="server" Text="Computers"/>
     </td>                            
 </tr>                        
 <tr>
     <td>
  <asp:CheckBox ID="Shopping" runat="server" Text="Shopping"/>
     </td>
     <td>
  <asp:CheckBox ID="Insurance" runat="server" Text="Insurance"/>
     </td>
     <td>
  <asp:CheckBox ID="Beauty" runat="server" Text="Beauty "/>
     </td>
     <td>
  <asp:CheckBox ID="Fashion" runat="server" Text="Fashion"/>
     </td>                            
 </tr>
 <tr>
     <td>
  <asp:CheckBox ID="Sports" runat="server" Text="Sports "/>
     </td>
     <td>
  <asp:CheckBox ID="OnlineGames" runat="server" Text="Online Gaming"/>
     </td>
     <td>
  <asp:CheckBox ID="SpecialOffers" runat="server" Text="Special Offers"/>
     </td>
     <td>
  <asp:CheckBox ID="Family" runat="server" Text="Family"/>
     </td>                            
 </tr>
    </table>
</asp:WizardStep>

步骤 5

<asp:WizardStep runat="server" StepType="Finish" Title="Terms&Conditions">
    <table>
 <tr>
     <td style="height: 294px">
  <asp:TextBox ID="TermsAndConditions" runat="server" TextMode="MultiLine" 
  Height="323px" Width="337px" Text="Terms & Conditions" Font-Bold="True" 
  Font-Names="Impact" Font-Size="XX-Large"></asp:TextBox> 
     </td>
 </tr>                
    </table>
</asp:WizardStep>

创建向导步骤后，让我们加载页面并执行向导的所有步骤。您应该能够在没有任何代码的情况下使用向导控件。现在，让我们在第一个步骤中为 FirstName 和 Gender 添加一些验证器，在第二个步骤中为 LoginName 添加一些验证器。

<asp:RequiredFieldValidator ID="FirstNameVal" runat="server" ErrorMessage="!" 
ControlToValidate="FirstName"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="GenderVal" runat="server" ErrorMessage="!" 

ControlToValidate="Gender"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="LoginVal" runat="server" ErrorMessage="!" 

ControlToValidate="LoginName"></asp:RequiredFieldValidator>

我只为第一步和第二步添加了验证器，您可以为所有步骤添加它们。执行时，您会注意到，如果未输入名字且未选择性别，在单击“下一步”按钮时，向导不会前进。如果我们在未输入 LoginName 的情况下单击“下一步”，也会发生相同的行为。但是，如果我们单击“上一步”按钮，验证器不会触发。

同样，我们可以填写电子邮件注册的所有详细信息。填写完所有详细信息并单击最后一步中的“完成”按钮后。我们必须在成功保存数据后显示成功消息。让我们假设我们已将数据保存在数据库中，并且注册已成功。因此，单击“完成”后，我们将用户重定向到“Message.aspx”。向导控件有许多事件，例如：

ActiveStepChanged（当前步骤已更改）
CancelButtonClick（取消按钮单击）
FinishButtonClick（完成按钮单击）
NextButtonClick（下一步按钮单击）
PreviousButtonClick（上一步按钮单击）
SideBarButtonClick（侧边栏按钮单击）

让我们捕获 FinishButtonClick 事件并重定向到 Message.aspx。让我们向项目中添加另一个名为 Message.aspx 的页面。项目的启动页应该是 Default.aspx。在 Message.aspx 中，我们将添加以下代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Message:  System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TextMessage.Text = Convert.ToString(this.Request.QueryString["FirstName"]) 
+ " has been successfully registered." ;
    }
}

In the Default.aspx we will add the below code for the FinishButtonClick event

    protected void EmailRegWizard_FinishButtonClick(
        object sender, WizardNavigationEventArgs e)
    {
        Response.Redirect("Message.aspx?FirstName=" + ((TextBox) 

EmailRegWizard.WizardSteps[0].FindControl("FirstName")).Text);   
    }

让我们在运行应用程序时执行。单击“完成”按钮后，您应该会被重定向到 Message.aspx。

结论

我们已经了解了如何使用 ASP.NET 2.0 提供的向导控件。这只是我在此处举的一个例子。我们可以在大多数需要使用选项卡控件的页面上使用向导控件。与 IE Web 控件相比，向导更容易使用。我希望这篇文章对您有所帮助。请在此处发表您的评论并评价本文。感谢您的时间。