演练：创建基本的 ASP.NET Wizard 控件

生成一系列窗体来收集用户数据是开发网站时的常见任务。通过提供一种允许方便地生成步骤、添加新步骤或对步骤重新排序的机制，ASP.NET Wizard 控件简化了许多与生成窗体和收集用户输入关联的任务。在本演练中，将使用 csdnWizard 控件将数据收集简化为一系列独立的步骤，而无需编写代码或在窗体步骤之间保存用户数据。您将创建一个简单的向导，用于收集用户名和电子邮件地址，然后在完成步骤中将收集的内容返回给用户。本演练中阐释的任务包括：

• 向页中添加一个 Wizard 控件。

• 向向导步骤添加控件和文本。

• 在步骤之间访问向导的数据。

<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl07467cc9b,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl07img,"; </script> 先决条件

若要完成本演练，您需要：

• Microsoft Visual Web Developer (Visual Studio)。

• .NET Framework。

创建网站

如果已经在 Visual Web Developer 中创建了一个网站（例如，按照

创建文件系统网站

1. 打开 Visual Web Developer。

2. 在“文件”菜单上单击“新建网站”。

   出现“新建网站”对话框。

3. 在“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”。

4. 在“位置”框中输入要保存网站页面的文件夹的名称。

   例如，键入文件夹名“C:/WebSites”。

5. 在“语言”列表中，单击您想使用的编程语言。

6. 单击“确定”。

   Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

演练：在 Visual Web Developer 中创建基本网页 中的步骤），则可以使用该网站并转到本演练后面部分的“添加 Wizard 控件”。否则，按照下面的步骤创建一个新的网站和网页。

<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl08c644ae2,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl08img,"; </script>

<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl107c54872,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl10img,"; </script> 添加 Wizard 控件

添加 Wizard 控件

1. 切换到 Default.aspx 的“设计”视图。

2. 从“工具箱”的“标准”组中，将 Wizard 控件拖到该页上。

   该控件即显示在页上，并具有两个默认步骤。单击这两个步骤可对该步骤期间显示的文本和控件进行编辑。

编辑 Wizard 步骤

将 Wizard 控件拖放到页上时，默认情况下，该控件显示两个预定义步骤。在本演练中，您将编辑这两个步骤，并添加一个完成步骤，用于显示前两个步骤的结果：用户名和电子邮件地址。

编辑第一个向导步骤

1. 拖动“Wizard”控件边沿的控制柄之一，将该控件放大到大约其默认大小的两倍。

2. 单击“Wizard”控件中带下划线的文本“步骤 1”。

3. 单击“Wizard”控件的编辑区域。

   现在即可编辑该步骤的显示区域。

4. 键入“名称：”。

5. 将

现在即可编辑第二个步骤以收集用户的电子邮件地址。

编辑第二个向导步骤

1. 单击“Wizard”控件中的“步骤 2”。

2. 单击“Wizard”控件的编辑区域。

3. 键入“电子邮件：”。

4. 将 TextBox 控件拖到向导活动区域中电子邮件标签旁边。

5. 保存该文件。

TextBox 控件拖到向导活动区域中刚键入的文本旁边。

<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl115d1076c,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl11img,"; </script>

<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl134a1f6ed,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl13img,"; </script> 添加完成步骤

现在将创建一个完成步骤作为向导的结束点。Complete 步骤没有导航选项。

添加完成步骤

1. 右击“Wizard”控件。

2. 选择“显示智能标记”。

3. 在“向导任务”对话框中，选择“添加/移除向导步骤”。

   出现“WizardStep 集合编辑器”。

4. 从“添加”按钮上的“添加”下拉列表中，选择“向导步骤”。

   现在“属性”区域显示该新步骤。

5. 将“标题”属性设置为“已完成”。

6. 将“StepType”属性设置为“完成”。

7. 单击“确定”。

现在可以编辑新的完成步骤。为了实现本演练的目的，请配置该完成步骤以显示用户在前面步骤中输入的数据。

编辑完成步骤

1. 右击“Wizard”控件，然后选择“显示智能标记”。

2. 在“向导任务”对话框中，使用“步骤”下拉列表选择“已完成”步骤。

   注意
   该下拉列表中的名称将是该步骤在创建时使用的名称，在本例中是“已完成”。

3. 将

4. 将另一个 Label 控件拖到向导上，保留默认名称 Label2。

5. 保存该文件。

完成步骤将显示用户输入的数据。使用页的 Load 事件将前两个步骤的值指定给添加到完成步骤的两个标签。

显示用户的数据

1. 返回到 Default.aspx，并在“设计”视图中双击设计图面。

   该页现在包含为您存根的 Page_Load 方法。

2. 添加下面突出显示的代码。

   Visual Basic

1. 复制代码

   Private Sub Page_Load(ByVal sender As Object, _
           ByVal e As System.EventArgs) _
           Handles Me.Load
   <b>        Label1.Text = TextBox1.Text</b>
   <b>        Label2.Text = TextBox2.Text</b>
   End Sub
   

    

   C#

   复制代码

   void Page_Load(Object sender, System.EventArgs e)
   {
   <b>        Label1.Text = TextBox1.Text;</b>
   <b>        Label2.Text = TextBox2.Text;</b>
   }
   

2. 保存该文件。

Label 控件拖到向导上，保留默认名称 Label1。

<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl17f18f2c8,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl17img,"; </script> 测试 Wizard 控件

现在可以测试 Wizard 控件。

测试 Wizard 控件

1. 在“设计”视图中查看 Default.aspx。

2. 显示该控件上的“向导任务”菜单，并从“步骤”下拉列表中选择“步骤 1”。

3. 单击该“Wizard”控件，然后按 Ctrl+F5。

4. 在“步骤 1”中用于名称的“TextBox”控件中键入名称。

5. 单击“下一步”。

6. 在“步骤 2”中用于电子邮件的“TextBox”控件中键入电子邮件地址。

7. 单击“完成”。

   即会显示您的数据。

后续步骤

Wizard 控件简化了用于收集用户数据的窗体的创建。除了这里介绍的内容之外，您可能还有与用户数据收集和窗体使用有关的其他问题。例如，您可能希望：

• 了解有关使用窗体对用户进行身份验证的更多信息。有关详细信息，请参见

• 使用主题增强向导外观。有关详细信息，请参见

• ASP.NET 主题和外观概述

• 获取 Wizard 控件的概述。有关详细信息，请参见 Wizard Web 服务器控件概述

如何：实现简单的 Forms 身份验证

<script type="text/Javascript"> var ExpCollDivStr = ExpCollDivStr; ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl18d131309,"; var ExpCollImgStr = ExpCollImgStr; ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl18img,"; </script>