ASP.NET Web常用控件

文章目录

• @[toc]
• ASP.NET控件
• 一、文本类型控件
• 1、Label控件（显示用户不能编辑的文本）
• （1）设置文本
• （2）设置外观
• 2、TextBox控件
• （1）文本内容的显示模式
• （2）修改文本内容所触发的事情
• 二、按钮类型控件
• 1、Button控件
• （1）单击事件
• （2）OnCilentClick事件
• （3）简单应用——网页弹出消息对话框
• 2、LinkButton控件
• （1）单击事件
• （2）定义页面跳转链接
• （3）简单应用——实现个性化页面跳转功能
• 3、ImageButton控件
• （1）设置控件显示的图片
• （2）AltrenateText属性
• （3）简单应用——动态更改网页背景图
• 4、HyperLink控件
• （1）指定跳转方式
• 三、选择类型控件
• 1、ListBox控件
• （1）创建一个ListBox列表
• （2）后台绑定列表属性
• （3）后台获取选择项
• （4）简单应用——选择并移动ListBox控件中的项
• 2、DropDownList控件
• （1）更改选定索引触发事件
• （2）简单应用——查看假期以便合理安排出行计划
• 剩下的明天更！！！！兄弟写了快一天了！！
• 3、RadioButton控件
• （1）分组属性
• （2）获取或设置选中状态
• （3）简单应用
• 4、CheckBox控件
• （1）重要属性
• （2）简单应用
• 四、图形显示类型控件
• 1、Image控件
• （1）ImageAlign属性和ImageUrl属性
• （2）简单应用
• 2、ImageMap控件
• （1）指定默认行为
• （2）定义坐标点
• （3）简单应用
• 五、Panel容器控件
• 1、Panel容器常用属性
• 2、简单应用
• 六、FileUpload文件上传控件
• 1、FileUpload控件的常用属性
• 2、简单应用

---

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控件，双击这个控件就可以自动生成写逻辑代码的方法！ 如下图所示：

下面是编写逻辑代码的方法：

        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属性，该属性是用来设置单击控件时链接到的网页地址。设置的时候，单击后面的三个点就会弹出下图所示的对话框，选择一个网页地址就好了。

（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" });
            }
        }

然后是DropDownList的SelectedIndexChanged的方法：

        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控件

（1）分组属性

（2）获取或设置选中状态

（3）简单应用

4、CheckBox控件

（1）重要属性

（2）简单应用

---

四、图形显示类型控件

1、Image控件

（1）ImageAlign属性和ImageUrl属性

（2）简单应用

2、ImageMap控件

（1）指定默认行为

（2）定义坐标点

（3）简单应用

---

五、Panel容器控件

1、Panel容器常用属性

2、简单应用

---

六、FileUpload文件上传控件

1、FileUpload控件的常用属性

2、简单应用

来源：CSDN

作者：lesileqin

链接：https://blog.csdn.net/lesileqin/article/details/103612295