精华内容
下载资源
问答
  • web控件有哪些
    千次阅读 多人点赞
    2019-12-19 21:34:53

    文章目录


    ASP.NET控件

    下面会写一些ASP.NET中常用的服务器控件,了解了这些控件的使用,可以利用这些控件开发出功能强大的Web应用程序。


    所有的控件都有两种方式创建,第一种方式是通过工具箱进行拖拽、第二种方式时在在aspx页面编写标签。为了节省篇幅,本文只在一、文本类型控件中说明创建控件的方法。

    一、文本类型控件

    主要用于在网页上呈现文字,这些控件可以分为只读的文本控件或接受用户输入的文本控件。

    1、Label控件(显示用户不能编辑的文本)

    (1)设置文本

    第一种方式是在源代码中定义标签的时候直接赋值,这种方式一般用于显示静态的文本

    <asp:Label ID = "Label1" runat = "server" Text = "静态的label文本"></asp:Label>
    

    第二种方式是在后台代码中绑定赋值,一般用于显示动态的文本

    this.Label1.Text = "动态的label文本";
    
    (2)设置外观

    同样的设置Label外观的方式有两种,第一种方式是直接在标签上定义样式属性和值

    <asp:Label ID="lbl1" runat="server" Text="标签控制外观属性" BackColor ="Blue" 
    Font-Bold="true" Font-Italic="true" Font-Names="楷体"
    Font-Size="15pt" ForeColor="#FF5050"></asp:Label>
    

    第二种方式是通过Label控件的属性页面,设置它的外观,如下图所示:
    在这里插入图片描述

    2、TextBox控件(用户可编辑文本)

    文本框控件,可以用于输入或者显示文本,通常用于可编辑文本(也可以设置为只读)。

    (1)文本内容的显示模式

    显示模式的设置是通过TextMode属性进行更改的,它的属性值对应以下功能:

    属性对应模式效果图
    默认文本模式在这里插入图片描述
    Password密码模式在这里插入图片描述
    MultiLine多行文本模式在这里插入图片描述
    Number数字模式在这里插入图片描述
    Color选择颜色模式在这里插入图片描述
    Date、DateTime、DateTimeLocal时间日期模式在这里插入图片描述
    等等等等等等
    (2)修改文本内容所触发的事情

    在一些输入文本框的内容时,我们希望用户输入完能够立刻检查文本内容的合法性。例如,在注册用户时,验证用户名是否存在、是否符合命名规范等等。这就需要TextBox中的TextChanged事件,该事件是当文本内容后触发,双击你定义的文本框,后台会自动生成相应的方法

            protected void TextBox1_TextChanged(object sender, EventArgs e)
            {
    			//编写逻辑代码
            }
    

    二、按钮类型控件

    用于响应用户点击行为的控件。

    1、Button控件(按钮)

    (1)单击事件

    创建一个Button控件,双击这个控件就可以自动生成写逻辑代码的方法! 如下图所示:
    双击创建Click方法
    下面是编写逻辑代码的方法:

            protected void Button1_Click(object sender, EventArgs e)
            {
                //编写逻辑代码
            }
    
    (2)OnCilentClick事件

    这个事件是用于触发客户端的JavaScript脚本代码,在单击Button按钮后应该询问用户是否确认这样的操作,如果用户误点那么就是一次无效的提交。

    定义一个Button控件,然后响应一个OnClientClick事件。代码如下:

    定义标签

    <asp:Button ID="btn1" runat="server" Text="提交" OnClick="btn1_Click" OnClientClick="return IsConfirm()" />
    

    OnClentClick事件所触发的JavaScript方法IsConfirm:

        <script type="text/javascript">
            function IsConfirm() {
                if (confirm("要确认保存当前修改的数据吗?"))
                    return true;
                return false;
            }
        </script>
    
    (3)简单应用——网页弹出消息对话框

    与上述步骤类似,定义一个Button标签,然后创建一个单击方法,写入如下代码:

            protected void btn1_Click(object sender, EventArgs e)
            {
                Response.Write("<script>alert('点我干吗?')</script>");
            }
    

    2、LinkButton控件(超链接按钮)

    超链接按钮控件,与上述Button类似,但在呈现的样式上不一样,它以超链接的形式显示。

    (1)单击事件

    定义一个标签,双击这个东西就会弹出相应的单击事件

    下面是标签代码:

    <asp:LinkButton ID="Lbtn1" runat ="server" Text="超链接" OnClick="Lbtn1_Click"></asp:LinkButton>
    
    (2)定义页面跳转链接

    这个控件除了单击事件外还有一个很常用的属性,即——PostBackUrl属性,该属性是用来设置单击控件时链接到的网页地址。设置的时候,单击后面的三个点就会弹出下图所示的对话框,选择一个网页地址就好了。

    PostBackUrl界面

    (3)简单应用——实现个性化页面跳转功能

    先看一下,最终的效果吧!如下图所示:
    最终实现效果
    实现这个个性化页面跳转功能很简单。通过设置LinkButton控件中的PostBackUrl属性实现超链接功能,链接按钮按钮分别设置为不一样的颜色,在跳转的时候传值即可。

    新建一个网站并且创建首页,再添加一个GetColor页面,在首页上添加七个LinkButton控件,如下代码所示:

            <div style="width:900px;margin:0px auto">
                <asp:LinkButton ID="lbtn1" PostBackUrl="~/GetColor.aspx?Color=Red" runat="server"
                    ForeColor="Red" Font-Size="14">红色超链接</asp:LinkButton>&nbsp;&nbsp;
                <asp:LinkButton ID="lbtn2" PostBackUrl="~/GetColor.aspx?Color=-FF9933" runat="server"
                    ForeColor="#FF9933" Font-Size="13">橙色超链接</asp:LinkButton>&nbsp;&nbsp;
                <asp:LinkButton ID="lbtn3" PostBackUrl="~/GetColor.aspx?Color=Yellow" runat="server"
                    ForeColor="Yellow" Font-Size="14">黄色超链接</asp:LinkButton>&nbsp;&nbsp;
                <asp:LinkButton ID="lbtn4" PostBackUrl="~/GetColor.aspx?Color=Green" runat="server"
                    ForeColor="Green" Font-Size="13">绿色超链接</asp:LinkButton>&nbsp;&nbsp;
                <asp:LinkButton ID="lbtn5" PostBackUrl="~/GetColor.aspx?Color=-00CCFF" runat="server"
                    ForeColor="#00CCFF" Font-Size="14">青色超链接</asp:LinkButton>&nbsp;&nbsp;
                <asp:LinkButton ID="lbtn6" PostBackUrl="~/GetColor.aspx?Color=Blue" runat="server"
                    ForeColor="Blue" Font-Size="13">蓝色超链接</asp:LinkButton>&nbsp; &nbsp;
                <asp:LinkButton ID="lbtn7" PostBackUrl="~/GetColor.aspx?Color=-CC0099" runat="server"
                    ForeColor="#CC0099" Font-Size="14">紫色超链接</asp:LinkButton>
            </div>
    

    然后在GetColor.aspx页面下添加一个<div>页面,这个空间要设置的足够大,把整个屏幕填满,再加一个CSS我们通过改变他的background-color变化颜色。

    GetColor.aspx页面代码:

    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style>
            body{
                margin:0px;
                padding:0px;
                height:100%;
                width:100%;
                color:white;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="box" runat="server" style="width:100%;height:1080px;">
                您点击的是<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>按钮链接。
            </div>
        </form>
    </body>
    

    GetColor.aspx.cs代码:

            protected void Page_Load(object sender, EventArgs e)
            {
                string color = Request.QueryString["Color"];
                //下面这句话运用了三目运算符,如果传过来的字符串包含“-”那么将“-”替换为“#”
                this.box.Style["background-color"] = color.IndexOf("-") > -1 ? color.Replace("-", "#") : color;
                string bgc = "";
                switch (color)
                {
                    case "Red":bgc = "红色";break;
                    case "-FF9933":bgc = "橙色";break;
                    case "Yellow":bgc = "黄色";break;
                    case "-009900":bgc = "绿色";break;
                    case "-00CCFF": bgc = "青色";break;
                    case "Blue":bgc = "蓝色";break;
                    case "-CC0099":bgc = "紫色";break;
                }
                this.Label1.Text = bgc;
            }
    

    大功告成!!点击运行就可以得到一个个性化的页面了。

    3、ImageButton控件(图像按钮)

    图像按钮控件,通常用于显示按钮的背景图像。

    (1)设置控件显示的图片

    新建一个项目,在项目里面新建一个文件夹,然后选择照片粘贴到这个文件夹当中。

    在这里插入图片描述
    然后可以通过以下的代码创建一个ImageButton控件,选择图片3当背景好了。

    <asp:ImageButton ID="Imgbtn1" runat="server" ImageUrl="~/pic/3.jpg" />
    
    (2)AltrenateText属性

    如果这个控件由于某种特殊的原因,显示不出来ImageUrl的图片了,这时候,可以通过AltrenateText将文本显示在页面上。这样定义:

    <asp:ImageButton ID="Imgbtn1" runat="server" ImageUrl="~/pic/4.jpg" AlternateText="悟空" />
    
    (3)简单应用——动态更改网页背景图

    这个简单的应用将在页面上放几个ImageButton控件并设置为背景图片。就是说如果单击一个图片的话,就会立即把大的背景图片更新为按钮的那个图片。

    新建一个项目并创建一个起始页面,在起始页上面添加三个ImageButton控件,代码如下:

    <asp:ImageButton ID="Imgbtn1" runat="server" BorderColor="Black" BorderWidth="2px" Height="250px" ImageUrl="~/pic/1.jpg" Width="250px" />
    <asp:ImageButton ID="Imgbtn2" runat="server" BorderColor="Black" BorderWidth="2px" Height="250px" ImageUrl="~/pic/2.jpg" Width="250px" />
    <asp:ImageButton ID="Imgbtn3" runat="server" BorderColor="Black" BorderWidth="2px" Height="250px" ImageUrl="~/pic/3.jpg" Width="250px" />
    

    然后为这三个图片都添加一个单击事件(双击即可),在起始页.aspx.cs文件中定义的一个public的字符串imgUrl,然后在三个单击事件中获取当前图片的Url,并赋值给imgUrl

    	   public string imgUrl = "";
           protected void Imgbtn1_Click(object sender, ImageClickEventArgs e)
            {
                imgUrl = ((ImageButton)sender).ImageUrl;        //单击第一个图示设置imgUrl变量的值
            }
    
            protected void Imgbtn2_Click(object sender, ImageClickEventArgs e)
            {
                imgUrl = ((ImageButton)sender).ImageUrl;
            }
    
            protected void Imgbtn3_Click(object sender, ImageClickEventArgs e)
            {
                imgUrl = ((ImageButton)sender).ImageUrl;
            }
    

    然后设置网页的背景图片,这里直接在<body>标签上定义style里面的background-image的属性就好了,代码如下(节省篇幅。不给出下面的代码,和上面一样):

    <body style="background-image:url('<%=imgUrl%>');background-repeat:no-repeat;">
    

    由于我选的三张照片极丑……我这里就不贴出预期效果了。各位读者见谅!

    4、HyperLink控件(超链接)

    超链接控件,当用户点击时并不会在服务器代码中引发事件,该控件只实现链接功能。

    (1)指定跳转方式

    HyperLink控件的NavigateUrl属性用来设置要跳转到的地址。他有以下的跳转方式:

    • _self:默认的,在自身页面打开
    • _blank:在新的页面上打开链接页
    • _media_search:将链接文档显示在新的空白窗口
    • _parent_top:将相应页面加到在单击该链接的窗口

    它是这样定义的:

    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://www.baidu.com/" Target="_blank">HyperLink</asp:HyperLink>
    

    三、选择类型控件

    选择类型控件是用于在一个集合列表中选中其中的一项或多项,这些控件中包含单选以及多选控件。

    1、ListBox控件(列表框)

    用于显示一组列表项,用户可以选择一项或多项。

    (1)创建一个ListBox列表

    可以通过下面的代码,定义一个ListBox控件:

                <asp:ListBox ID="ListBox1" runat="server">
                    <asp:ListItem Text="wzq" Value="1"></asp:ListItem>
                    <asp:ListItem Text="zrm" Value="2"></asp:ListItem>
                </asp:ListBox>
    
    (2)后台绑定列表属性

    可以用数组或集合来填充控件,使用DataSource属性将数组或集合中的数据绑定到空间上,代码如下:

            protected void Page_Load(object sender, EventArgs e)
            {
                ArrayList arr = new ArrayList();
                arr.Add("wzq");
                arr.Add("love");
                arr.Add("zrm");
                ListBox1.DataSource = arr;
                ListBox1.DataBind();       
            }
    

    值得一提的是:DataSource只是指定数据源,DataBind把这些数据绑定到了控件上。

    (3)后台获取选择项

    有两种方法获取ListBox选择项

    第一种方法是通过遍历的方式获取并进行Selected属性判断,代码如下:

               foreach(ListItem LI in this.ListBox1.Items)
                {
                    if (LI.Selected)
                    {
                        //已选择的项
                    }
                }
    

    第二种方法是通过SelectedValue属性直接获取,代码如下:

    string ListBoxValue = this.ListBox1.SelectedValue;
    

    下面是ListBox控件的一些属性:

    • Items属性:用于返回ListBox的所有项
    • SelectionMode属性:用于设置ListBox为单选项还是多选项,指定值为Single表示单选,指定值为Multiple为多选
    • DataSource属性:用于指定控件的数据源
    (4)简单应用——选择并移动ListBox控件中的项

    怼两个ListBox控件,再添加四个Button按钮,实现列表控件元素的移动移动,下面时成品效果图:
    效果图
    开始写代码,首先按照下面的代码添加上图中需要用的控件:

    <table>
        <tr>
            <td>
                <asp:ListBox ID="lbxDest" runat="server" Height="234px" SelectionMode="Multiple" Width="170px"></asp:ListBox>
            </td><td>
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="<<" Width="80px" /><br /><br />
                <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text=">>" Width="80px" /><br /><br />
                <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="<" Width="80px" /><br /><br />
                <asp:Button ID="Button4" runat="server" OnClick="Button4_Click" Text=">" Width="80px" />
            </td><td>
                <asp:ListBox ID="lbxSource" runat="server" Height="234px" SelectionMode="Multiple" Width="170px"></asp:ListBox>
            </td>
        </tr>
    </table>
    

    然后在.aspx.cs界面的Page_Load方法中通过集合来绑定一些数据,在绑定数据之前,需要判断一下是不是回发。代码如下:

            protected void Page_Load(object sender, EventArgs e)
            {
                //验证页面是否为回发
                if (!IsPostBack)
                {
                    ArrayList arr = new ArrayList();
                    arr.Add("孙悟空");
                    arr.Add("孙悟天");
                    arr.Add("孙悟饭");
                    arr.Add("贝吉塔");
                    arr.Add("布尔玛");
                    arr.Add("特兰克斯");
                    arr.Add("琪琪");
                    lbxSource.DataSource = arr;
                    lbxSource.DataBind();
                }      
            }
    

    紧接着就是四个Button的点击事件了,这里只给出第一个和第三个Button的点击方法,第二个和第四个与之雷同,为节省篇幅,不再贴出。

            protected void Button1_Click(object sender, EventArgs e)
            {
                int sum = lbxSource.Items.Count;
                for(int i = 0; i < sum; i++)
                {
                    ListItem Item = lbxSource.Items[0];
                    lbxSource.Items.Remove(Item);       //移除第一项
                    lbxDest.Items.Add(Item);            //添加到目标
                }
            }
            protected void Button3_Click(object sender, EventArgs e)
            {
                int sum = lbxSource.Items.Count;
                int index = 0;
                for(int i = 0; i < sum; i++)
                {
                    ListItem Item = lbxSource.Items[index];     //取出索引项
                    if (lbxSource.Items[index].Selected == true)
                    {
                        
                        lbxSource.Items.Remove(Item);
                        lbxDest.Items.Add(Item);
                        index--;        //将当前索引值-1
                    }
                    index++;        //获取下一个选项的索引
                }
            }
    

    然后他就成功啦 ~~

    2、DropDownList控件(下拉列表框)

    与上面的控件大体类似,但是DropDownList只允许用户每次从列表中选择一项。所以它是下拉列表框。

    (1)更改选定索引触发事件

    选中一个选项后就触发一个后台方法,首先先定义一个DropDownList控件:

    <asp:DropDownList ID="DropDownList1" runat="server" 
        OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">
        <asp:ListItem Text="Text1" Value="1"></asp:ListItem>
        <asp:ListItem Text="Text2" Value="2"></asp:ListItem>
        <asp:ListItem Text="Text2" Value="3"></asp:ListItem>
    </asp:DropDownList>
    

    双击这个控件就可以得到一个SelectedIndexChanged方法来,我们获取一下选中的索引值、Value值和Text值,代码如下:

            protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
            {
                int index = this.DropDownList1.SelectedIndex;
                string value = this.DropDownList1.SelectedValue;
                string text = this.DropDownList1.Items[index].Text;
            }
    
    (2)简单应用——查看假期以便合理安排出行计划

    这个应用要求做一个下拉列表框然后,根据列表框的内容显示哪几天是假期。

    先看一下做好的效果:
    效果图
    这个项目一看就需要CSS来设置样式,所以我们先设置一下样式吧~(这个代码真的长)

    .holidayBox{
        width:600px;
        margin:0px auto;
    }
    .holidaySelect{
        width:100%;
        height:100px;
        background-color:#ff6a00;
    }
    .DropDownList{
        border:1px;
        border-style:solid;
        border-color:#808080;
        width:200px;
        height:40px;
    }
    .holidaySelectRow{
        float:left;
        height:50px;
        margin-top:25px;
    }
    .holidaySelected{
        width:220px;
        height:50px;
        margin-left:40px;
    }
    .holidaySelectDay{
        width:260px;
        height:50px;
        color:white;
        margin-left:40px;
        padding-top:10px;
        box-sizing:border-box;
    }
    .Days{
        width:100%;
        background-color:#0ebbbb;
    }
    .Days span{
        display:block;
        height:50px;
        line-height:50px;
        margin-left:20px;
        color:white;
    }
    

    写完CSS代码接着,定义这个下拉列表框等等,代码如下:

    	 <div class="holidayBox">
                <div class="holidaySelect">
                    <div class="holidaySelectRow holidaySelected">
                        <asp:DropDownList ID="DropDownList1" runat="server" 
                            OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" 
                            AutoPostBack="true" CssClass="DropDownList" >
                            <asp:ListItem Text="假期安排" Value="0" > </asp:ListItem >
                            <asp:ListItem Text="元旦" Value="1" > </asp:ListItem >
                            <asp:ListItem Text="除夕" Value="2" > </asp:ListItem >
                            <asp:ListItem Text="春节" Value="3" > </asp:ListItem >
                            <asp:ListItem Text="清明节" Value="4" > </asp:ListItem >
                            <asp:ListItem Text="劳动节" Value="5" > </asp:ListItem >
                            <asp:ListItem Text="端午节" Value="6" > </asp:ListItem >
                            <asp:ListItem Text="国庆节" Value="7" > </asp:ListItem >
                            <asp:ListItem Text="中秋节" Value="8" > </asp:ListItem >
                            </asp:DropDownList >
                    </div>
                    <div class="holidaySelectRow holidaySelectDay">
                        <span>今天是<%=DateTime.Now.ToString("yyyy年MM月dd日") %></span>
                    </div>
                </div>
                <div class="Days" id="Days" runat="server">
    
                </div>
            </div>
    

    这样写完之后,基本的样式也能显示出来了,然后我们编写逻辑代码。首先需要在.aspx.cs页面的Page_Load方法中先把这几个节日的放假日期放到一个集合里面,后面如果我们选中下拉列表框的某一项,直接通过调用集合的某一项然后显示在页面上就好了,先来看一下Page_Load方法:

            IList<string[]> list = null;
            protected void Page_Load(object sender, EventArgs e)
            {
                if (list == null)
                {
                    list = new List<string[]>();
                    list.Add(new string[] { });
                    list.Add(new string[] { "2019-12-31","2020-1-1","2020-1-2" });
                    list.Add(new string[] {"2020-1-24","2020-1-25", "2020-1-26", "2020-1-27", "2020-1-28", "2020-1-29", "2020-1-30" });
                    list.Add(new string[] { "2020-1-24" });
                    list.Add(new string[] { "2020-4-4", "2020-4-5", "2020-4-6" });
                    list.Add(new string[] { "2020-5-1", "2020-5-2", "2020-5-3", "2020-5-4", "2020-5-5" });
                    list.Add(new string[] {  "2020-6-25", "2020-6-26", "2020-6-27" });
                    list.Add(new string[] { "2020-10-1", "2020-10-2", "2020-10-3", "2020-10-4", "2020-10-5", "2020-10-6", "2020-10-7" });
                    list.Add(new string[] { "2020-10-1" });
                }
            }
    

    然后是DropDownListSelectedIndexChanged的方法:

            protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
            {
                string value = this.DropDownList1.SelectedValue;
                string[] days = list.ElementAt(int.Parse(value));	//获取一组字符串
                string daysStr = "";
                foreach(string day in days)
                {
                    daysStr +="<span>" + day + "</span>";
                }
                this.Days.InnerHtml = daysStr;
            }
    

    然后就大功告成了!!点击运行就可以看到预期的效果了!!

    3、RadioButton控件(单选按钮)

    是一种单选按钮控件,可以在页面中添加一组RadioButton,每组都有相同的GroupName(组名),每组只能选择一个选项。

    (1)分组属性

    使用GroupName属性指定一组单选按钮,一组的按钮互相排斥。他是这样定义的:

                <asp:RadioButton ID="RadioButton1" GroupName="one" runat="server" />
                <asp:RadioButton ID="RadioButton2" GroupName="one" runat="server" />
                <asp:RadioButton ID="RadioButton3" GroupName="two" runat="server" />
                <asp:RadioButton ID="RadioButton4" GroupName="two" runat="server" />
    

    以上定义了两组RadioButton,运行后是这样的效果:
    在这里插入图片描述

    (2)获取或设置选中状态

    Check属性可以用来设置或者获取其选中的状态。

    第一种方法:定义控件直接设置,代码如下:

    <asp:RadioButton ID="RadioButton1" GroupName="one" Checked="true" runat="server" />
    

    第二种方法:在后台代码中进行设置,代码如下:

    this.RadioButton1.Checked=true;
    

    在后台中判断是否选中:

    if(this.RadioButton1.Checked) { //逻辑代码 }
    
    (3)简单应用——模拟考试系统中的单选题

    先来看一下,成品的效果:
    在这里插入图片描述
    观察上面的GIF图,发现需要用到四个RadioButton(同一组),还需要用到一个Lable控件用来显示每次选择的答案(这里需要用的RadioButtonCheckedChanged属性),然后就是一个Button控件了,好!开始写代码!

    首先是定义完上面我们用到的标签:

                请从下面的4个选项中选出你认为正确的的答案(单选送命题)<br />
                <asp:RadioButton ID="RadioButton1" runat="server" AutoPostBack="true" GroupName="key" Text="A:博主是最帅的" TextAlign ="Right" OnCheckedChanged="RadioButton1_CheckedChanged"/><br />
                <asp:RadioButton ID="RadioButton2" runat="server" AutoPostBack="true" GroupName="key" Text="B:博主一般般帅" TextAlign ="Right" OnCheckedChanged="RadioButton2_CheckedChanged"/><br />
                <asp:RadioButton ID="RadioButton3" runat="server" AutoPostBack="true" GroupName="key" Text="C:博主不太帅" TextAlign ="Right" OnCheckedChanged="RadioButton3_CheckedChanged"/><br />
                <asp:RadioButton ID="RadioButton4" runat="server" AutoPostBack="true" GroupName="key" Text="D:博主一点也不帅" TextAlign ="Right" OnCheckedChanged="RadioButton4_CheckedChanged"/><br />
                您选择的答案是:<asp:Label ID="Label1" runat="server" Text="?"></asp:Label><br /><br />
                <asp:Button ID="Button1" runat="server" Text="提交" OnClick="Button1_Click" />
    

    然后分别在设计页面双击上面的标签,会在后台生成相应的方法。先来控制显示Lable的内容,每次选中一个就显示相应的题号,这里只给出一个方法,剩下的都一样:

            protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
            {
                this.Label1.Text = "A";
            }
    

    最后来编写ButtonClick事件:

            protected void Button1_Click(object sender, EventArgs e)
            {
                if (!RadioButton1.Checked && !RadioButton2.Checked && !RadioButton3.Checked && !RadioButton4.Checked)
                {
                    Response.Write("<script>alert('请选择答案!')</script>");
                }else if (RadioButton1.Checked)
                {
                    Response.Write("<script>alert('恭喜你,你选择了正确的答案!')</script>");
                }
                else
                {
                    Response.Write("<script>alert('你大错了!!博主很失望!!')</script>");
                }
            }
    

    大功告成!!

    4、CheckBox控件(真假复选框)

    用来显示设置为truefalse的复选框。一组中可选择单个或多个。

    (1)重要属性

    CheckBox没有GroupName属性,他有一些其他的属性:

    • Checked属性:被选中为true,否则为false
    • Text属性:设置显示的文本
    • TextAlign属性:当值为Left时,文本显示在单选按钮左测,否则为右侧
    (2)简单应用——模拟考试系统中的多选题

    效果如下:

    在这里插入图片描述
    我们需要用到四个CheckBox还有一个Button控件,我们先来定义一下:

                请从下面四个选项中选出你认为正确的答案(多选题)<br />
                <asp:CheckBox ID="CheckBox1" runat="server" Text="A:php是这个世界上最好的语言" /><br />
                <asp:CheckBox ID="CheckBox2" runat="server" Text="B:博主好帅啊" /><br />
                <asp:CheckBox ID="CheckBox3" runat="server" Text="C:没有语言好坏之分" /><br />
                <asp:CheckBox ID="CheckBox4" runat="server" Text="D:编程语言是一种工具" /><br /><br />
                <asp:Button ID="Button1" runat="server" Text="提交" OnClick="Button1_Click" />
    

    然后编写一下,响应Button点击的方法:

            protected void Button1_Click(object sender, EventArgs e)
            {
                if (!CheckBox1.Checked && !CheckBox2.Checked && !CheckBox3.Checked && !CheckBox4.Checked)
                    Response.Write("<script>alert('您没有选择选项,请选择!')</script>");
                else if (CheckBox2.Checked && CheckBox3.Checked && CheckBox4.Checked)
                    Response.Write("<script>alert('恭喜您,选择了正确的答案!')</script>");
                else
                    Response.Write("<script>alert('抱歉!您选错了!')</script>");
            }
    

    大功告成!


    四、图形显示类型控件

    用于在网页上呈现图片的一种控件。

    1、Image控件(显示图片)

    (1)ImageAlign属性和ImageUrl属性
    • ImageAlign属性用于指定图像相对于网页上其他元素的对齐方式。
    对齐方式说明
    Left沿网页左边缘对齐,文字在图像右边换行
    Right沿网页右边缘对齐,文字在图像左边换行
    Baseline图像的下边缘与第一行文本的下边缘对齐
    Top图像的上边缘与同一行上最高元素的上边缘对齐
    Middle图像的中间与第一行文本的下边缘对齐
    Bottom图像的下边缘与第一行文本的下边缘对齐
    AbsBottom图像的下边缘与同一行中最大元素的下边缘对齐
    AbsMiddle图像的中间与同一行中最大元素的中间对齐
    TextTop图像的上边缘与同一行上最高文本的上边缘对齐
    • ImageUrl属性,设置Image图像的URL,通常使用相对URL
    (2)简单应用——动态显示用户头像

    在这里插入图片描述
    由上图可知,需要用的控件有DropDownListImage,首先在页面源代码中定义以下标签:

                <table>
                    <tr>
                        <td colspan="2" align="center" height="30">动态显示头像</td>
                    </tr>
                    <tr><td height="30">请选择头像</td>
                        <td>
                            <asp:DropDownList ID="DropDownList1" runat="server" Width="90" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                                <asp:ListItem Text="请选择"></asp:ListItem>
                                <asp:ListItem Text="1.jpg"></asp:ListItem>
                                <asp:ListItem Text="2.jpg"></asp:ListItem>
                                <asp:ListItem Text="3.jpg"></asp:ListItem>
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr><td height="30">头像显示:</td>
                        <td>
                            <asp:Image ID="Image1" runat="server" AlternateText="显示头像" Height="100px" Width="100px"/></td>
                    </tr>
                </table>
    

    双击DropDownList得到一个SelectedIndexChanged方法,响应选择,然后每次都展示一个图片:

            protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
            {
                if (DropDownList1.SelectedIndex == 1)
                    Image1.ImageUrl = "~/Img/1.jpg";
                else if (DropDownList1.SelectedIndex == 2)
                    Image1.ImageUrl = "~/Img/2.jpg";
                else if (DropDownList1.SelectedIndex == 3)
                    Image1.ImageUrl = "~/Img/3.jpg";
                else
                    Image1.ImageUrl = "";
            }
    

    大功告成!

    2、ImageMap控件(定义热点区域)

    该控件允许在图片中定义一些热点(HotSpot)区域。当用户点击这片区域,将会引发超链接或者单击事件。当需要对某副图片的局部进行交互时,可以使用该控件。

    (1)指定默认行为

    使用ImageMap控件需要指定控件的单击行为和计算单击的坐标点。HotSpotMode属性用于获取或者设置单击热点区域后的默认行为方式。下面是HotSpotMode的枚举值:

    枚举值说明
    Inactive无任何操作,此时形同一张没有设置热点区域的普通图片
    NotSet未设置项,同时也默认项。默认情况下执行定向操作,即连接到指定的URL地址。如果未指定URL地址,则默认链接到应用程序的根目录下
    Navigate定向操作项,连接到指定URL地址,如果没有定URL地址,则默认连接到应用程序根目录下
    PostBack回传操作项,单击热点区域,将触发控件的Click事件

    HotSpotMode属性虽然为图片中的所有热点区域定义了单击事件的默认行为方式,在某些情况下图片中热点区域的行为方式各不相同,需要单独为每个热点区域定义HotSpotMode属性及相关属性。

    (2)定义坐标点

    HotSpots属性用于获取HotSpots对象集合。HotSpot类是一个抽象类,它包含以下三个子类:

    • CircleHotSpot:圆形热区
    • RectangleHotSpot:方形热区
    • PolygonHotSpot:多边形热区

    上面的这些子类的实例称为HotSpot对象,创建HotSpot的步骤是这样的:

    首先定义一个ImageMap控件,单击属性,在属性面板中,单击HotSpots后面的三个点,会出现:
    在这里插入图片描述
    在这里插入图片描述
    单击添加后下面会出现上述三个子类,我们点击一个CircleHotSpot看一下:
    在这里插入图片描述
    就是这样…………看个例子吧

    (3)简单应用——展示图片中的方位

    这个例子是使用ImageMap中的方位,但单击其中某一块儿的时候提示用户所属方位。
    在这里插入图片描述
    做这个例子,首先定义好LabelImageMap两个控件,其中ImageMap控件的HotSpotMode属性设置为PostBack,Url设置为已经载入好的图片。

    然后通过上述的窗口或者定义标签都行,定义每个热点区域:(这里给出代码部分)

            <div>
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
                <asp:ImageMap ID="ImageMap1" runat="server" OnClick="ImageMap1_Click" HotSpotMode="PostBack" ImageUrl="~/Img/map.bmp">
                    <asp:RectangleHotSpot AlternateText="西北" Bottom="100" HotSpotMode="PostBack" PostBackValue="NW" Right="100" />
                    <asp:RectangleHotSpot AlternateText="东北" Bottom="100" HotSpotMode="PostBack" Left="100" PostBackValue="NE" Right="200" />
                    <asp:RectangleHotSpot AlternateText="西南" Bottom="200" HotSpotMode="PostBack" PostBackValue="SW" Right="100" Top="100" />
                    <asp:RectangleHotSpot AlternateText="东南" Bottom="200" HotSpotMode="PostBack" Left="100" PostBackValue="SE" Right="200" Top="100" />
                </asp:ImageMap>
            </div>
    

    然后双击这个图片,怼一个Cilck方法,在这个方法中接受回传值,绑定Label的值:

    protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
            {
                string region = "";
                switch (e.PostBackValue)
                {
                    case "NW":
                        region = "西北";
                        break;
                    case "NE":
                        region = "东北";
                        break;
                    case "SE":
                        region = "东南";
                        break;
                    case "SW":
                        region = "西南";
                        break;
                }
                Label1.Text = "您现在所指的方向是:" + region + "方向";
            }
    

    大功告成!!!


    五、Panel容器控件(为其他控件提供一个容器)

    该控件在页面内为其他控件提供了一个容器,可以将多个控件放入一个Panel容器控件中。

    1、Panel容器常用属性

    Panel容器的多数属性是对外观样式进行设置的,与前面的大致相同,下面是他的其他一些属性。

    Panel常用属性:

    属性说明
    ID获取或设置分配给服务器控件的编程标识符
    Visible用于指示该控件是否可见
    ScrollBars面板的滚动条外观,默认为None
    HorizontalAlign用于设置控件内容的水平对齐方式
    Enabled获取或设置一个值,该值指示是否已经启用控件

    ScrollBars属性:

    属性值说明
    None不显示滚动条
    Horizontal只显示水平滚动条
    Vertical只显示垂直滚动条
    Both同时显示垂直和水平的
    Auto根据面板中的内容可自动控制是否显示滚动条

    HorizontalAlign属性:

    属性值说明
    Center容器的内容居中
    Justify容器的内容均匀展开,与左右边距对齐
    Left容器的内容左对齐
    NotSet未设置对齐方式
    Right容器的内容右对齐

    2、简单应用——显示或隐藏一组控件

    显示或隐藏一组控件,先来看一下效果:
    在这里插入图片描述
    我们首先通过标签的形式,定义一些控件,并用Panel括起来:

            <div>
                <asp:Panel ID="Panel1" runat="server" Font-Bold="True" Font-Size="9pt" ForeColor="Red" HorizontalAlign="Left">
                    用户您好,<br />&nbsp;现在时间是
                    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                    您还未登录本网站<br />&nbsp;如需登录,请
                    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">单击me</asp:LinkButton>
                </asp:Panel>
                <asp:Panel ID="Panel2" runat="server" Font-Size="9pt" HorizontalAlign="Left" Visible="False">请输入您的姓名:<br />
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <asp:Button ID="Button1" runat="server" Text="登录" OnClick="Button1_Click" />
                </asp:Panel>
            </div>
    

    然后我们在.aspx.cs页面的Page_Load方法中,显示一下当前的时间:

            protected void Page_Load(object sender, EventArgs e)
            {
                if (this.Panel1.Visible)
                {
                    this.Label1.Text = DateTime.Now.ToString();
                }
            }
    

    然后是哪个LinkButton的方法:

            protected void LinkButton1_Click(object sender, EventArgs e)
            {
                this.Panel1.Visible = false;
                this.Panel2.Visible = true;
            }
    

    大功告成!


    六、FileUpload文件上传控件(上传文件)

    该控件的主要功能是向指定目录上传文件,该控件包括一个文本和一个浏览按钮。用户可以在文本框内输入完整的文件路径或者通过按钮浏览并选择需要上传的文件。FileUpload控件不会自动上传文件,必须设置相关的事件处理程序,并在程序中实现文件上传。

    1、FileUpload控件的常用属性

    下面是FileUoload常用的属性及说明:

    属性说明
    ID获取或设置分配给服务器控件的编程标识符
    FileBytes获取上传文件的字节数组
    FileContent获取指向上传文件的Stream对象
    FileName获取上传文件在客户端的文件名称
    HasFile获取一个布尔值,用于表示FileUpload控件是否已经包含一个文件
    PostedFile获取一个上传文件相关的HttpPostedFile对象,使用该对象可以获取上传文件的相关属性

    2、简单应用——上传图片文件

    同样的,先来看一下效果:
    在这里插入图片描述
    首先添加控件!直接写标签:

            <div>
                <asp:FileUpload ID="FileUpload1" runat="server"  />         
                <asp:Button ID="Button1" runat="server" Text="上传" OnClick="Button1_Click" /><br />
                <asp:Image ID="Image1" runat="server" AlternateText="请上传图片" /><br />
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            </div>
    

    然后写一下点击上传的Click方法:

     protected void Button1_Click(object sender, EventArgs e)
            {
                bool fileIsValid = false;
                if (this.FileUpload1.HasFile)
                {
                    //获取上传文件的前缀
                    string fileExtension = System.IO.Path.GetExtension(this.FileUpload1.FileName).ToLower();
                    //定义允许上传文件的后缀名
                    string[] res = { ".gif", ".jpg", ".bmp", ".png" };
                    //循环判断是否符合要求
                    for (int i = 0; i < res.Length; i++)
                        if (res[i] == fileExtension)
                            fileIsValid = true;
                    if (fileIsValid)
                    {
                        try
                        {
                            //设置Image路径并显示图像
                            this.Image1.ImageUrl = "~/img/" + FileUpload1.FileName;
                            this.FileUpload1.SaveAs(Server.MapPath("~/img/") + FileUpload1.FileName);
                            this.Label1.Text = "文件上传成功!<br />";
                            this.Label1.Text += "<li>源文件路径" + this.FileUpload1.PostedFile.FileName;
                            this.Label1.Text += "<br /><li>文件类型:" + this.FileUpload1.PostedFile.ContentType;
                        }
                        catch
                        {
                            this.Label1.Text = "文件上传不成功!";
                        }
                        finally
                        {
    
                        }
                    }
                    else
                    {
                        this.Label1.Text = "只能够上传后缀为.gif、.jpg、.bmp、.png的文件";
                    }
                }
            }
    

    大功告成!!!!!!!


    七、小结

    *终于完了!我写了两天啊啊啊啊,awsl!在开发网站的时候并不一定必须用到Web服务器控件,但是这些控件给开法人员带来了更高的开发效率~~~~*

    更多相关内容
  • cad web 控件

    2018-05-19 09:51:19
    控件支持在web上显示dwf,dxf,dwg等格式的cad 二维格式的文件。
  • 神思100型web控件

    2020-12-29 09:54:04
    神思100型web控件
  • 包含demo案例、Web3.0_控件开发包编程指南.pdf和nginx。 Web 控件 V3.0 基于 ActiveX 和 NPAPI 开发,接口封装于 javascript 脚本,以 javascript 接口形式提供用户 集成,支持网页上实现预览、回放、云台控制等功能...
  • 海康WEB3.0控件开发包

    2021-01-07 15:34:43
    CH_WEB3.0控件开发包V1.1.0
  • 主要介绍了ASP.NET自定义Web服务器控件之Button控件,详细讲述了Button控件的实现代码、前台页面的调用以及对应的事件响应代码,具有很好的参考借鉴价值,需要的朋友可以参考下
  • 大华Web控件V3.0基于ActiveX和NPAPI开发,接口封装于javascript脚本,以javascript接口形式提供用户集成,支持网页上实现预览、回放、云台控制等功能。该控件开发包仅支持B/S网页开发,不适用于C/S开发。 大华Web...
  • 海康web控件

    2018-01-02 14:08:56
    海康web控件测试程序,包括视频浏览和上下左右控制等操作
  • 支持谷歌45版以下,360浏览器8.0以下。IE8 9 10 11都可以。这已经是海康威视目前最新版的控件了。比网上多数3.0 v1.0.0版的稳定很多
  • 海康威视官方提供web播放插件,二次开发很有用。
  • web常见控件介绍

    万次阅读 2018-05-18 08:40:05
    常见的控件: 1.文本输入框(TextBox) 2.按钮控件(Button) 3.下拉选框(DropList) 4.日期/时间控件(Date/TimePicker) 5.(图片、文件)上传控件(Upload) 6.树形控件(TreeView) 7.列表框(ListBox) 8...

     常见的控件:
      1.文本输入框(TextBox)

      2.按钮控件(Button)

      3.下拉选框(DropList)

      4.日期/时间控件(Date/TimePicker)

      5.(图片、文件)上传控件(Upload)

      6.树形控件(TreeView)

      7.列表框(ListBox)

      8.多格式文本框(RichTextBox)

      9.Tab控件

    10.其他控件

    11.多浏览器兼容性问题

    以下是上述常用控件就样式、属性、功能、测试点等方面的总结

    1.文本框

       纯文本框(不带其他类型控件)主要分为密码框、文本框(TextBox)和多行文本框(TextArea

    1.1密码框

    (1)样式:

         

    (2)属性:

        输入的文本会自动以黑色圆点或星号加密显示。

    (3)功能:

        用于输入密码

    (4)测试点(功能):

          1.字符长度

          2.是否区分字母大小写

          3.全角半角输入(数字、英文)

          4.是否允许空格字符

          5.输入的密码是否密文显示,是否可以“显示密码”

          6.安全性:是否可以复制、粘贴方式输入、复制粘贴后是否看到明文  

          7.安全性:密码传输过程是否加密、数据库保存是否加密

          8.密码验证方式是否为比对模式。

          9.登录后是否会用明文传递参数

          10.利用复制粘贴等操作强制输入不允许的输入数据

          11.同文本框测试点


    1.2文本框

    (1)样式:

        

    (2)属性:

        普通文本框,允许输入文本、数字等类型的字符

    (3)功能:

        用于普通文本的输入和显示,常搭配其他控件使用

    (4)测试点(功能):

          1.输入中文、英文大小写、数字、特殊字符,构建有效等价类和无效等价类

          2.全角半角输入(数字、英文)和显示

          3.输入框是否为必填项(空输入)

          4.是否可以输入空格以及对空格的处理(包括全角半角、中英文、文本首尾、文本间的空格)

          5.字符长度

          6.支不支持快捷键操作(Enter、Ctrl+“C/V/X/A/Z”复制粘贴剪切全选撤销等)

          7.数值型、日期型、时间型文本框的合法性校验

          8.利用复制粘贴等操作强制输入不允许的输入数据

          9.特殊字符(串):单引号、双引号、分号、Null、null、/、\、转义字符、</html>等

          10.JavaScript代码:<b>Hello</b>、alert("hello")

          11.html代码:<font>你好</font>、<script>alert(/xss/)</script>

          12.注入式Bug

         

    1.3多行文本框

    (1)样式:


    (2)属性:

          可以输入复数行的文本。一般附带滚动条(样式1)或可以拖曳文本框大小(样式2),以便浏览多行文本

    (3)功能:

        多行文本的输入。

    (4)测试点(功能):

          1.是否允许Enter换行

          2.保存后是否保持输入时的格式显示

          3.仅输入Enter换行能否保存

          4.是否能够调整文本框大小,拖动调整大小时,能否与页面其他元素自适应

          5.当输入文本较长时,是否出现滚动条或者自动扩展文本框大小

          6.同“文本框”的1~6测试点


    2.按钮控件    

        按钮(Button)主要分为命令按钮(Push/Command Button)、单选钮(Radio Button)、复选框(Check Box)以及它们的组合。


    2.1命令按钮

           应用程序中使用户通过简单的点击按钮来执行操作。当用户点击按钮后,不仅会执行相应操作,还会使该按钮看上去象被按下并释放一样。部分按钮会在鼠标悬浮其上且没有点击时改变按钮显示形态(如弹出说明框、字体变化、高亮)或改变光标显示形态(如变成手型)。

           命令按钮的显示形式可以是文本、图形或图片。大致可以分为纯文本、纯图标、纯图片、文本、文本和图标结合。

           对命令按钮的操作一般只有鼠标单击或键盘敲Enter/Space,有些按钮单击和双击的实现功能不同,而有些功能丰富的按钮在鼠标右键点击之后会弹出右键菜单。

         点击命令按钮产生的响应有弹出新窗口、弹出框体、弹出新页面、切换或弹出菜单(结合菜单栏)、弹出列表框(结合下拉列表)、刷新、放大/缩小/收起/关闭窗口等等。


        以下就命令按钮的显示形式进行讲解。

    2.1.1 纯文本按钮

    (1)样式:



    (2)属性:

    一般纯文本形式的按钮在

           光标悬浮其上时,一般文本的显示形态会变化,具体表现为底部出现下划线、字体颜色变化、字体高亮或出现背景框,还很有可能弹出详细的说明信息框。而且光标的形状会变成手型。当然文本形态也可以不变化。这些表现形式都是为了引导用户点击操作。

           操作按钮后,按钮的形态不定:可能不变化,可能字体颜色改变or文字改变以传达按钮已被点击过的意思,也可能按钮置灰无法二次操作。

    (3)功能:

           大部分纯文本按钮都出现在网页中,用于打开新的页面(在新窗口或当前窗口打开);在菜单中实现菜单切换或者弹出菜单栏,相当于选项卡,如Word的菜单栏就是点击文本进行切换的;其它丰富的功能,如点赞按钮、收起展开按钮、收藏按钮、验证码刷新按钮等等。

    (4)测试点:

          1.按钮的文本是否正确、简洁、明了,样式是否美观、统一

          2.光标悬浮在按钮上时,文本和鼠标光标是否有需求的形态变化

          3.点击按钮是否响应正确的操作,如打开正确页面、实现需求功能

          4.点击完成后,按钮文本的形态是否正确

          5.能否实现tab、Enter等快捷键功能

          6.快速点击两次,是否一次有效;鼠标左键长按后移开是否取消了操作

          7.是否有右键菜单,且菜单内的功能是否实现

          8.是否能够复制文本文字(鼠标长按拖到输入框或光标选中复制粘贴)


    2.1.2 纯图标按钮

    (1)样式:

                

    (2)属性:

           纯图标按钮的形状本身就具有很形象的解释力,光标悬浮在按钮上时经常会弹出更详细的说明信息框,用来具体解释此按钮实现的功能。鼠标悬浮时,也会出现图案高亮、出现背景框、光标变手型等形态变化。

          图标按钮经常会有两种状态:可使用和置灰状态。置灰状态对点击操作不响应。

          某些图标按钮会被分配相应的快捷键。

          图标不同于图片,一般大小比图片要小。

    (3)功能:

         点击按钮后可以打开新页面新窗口,可以弹出菜单栏,也可以实现各种丰富的功能。最经典的图标按钮就是Windows的最小化、最大化、关闭、前进后退、刷新按钮。图标图案还可能是某网站的Logo,点击进入网站首页。

    (4)测试点:

          1.按钮图标是否正确对应功能含义、是否风格大小统一、是否清晰美观

          2.光标悬浮时,图标和鼠标光标是否有需求的形态变化

          3.点击按钮是否响应正确的操作

          4.点击完成后,按钮的形态变化是否正确

          5.如果是置灰的按钮,是否不能点击操作

          6.能否实现tab、Enter等快捷键功能

          7.如果分配了快捷键,快捷键操作是否有效

          8.快速点击两次,是否一次有效;鼠标左键长按后移开是否取消了操作

          9.是否有右键菜单,且菜单内的功能是否实现


    2.1.3纯图片按钮

    (1)样式:



    (2)属性:

           纯图片按钮就是一张图片可以点击产生响应,不同于图标按钮,图片更有预览意义,图片内容不代表功能,同一功能可能因为场景、对象不同而图片内容不同

          对图片按钮的操作一般就是单击,还可能右键弹出功能菜单。

    (3)功能:

           图片按钮主要有三种功能:带有新页面的链接地址,点击能够打开新页面;点击能够打开功能窗口,如头像设置、封面修改窗口;点击放大查看图片。

    (4)测试点:

          1.按钮图片是否正确对应内容、样式是否统一美观,图片分辨率是否良好

              2.光标悬浮时,图片和鼠标光标是否有需求的形态变化

          3.点击按钮是否打开正确的页面、正确的功能窗口或者是否正确放大

          4.快速点击两次,是否一次有效;鼠标左键长按后移开是否取消了操作

             5.是否有右键菜单,且菜单内的功能是否实现

          6.图片是否可以复制


    2.1.4文本方框按钮

    (1)样式:

                 

    (2)属性:

          文本方框按钮是最常见最经典的按钮,文字置于一个不透明的方框中间。一般方框的形状为长方形而不是正方的。

          此类按钮也会有可用和置灰状态,也可能有右键菜单、快捷操作,但一般不能复制文本和图案。如果按钮带有网站链接倒可以复制。

          按钮的方框使其脱离其他控件,在页面中很凸显。

    (3)功能

         此类按钮一般很少用于链接网址,基本用于实现具体的功能或打开新的功能窗口。

    (4)测试点:

          1.按钮中的文本是否正确,样式是否美观统一,是否置于方框正中,方框的样式是否美观

          2.光标悬浮时,按钮和鼠标光标是否有需求的形态变化

          3.点击完成后,按钮的形态变化是否正确

          4.如果是置灰的按钮,是否不能点击操作

          5.能否实现tab、Enter等快捷键功能

          6.如果分配了快捷键,快捷键操作是否有效

          7.是否有右键菜单,且菜单内的功能是否实现

          8.对非法的输入或操作给出足够的提示说明,如,空输入时点击“上传”按钮要给出提示

       9.对可能造成数据无法恢复的操作必须给出确认信息,给用户放弃选择的机会,比如“删除”按钮


    2.1.5 文本与图标结合的按钮

    (1)样式:

                    


           此类按钮类似于纯图标按钮加了文字的简略解说,能更好的解释按钮的功能。

          其属性功能和测试点也基本差不多,详情参考纯图标按钮。


    2.2单选钮

    (1)样式:

                  

    (2)属性:

          我们选中单选钮选项时,圆环中间出现一个小实心圆点表示该项被选中。在一组单选按钮选项中,只能选中其中一项,这和复选框是不同的。一组单选钮可以有初始值也可以没有。

    (3)功能:

          用于用户只能从选项列表中选择一项的情况。

    (4)测试点:

         1.单选选项是否统一按钮居左、文字描述居右

         2.选择单选按钮保存后,是否正确执行功能,或者数据库是否正确存入了选项值

         3.单选钮是否有初始值、默认选项

         4.同一组单选钮是否只能选中一个(互斥)

         5.同一组单选钮是否不能同时为空

         6.刷新页面后,是否仍然选中选项或默认值

         7.操作是只点击按钮选中还是可以点击按钮文字选中


    2.3复选框

          复选框一般是用户多选的选项框。在更复杂的组合复选框中,复选框还能实现“全选”、“全不选”、“反选”功能。

    2.3.1普通的选项复选框

    (1)样式:

                               

                

                                  

    (2)属性:

          同一组复选框中可以同时选中多项,选中后会呈现打钩状。一组复选框一般没有初始值。

          复选框除了有选中和不选中两个状态,还有一个独立的属性:“不确定”(indeterminate)

          不确定状态的checkBox的值仍然只有checked或unchecked,状态仅仅是为了用户视觉界面上看起来更友好例如带复选框的级联菜单时,子级菜单的多个复选框为部分选中的时,父级菜单的复选框应处于不确定状态,来反映子菜单的部分选中情况;或者为了表示选中或不选中都不影响时,可以显示为不确定,但实际内在值是确定的。

    (3)功能:

          用于用户从选项列表中自由选择选项的情况(单选、多选、不选)。

    (4)测试点:

          1.选择复选框选项保存后,是否正确执行功能,或者数据库是否正确存入了选项值

          2.复选框是否有初始值、默认选项

          3.复选框是否可以同时选中多个

          4.复选框是否可以同时为空

          5.刷新页面后,是否清除选项

             6.操作是只点击方框选中还是可以点击复选框文字选中

          7.父级菜单的复选框为不确定状态时,子集菜单是否为部分选中

          8.复选框为不确定状态时,是否符合逻辑

    2.3.2全选反选复选框

    (1)样式:

          

          

    (2)属性:

          全选复选框——点击全选,其下的选项复选框组全选中,再次点击取消全选中

         反选复选框——选项复选框全选中或无选中时相当于全选;当选项复选框部分选中时,点击反选,所有选项复选框反向选择(即选中变为不选中,不选中变为选中)

         复选框可以同时实现全选和反选功能,也可以只实现全选功能。

    (3)功能:

         实现选项全选或反选。

    (4)测试点:

          1.当没有选项选中时,点击全选复选框,是否选项全选中,全选复选框变为选中状态

          2.当选项全选中时,点击全选复选框,是否选项取消全选中,全选复选框变为未选中状态

          3.当选项部分选中时,点击全选复选框,是否选项全选中,全选复选框变为选中状态

          4.当选项部分选中时,点击反选复选框,是否选项反向选择,反选复选框变为相反状态

           

    3.下拉选框

    (1)样式:

                

           

                       

    (2)属性:

          下拉选框(DropList)包括一个右侧带有倒三角图标的文本框和下拉列表框,点击倒三角图标会弹出下拉列表,点击列表中的选项,选项就显示在文本框中。

          文本框可以编辑新增选项也可能选项固定,可以有初始值也可以初始为空。

          选项可以多选也可以单选,且多选下拉列表经常还会配合复选框来实现同时多选的效果。当光标悬浮于选项时,

    还可以即时显示对应的预览效果。

          VB组合框中的Dropdown List/Combo,功能上和DropList十分类似,区别在于组合框明确只可单选选项、用户不能输入和编辑选项。实际情况下可以一同测试。

    (3)功能:

          选择控件。

    (4)测试点:

          1.初始值(即操作下拉框前文本框中显示的值):为空、提示信息、某一选项

          2.列表选项的文本是否正确、左对齐、显示完全以及选项排列顺序

          3.列表选项是否可以为空,是否可以编辑

          4.列表框的长度高度是否合适,长度是否可变,如何将不能完全显示的选项显示出来

          5.列表内容是否可变,可变的最好要用SQL或其他方式验证正确性,不允许出现重复值

          6.列表超过列表框显示区域是否自动提供滚动条

          7.光标定位到下拉列表上时,是否支持键盘快捷操作,如↑,↓,Home ,End ,PageUP ,PageDown等

          8.可编辑下拉列表框是否可以插入新选项值,插入值的有效/无效等价类验证(包括空格、全半角字符、特殊字符等情况)、长度验证以及重复性验证

          9.可编辑下拉列表框是否可以删除选项,是否可以删除所有选项

        10.可编辑下拉列表框新增或删除选项值后,选项是否正确显示

        11.一组联动的下拉框,改变其中一个下拉框的选项值,其余的下拉框是否作出相应的可选选项内容的改变

        12.选择一个选项后,下拉列表是否自动收起

        13.多选下拉框选择多个选项后,文本框中显示是否正确

        14.有预览效果的下拉框,光标悬浮于选项时,显示的预览效果是否正确


    4.日期/时间控件

    (1)样式:

                   

                          

    (2)属性:

                日期/时间控件输入年月日或时分秒的时间信息。

           日期控件包含一个显示文本框和日期选择框插件。一般鼠标点击文本框或者右侧表示时间的图标就能弹出选择框。日期以日历表形式展现,一般月份年份会有个下拉列表供选择,选定好具体日期直接在日历表上单击、双击或“确定”。此外“日历表”还支持左右翻页、“清空”、“今天”、“确定”或“关闭”等功能按钮

           时间控件一般支持手动输入和点击下拉选项设置。可以用up-down控件来调整时间。

           日期和时间控件使得时间信息的输入通过几次单击操作就能完成,更为方便。两种控件可以结合在一起使用。

    (3)功能:

           实现日期或时间的输入

    (4)测试点:

       <1>日期控件:

           1.选择日期后,文本框是否显示正确日期,日期选择框是否收起

           2.日期格式是否正确,年月日是否有限制

           3.用左右按钮、下拉框切换年月是否正确

           4.是否有初始日期,如当前日期

           5.日期文本框是否可以手动输入或修改日期,修改成错误的年月日、错误的格式、错误的字符类型(中文字母特殊字符空格)是否有提示信息或者限制此类错误输入

           6.清空、今天、确定、关闭等按钮是否实现功能

       <2>时间控件:

           1.时间格式是否正确

           2.用up-down按钮、下拉框切换时分秒是否正确

           3.up-down按钮调整分和秒自增或自减时是否自动进位或退位(如满60秒分加1)

           4.是否有初始时间

           5.时间文本框是否可以手动输入或修改时间,修改成错误的时分秒、错误的格式、错误的字符类型(中文字母特殊字符空格)是否有提示信息或者限制此类错误输入


    5.(图片、文件)上传控件

    (1)样式:

             

          

          

    (2)属性:

           实现文件的上传功能一般先点击“浏览”或“添加”按钮,会弹出本地文件“打开”窗口,按路径找到合适的文件并选中、打开(或者直接双击),文件名称(名称可能带路径)就会显示在列表或文本框中,再点击“上传”按钮等待上传即可。上传的过程中,会有进度显示条显示上传的完成情况。

    (3)功能:

           上传本地文件到相关服务器上,然后对文件进行后续操作。

    (4)测试点:

          1.选择合法格式大小的文件是否能够上传成功(每一种格式、文件大小的最大最小值和边界值都要测)

          2.选择不合法的格式或大小的文件上传,是否不成功且有错误提示

          3.选择0 kb的图片上传是否不成功且有错误提示

          4.选择一个合法但是正在使用中的文件(如打开的word文档),是否上传成功

          5.如果允许手动输入文件路径,在文本框中手动输入如下情况是否上传成功:

           (1)手动输入一个存在的合法的文件路径

           (2)输入不存在文件的路径

           (3)输入的路径下文件不合法

           (4)只输入文件名称不带路径

           (5)正确的文件路径包含空格(前中后、全半角空格)

           (6)路径为空

           (7)超长字符的路径是否可以输入

          6.是否支持中文路径或中文名称的文件上传

          7.文件名称最大最小字符个数,名称包含特殊字符、空格、程序语句是否影响上传

          8.上传常见木马,上传过程中有断网、服务器宕机等异常情况

          9.上传时服务器空间接近已满

        10.上传成功的文件是否可以查看、删除、替换和下载,是否可以取消上传

        11.批量上传

        12.上传同名文件是否给出错误提示


    6.树形控件

    (1)样式:

             

          

    (2)属性:

           树形控件用于管理一组分级的文件夹。最左侧的方框或者三角形图标控制着文件夹的收拢和展开。

           文件夹收拢时,方框图标内是一个“+”号、三角形图标正三角指右;点击图标,节点展开,显示出下级的文件夹或文件,方框图标内变成一个“-”号、三角形图标指下。而且树形图标只显示于有下级菜单的节点,没有下级菜单的不显示。

           经常,树形控件还会带有选择功能,每个文件夹或文件都附带一个复选框,上下级的选择状态互相影响。

    (3)功能:

           文件菜单分级管理功能。

           文件菜单选择功能。

    (4)测试点:

          1.树节点的图标展开前后是否风格一致,如果有树结构的连线是否显示正确

          2.默认树结构是展开还是收拢的

          3.所有节点和叶子的图标、名称是否正确

          4.点击某个节点时,是否只展开下一级的节点和显示该级的叶子还是显示下一级全部的

          5.页面刷新后,是保持现状还是恢复到默认树形状态

          6.执行了某一操作或树结构上的数据发生了变化,是保持现状还是恢复到默认树形状态

          7.选中某一节点的复选框,下级节点是否全部自动置为选中

          8.当两级节点全部选中时,取消选中上级节点,下级节点是否全部自动取消选中

          9.当两级节点全部选中时,取消选中某一下级节点,上级节点是否也自动取消选中或者置为不确定状态


    7.列表框

    (1)样式:

               

        

    (2)属性:

           列表框用于提供一组条目(数据项),用户可以用鼠标选择其中一个或者多个条目,但是不能直接编辑列表框的数据。当列表框不能同时显示所有项目时候,他将自动添加滚动条,使用户可以滚动查阅所有选项。

           值得关注的是,列表框中的项目是通过程序插入到其中的,用户无法向清单中输入数据或者编辑数据,当选择其中的项目,并在用户单击一个按钮或者执行某个操作时,由应用程序完成对指定项目的具体操作。

           列表框和组合框的区别在于,组合框带有一个文本框,既能输入数据又能选择数据。

    (3)功能:

           选中列表框中一个或多个选项,配合执行功能按钮或操作(如删除、上传、导出、下载、移动等等)。如果可以选中多个选项,即可实现批量操作。

    (4)测试点:

          1.列表框中的文本是否正确、格式风格美观统一

          2.选择选项后执行操作是否成功

          2.列表选项超过列表显示区域时是否及时出现滚动条(包括垂直和水平方向)

          3.能否用键盘快捷键选择选项(上下键、Enter、Space等)

          4.能否用Shift键+点击连续多选、用Ctrl键+点击选择性多选、Ctrl+All键全选、直接用鼠标点击多选选项

          5.是否响应双击操作


    8.多格式文本框

    (1)样式:

          

                  

    (2)属性:

           RichTextBox(多格式文本框)控件是基于TextBox控件开发的一种功能更为强大、使用更为方便的控件,它可以完成TextBox的一切功能,具有上百个属性与方法:设置字体、颜色和链接;从文件中加载文本、插入图片;进行撤消与重做等编辑操作。

    (3)功能:

           该控件常用于文本显示和编辑的字处理插件,如Windows的写字板或Office Word中。

    (4)测试点:

          1.选中文本依次测试各种操作,是否正确实现,保存文本后是否正确显示

          2.不选中文本,点击操作,是否不实现

          3.点击文本格式类的操作后,再输入文本,是否正确响应(如设置字体为红色后输入文本,是否为红色)

          4.点击插入类的操作(如插入图片、表情、特殊字符、表格、分页符等),是否正确插入和显示

          5.复制粘贴剪切和撤销功能是否正确

          6.是否有查找字符和替换字符功能

          7.是否可以在文本编辑框实现快捷键操作以及右键菜单操作

          8.文本超过文本编辑框显示区域时,是否自动显示滚动条

          9.操作按钮点击后是否有按钮形态的变化,比如表示设置为倾斜状态的形态变化

        10.文字和图片、表情、特殊字符等插入元素的排列位置以及间距是否美观


    9.Tab控件

    (1)样式:

          

          


    (2)属性:

          Tab控件也叫选项卡。每个选项卡代表一个活动的区域,用于将相关的控件集中在一起,放在一个页面中用以显示多种综合信息。浏览器的每个Tab代表一个网页,它方便在同一个窗口中打开多个网站。

           每个Tab选项卡通过鼠标选中或者快捷键实现切换,通过双击或者点击叉图标实现关闭,还可以长按拖动选项卡之间的位置。

    (3)功能:

           Tab控件通常用于显示多个选项卡,其中每个选项卡均可包含图片和其他控件。

    (4)测试点:

          1.选项卡的样式风格是否统一美观

          2.点击是否可以选中选项卡,切换是否流畅,每个选项卡的内容是否显示正确,被选中的选项卡是否高亮显示

          3.快捷键Ctrl+Tab键能否切换选项卡

          4.选项卡是否有关闭图标,点击是否能够关闭,双击能否关闭选项卡

          5.选项卡是否可以拖动改变位置,或者拖动移出窗口成为一个单独的页面

          6.当选项卡标题中的文字较长时,文字如何显示,光标悬浮其上时,是否会弹出完整的标题信息框

          7.选项卡标题中的图案是否显示清晰,分辨率良好

          7.选项卡的长度是否会根据选项卡标题长度或者窗口中打开的选项卡数目自适应


    10.其它

           其它还有各种常见的控件,比如翻页控件、滚动条等。

    10.1 翻页控件

    (1)样式

          

             

    (2)属性:

           翻页控件实际上就是一组实现翻页功能的控件组合。一般可以分为“首页”、“尾页”、“上一页”、“下一页”、数字页(即点击该数字就翻到第几页)按钮,通常还会带有页码的数字文本输入框和“确定”按钮组合实现快速翻页。

           数字页按钮除了点击翻页的功能,按钮的选中状态还能显示出当前所在页的页码。而文本框通常支持“Enter”快捷键,一般不支持全角数字输入。

    (3)功能:

          将一个大的页面分成两个或以上的页面,并在页面之间便捷地相互跳转。

    (4)测试点:

          1.翻页控件的整体风格样式是否美观统一,符合需求

          2.在非首页页面,点击“首页”(或代表首页的图标按钮),是否跳转到第一页,且数字“1”变为选中状态

          3.在非末页页面,点击“尾页”(或代表末页的图标按钮),是否跳转到最后一页,且最后一位数字变为选中状态

          4.随机点击数字页,是否跳转正确,且相应的数字变为选中状态

          5.在非首页点击“上一页”(或代表上一页的图标按钮),是否跳转到上一页

          6.在首页点击“上一页”,是否按钮置灰不能点击或者不跳转或者给出正确的错误提示

          7.在非末页点击“下一页”(或代表下一页的图标按钮),是否跳转到下一页

          8.在末页点击“下一页”,是否按钮置灰不能点击或者不跳转或者给出正确的错误提示

          9.当页码过多时,分别点击靠前、中间、靠后的页码,“...”省略号和数字页按钮的位置是否正确合理

                 示例:

        10.页码输入文本框输入任意页数范围内的有效数字,点击“确定”是否正确跳转页面

        11.页码输入文本框输入0、超过总页数的数字、负数、特殊字符、中英文、全角字符,点击“确定”是否不跳转或者给出正确的错误提示或者不允许输入

        12.页码输入文本框输入空格(全半角、中英文状态),点击“确定”是否不跳转或者跳转到首页或者不允许输入

        13.页码输入文本框输入的数字含有空格(前中后、全半角、中英文状态

        14.页码输入文本框输入有效数字,敲“Enter”是否可以正确跳转

        15.如果没有“首页”和“尾页”按钮,数字“1”和总页数数字是否常显

        16.关于总页数的文字信息是否正确

        17.当页面较长、翻页控件在页面底部时,点击页码,是否跳转到相应页面顶部


    10.2 滚动条

    (1)样式:
             
    (2)属性:
           滚动条由滚动滑块和滚动箭头组成,是一种图形用户界面控件。控制滚动条移动的方式有用鼠标滚轮控制,用键盘控制,用鼠标拖动滑块或点击滚动箭头控制。页面的位置随着滚动滑块的移动而移动。滚动滑块的长度可以随页面长度自动调整。
    (3)功能:
          当页面较长时,实现跨页浏览。
    (4)测试点:
          1.滚动条的滚动滑块和滚动箭头的样式风格是否美观 统一 ,是否与滚动框相匹配
          2.滑动鼠标滚轮、鼠标拖动滑块是否正确滚动页面且快速流畅
          3.光标定位在整个页面,敲键盘上下键和鼠标点击上下滚动箭头,页面滚动的幅度和速度是否合适
          4.长按键盘上下键和上下滚动箭头,页面是否均匀 连续滚动。
          5.是否有右键菜单,菜单中选项的功能是否实现
          6.滚动条是固定在页面还是当页面过长时才出现
          7.滚动滑块的长度是否随着页面长度自适应,是否符合页面位置和长度的百分比

    展开全文
  • 大华Dahua_web3.0控件

    2019-02-18 18:01:19
    大华Web控件V3.0基于ActiveX和NPAPI开发,接口封装于javascript脚本,以javascript接口形式提供用户集成,支持网页上实现预览、回放、云台控制等功能。该控件开发包仅支持B/S网页开发,不适用于C/S开发。 大华Web...
  • 大华控件webplugin.zip

    2019-12-31 14:08:52
    这是大华视频控件,测试可在IE浏览器下正常使用。需要安装,设置安全权限 这是大华视频控件,测试可在IE浏览器下正常使用。需要安装,设置安全权限
  • 海康摄像头web3.0开发包文档源码,64位得,对谷歌浏览器版本限制。开发文档等等,开发文档详细介绍
  • 最新获取到的海康威视的web3.0控件开发包,是32位的。里面demo源码和安装文件。Web 控件 V3.0 基于 ActiveX 和 NPAPI 开发,接口封装于 javascript 脚本,以 javascript 接口形式提供用户集成,支持网页上实现预览...
  • 大华视频web开发控件

    2018-06-26 09:35:09
    大华视频监控设备,设备直连web开发控件,内附详细文档
  • 海康威视WEB3.0控件开发包。CH_WEB3.0控件开发包V1.1.0_Win64。
  • WebComponents.exe,官方控件,浏览器安装后 ,重启浏览器即可
  • 刚开始学习控件开发,写了一个web图片切换控件,欢迎大家拍砖.
  • web 自定义控件

    2015-12-04 17:15:17
    JavaScript开发,各种web自定义控件,包括dialog、alert、laydate、autocomplete等等。
  • html页面调用大华摄像头,实现实时监控,以及回放、视频下载,云控制、视频窗口个数、预览、通道等并且是根据时间范围下载视频demo,并且附带了exe用于快速安装ocx控件
  • 海康威视摄像头WEB控件(3.0.5.56) 附带demo和文档说明
  • 1.demo包含视频预览、云台控制、视频回放、图片抓取等大部门常用功能 2.支持的32位浏览器:IE6~IE11、Chrome8~ Chrome42、Firefox3.5~ Firefox52、...高版本的谷歌和火狐浏览器不支持NPAPAI,因此不能加载Web 控件
  • 什么是验证控件? 希望用户输入正确的类型的数据,为了验证用户输入是否满足要求,必须对输入的值、范围或格式进行检查。 .NET中验证控件在哪里? 在工具箱的验证分组里。 常用的ASP.NET控件几个?分别是什么? 1)...
  • 海康威视WEB3.0控件开发包V1.0.9_CN

    热门讨论 2017-09-15 11:10:13
    海康威视WEB3.0控件开发包V1.0.9_CN 支持H.265视频编码及H.264,亲测有效 内部包含WebComponentsKit.exe 的为海康威视web插件
  • 最新海康威视WEB3.0控件开发包,亲测有效。内部包含WebComponentsKit.exe 的为海康威视web插件和demo调试代码
  • pdf web 控件

    热门讨论 2013-04-06 07:30:52
    用于web开发的pdf控件,可以在自己的web应用中嵌入pdf文档,实现类似于百度文库的功能。
  • web控件和html控件.ppt

    2022-06-24 10:03:06
    web控件和html控件.ppt
  • web 控件测试

    2014-05-18 12:19:11
    web 控件测试 总结了web 控件所有测试点,对测试人员测试能力提高

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 290,237
精华内容 116,094
关键字:

web控件有哪些