ASP.net开发标准控件之Wizard

最新推荐文章于 2020-07-08 14:22:35 发布

m01ly

最新推荐文章于 2020-07-08 14:22:35 发布

阅读量1.9k

点赞数 5

分类专栏： .net 文章标签： Wizard .net 标准控件

本文链接：https://blog.csdn.net/qq_25954259/article/details/79111089

版权

.net 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、控件介绍

使用表单收集用户输入是 Web 开发中要反复执行的一项任务。用来完成某项任务的一组表单通常称为“向导”。ASP.NET Wizard 控件简化了许多与生成多个表单和收集用户输入相关联的任务。Wizard 控件提供了一种简单的机制，使您能够轻松地生成步骤、添加新步骤或重新安排步骤顺序。无需编写代码即可生成线性和非线性的导航，以及自定义控件的用户导航。
“Wizard”控件由三个独立的区域组成：边栏区域、导航区域和步骤区域。您可以在“标记属性”任务窗格中设置上述每个区域的属性，也可以设置整个 Wizard 的属性。
https://msdn.microsoft.com/zh-cn/library/cc295425.aspx

二、任务介绍

添加新网页Wizard.aspx，完成下图所示的功能：
这里写图片描述
（1）在该视图上实现对食物的选择。
（2）当单击“提交”按钮后，会自动按照选中状态累加统计出各个食物被选中的次数，并跳转到下图所示的结果视图。

（3）当单击“返回”按钮后，会回到实现对食物的选择视图。
需要用到控件：1个Wizard；1个CheckBoxList；1个BulletedList。

三、任务操作

3.1.完成基本界面

1）在S16解决方案的Web项目中添加新网页Wizard.aspx，并将控件：1个Wizard；1个CheckBoxList；1个BulletedList拖到页面中，设置其属性值：
这里写图片描述
2）编辑模板，将下一步按钮改为“提交”，上一步按钮改为“返回”
点击所有“转换为XX”，使模板可以编辑

然后选择“选择编辑模板”

然后右边下拉列表中选择StartNavigationTemplate,修改上一步按钮的Text属性为“提交”，并创建点击事件：StartNextButton_Click（）
这里写图片描述
然后右边下拉列表中选择FinishNavigationTemplate修改上一步按钮的Text属性为“返回”
效果图如下：
设计图：

代码：

3.2 功能分析

1.功能描述与分析：
（1）当单击“提交”按钮后，会自动按照选中状态累加统计出各个食物被选中的次数，并跳转到下图所示的结果视图。
（2）当单击“返回”按钮后，会回到实现对食物的选择视图。
事件（1）属于“提交”按钮的点击Click事件，
事件（2）属于“返回”按钮的点击Click事件。
事件内容为：
事件（1）：
首先统计出复选框列表（CheckBoxList）的选择次数（历史次数+（1）），将其赋值到对应的BulletedList的Item上，修改其的Value值和Text值。
其次跳转到视图2.
事件（2）：跳转到视图1。
2.操作步骤：
1)添加点击StartNextButton_Click事件内容：
这里写图片描述
2）运行页面：在“解决方案资源管理器”中选中Wizard.aspx页面，右击点击“在浏览器中查看”
效果图为：

这里写图片描述

原代码：

前端：Wizard.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Wizard.aspx.cs" Inherits="Web.Wizard" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Wizard ID="wzd" runat="server" ActiveStepIndex="0" Height="167px" 
            Width="267px">
            <FinishNavigationTemplate>
                <asp:Button ID="FinishPreviousButton" runat="server" CausesValidation="False" 
                    CommandName="MovePrevious" Text="返回" />
                <asp:Button ID="FinishButton" runat="server" CommandName="MoveComplete" 
                    Text="完成" />
            </FinishNavigationTemplate>
            <SideBarTemplate>
                <asp:DataList ID="SideBarList" runat="server">
                    <ItemTemplate>
                        <asp:LinkButton ID="SideBarButton" runat="server"></asp:LinkButton>
                    </ItemTemplate>
                    <SelectedItemStyle Font-Bold="True" />
                </asp:DataList>
            </SideBarTemplate>
            <StartNavigationTemplate>
                <asp:Button ID="StartNextButton" runat="server" CommandName="MoveNext" 
                    onclick="StartNextButton_Click" Text="提交" />
            </StartNavigationTemplate>
            <StepNavigationTemplate>
                <asp:Button ID="StepPreviousButton" runat="server" CausesValidation="False" 
                    CommandName="MovePrevious" Text="上一步" />
                <asp:Button ID="StepNextButton" runat="server" CommandName="MoveNext" 
                    Text="下一步" />
            </StepNavigationTemplate>
            <WizardSteps>
                <asp:WizardStep runat="server" title="Step 1">
                     <asp:CheckBoxList ID="chkbxlst" runat="server" AutoPostBack="True">
                        <asp:ListItem Value="1.0">香蕉</asp:ListItem>
                        <asp:ListItem Value="2.0">苹果</asp:ListItem>
                        <asp:ListItem Value="3.0">梨子</asp:ListItem>
                     </asp:CheckBoxList>
                </asp:WizardStep>
                <asp:WizardStep runat="server" title="Step 2">
                   <asp:BulletedList ID="bltdlst" runat="server">
                        <asp:ListItem Value="1.0">香蕉（已选择 0 次）</asp:ListItem>
                        <asp:ListItem Value="2.0">苹果（已选择 0 次）</asp:ListItem>
                        <asp:ListItem Value="3.0">梨子（已选择 0 次）</asp:ListItem>
                </asp:BulletedList>
                </asp:WizardStep>
            </WizardSteps>
        </asp:Wizard>

    </div>
    </form>
</body>
</html>

后端：Wizard.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Web
{
    public partial class Wizard : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void StartNextButton_Click(object sender, EventArgs e)
        {
            foreach (ListItem aItem in this.chkbxlst.Items)
            {
                foreach (ListItem Item in this.bltdlst.Items)
                {//求出上次被选中的次数。           
                    int iCount = Convert.ToInt32(
                    aItem.Value.Substring(aItem.Value.IndexOf('.') + 1));
                    //  对被选中的次数做累加，并按照“X.X”格式回写给列表项的“Value”属性。
                    if (aItem.Value == Item.Value && aItem.Selected)
                    {
                        //  修改.CheckBoxList列表项的“Text”属性
                        aItem.Value = aItem.Value.Replace(
                        string.Format(".{0}", iCount),
                        string.Format(".{0}", iCount + 1));
                        //  修改BulletedList列表项的“Text”属性
                        Item.Value = Item.Value.Replace(
                        string.Format(".{0}", iCount),
                        string.Format(".{0}", iCount + 1));
                        //  修改BulletedList列表项的“Text”属性，以便显示被选择的累加结果。
                        Item.Text = Item.Text.Replace(
                        string.Format("（已选择 {0} 次）", iCount),
                        string.Format("（已选择 {0} 次）", iCount + 1));
                    }

                }
            }
        }
    }
}

m01ly

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
ASP.net开发标准控件之Wizard

一、控件介绍使用表单收集用户输入是 Web 开发中要反复执行的一项任务。用来完成某项任务的一组表单通常称为“向导”。ASP.NET Wizard 控件简化了许多与生成多个表单和收集用户输入相关联的任务。Wizard 控件提供了一种简单的机制，使您能够轻松地生成步骤、添加新步骤或重新安排步骤顺序。无需编写代码即可生成线性和非线性的导航，以及自定义控件的用户导航。 “Wizar
复制链接

扫一扫