ASP.NET之控件

最新推荐文章于 2024-03-19 21:25:41 发布

DavidBigHero

最新推荐文章于 2024-03-19 21:25:41 发布

阅读量1.1k

点赞数

分类专栏： ---------【ASP.NET】文章标签：控件 Web控件 HTML控件

本文链接：https://blog.csdn.net/qwlzxx/article/details/46427137

版权

---------【ASP.NET】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在ASP.NET编程中，控件是必不可少的一样东西。可以说，没有控件，那么界面只是一个空壳。相信大家对控件都多多少少有一些了解。不知道也没关系，下面就跟着我一起来认识一下各个控件，并简单学习一下它们的使用。

从大类上分，控件分为Web控件和HTML控件两大类。Web控件，又分为内部控件、列表控件、复杂控件和验证控件四类。

内部控件专门用于ASP.NET,使用方法与HTML控件相同，它们映射到HTML元素并通过使用runat="server"属性在服务器上执行。

列表控件用于在Web页中创建数据列表，填充这些控件的数据通常是从数据库中检索的，用户可以从列表中选择一种选项，并且该选项将存储在数据库中，通常使用的标准列表控件是Repeater、DataList和DataGrid控件。

当希望控件拥有复杂的功能或使用HTML元素无法创建的功能丰富的用户界面时，可以使用复杂控件。

当输入空间的数据需要进行准确性和取值范围方面的检查时需要用到验证控件，在ASP中，验证工作只能使用客户端脚本语言在客户端上执行，ASP.NET引入智能验证控件以使验证工作在服务器端执行。

我们可以在比较中进行学习。

从图中我们可以发现，HTML和内部控件不同之处在于input和asp:的标志不同，还有一点容易忽略。就是HTML控件不能传回服务器，需要自己加上runat="server"，而

内部控件自带。

举几个常用内部控件的例子。

文本输入：

单行输入：

<span style="font-size:18px;"><asp:textbox id="name" runat="server"/></span>

多行输入：

<span style="font-size:18px;"><asp:textbox id="add" textmode="multiline" rows="10" columns="10" runat="server"/></span>

密码输入：

<span style="font-size:18px;"><asp:textbox id="pwd" textmode="password" runat="server"/></span>

控制转移

从图中我们可以看到，这些就是控制转移控件。看起来很高大上，其实我们在VB中早接触过了这些按钮。它们有什么差异呢？Button和ImageButton用于将数据传递回服务器，LinkButton看起来像浏览器上的超链接，但是在单击时，它们会将数据传递回服务器。这三者都是能传回服务器的，唯独Hyperlink不能，当用户需要在页面之间导航时，主要使用Hyperlink，脱离了服务器，大大加快了页面之间的跳转速度。

选择

CheckBox

<span style="font-size:18px;"><asp: checkbox id="chkbx1" Text="选择我" runat="server"/></span>

在需要很多控件的情况下，我们为了方便起见，会添加一个组控件:CheckBoxList。

RadioButton

<span style="font-size:18px;"><asp:radiobutton id="radbt1" Text="单选按钮1" groupname="radio" runat="server"/>
<asp:radiobutton id="radbt2" Text="单选按钮2" groupname="radio" runat="server"/>
<asp:radiobutton id="radbt3" Text="单选按钮3" groupname="radio" runat="server"/></span>

和CheckBoxy一样，RadioButton控件也有相应的组控件:RadioButtonList。

ListBox

<span style="font-size:18px;"><asp:listbox id="lstbx1" SelectionMode="Single" runat="server"/></span>

DropDownList

<span style="font-size:18px;"><asp:dropdownlist id="dropdnlst 1" runat="server"/></span>

大家可以发现，我们在学习内部空间的同时也把列表控件学习了。前面的部分相对比较简单，我们就列表控件来给大家演示一个例子。

编写DB.CS

<span style="font-size:18px;">/*
 * 创建人：齐伟
 * 创建时间：2015/6/6 20:46:00
 * 说明：
 * 版权所有：齐伟&http://blog.csdn.net/qwlzxx
 */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;

namespace selectTest
{
    public class DB
    {
        public DB()
        { }
        public static SqlConnection createConnection()
        {
            SqlConnection con=new SqlConnection("server=.;database=dropDownText;uid=sa;pwd=123456;");
            return con;
        }
    }
}</span>

WebForm1.aspx设计

编写WebForm1.aspx.cs

<span style="font-size:18px;">/*
 * 创建人：齐伟
 * 创建时间：2015/6/6 20:01:26
 * 说明：
 * 版权所有：齐伟&http://blog.csdn.net/qwlzxx
 */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;

namespace selectTest
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                //绑定省
                SqlConnection con = DB.createConnection();
                con.Open();
                SqlCommand cmd = new SqlCommand("select * from province", con);
                SqlDataReader sdr = cmd.ExecuteReader();
                this.ddlProvince.DataSource = sdr;
                this.ddlProvince.DataTextField = "proName";
                this.ddlProvince.DataValueField = "proID";
                this.ddlProvince.DataBind();
                sdr.Close();
                //绑定市
                SqlCommand cmdCity = new SqlCommand("select * from city where proID=" + this.ddlProvince.SelectedValue, con);
                sdr = cmdCity.ExecuteReader();
                this.ddlCity.DataSource = sdr;
                this.ddlCity.DataTextField = "cityName";
                this.ddlCity.DataValueField = "cityID";
                this.ddlCity.DataBind();
                sdr.Close();
                //关闭连接
                con.Close();
            }
            
        }

        protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.Label1.Text = "你选择了" + this.ListBox1.SelectedItem.Text;
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            this.ListBox1.Items.Add(this.TextBox1.Text);
        }

        protected void ddlProvince_SelectedIndexChanged(object sender, EventArgs e)
        {
            string proID = this.ddlProvince.SelectedValue;
            SqlConnection con = DB.createConnection();
            con.Open();
            SqlCommand cmd = new SqlCommand("select * from city where proID =" + proID, con);
            SqlDataReader sdr = cmd.ExecuteReader();
            this.ddlCity.DataSource = sdr;
            this.ddlCity.DataTextField = "cityName";
            this.ddlCity.DataValueField = "cityID";
            this.ddlCity.DataBind();
            sdr.Close();
            con.Close();
        }
    }
}</span>

建数据库sql语句

<span style="font-size:18px;">create database dropDownText

use dropDownText

create table province 
(
	proID int primary key,
	proName varchar(50) not null
)

insert into province values(1,'北京')
insert into province values(2,'河北')
insert into province values(3,'山东')
insert into province values(4,'湖南')
insert into province values(5,'河南')


create table city 
(
	cityID int primary key,
	proID int foreign key references province(proID),
	cityName varchar(50) not null
)

insert into city values(1,1,'北京')
insert into city values(2,2,'邯郸')
insert into city values(3,2,'廊坊')
insert into city values(4,2,'承德')
insert into city values(6,5,'安阳')</span>

网页效果（部分显示）：

复杂控件

从图中我们可以看出，一个是广告控件，一个是日历控件。这两个控件相对来说HTML元素是比较复杂的。下面就让我们来看一下。

日历控件响应两个事件：日期更改和月份更改。我们来写一个例子。

WebForm1.aspx设计：

编写WebForm1.aspx,cs

<span style="font-size:18px;">/*
 * 创建人：齐伟
 * 创建时间：2015/6/7 21:10:52
 * 说明：
 * 版权所有：齐伟&http://blog.csdn.net/qwlzxx
 */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            int textNum;
            int btnNum;
            textNum = Convert.ToInt32(this.TextBox1.Text);
            btnNum = Convert.ToInt32(this.TextBox2.Text);
            for (int i = 0; i < textNum; i++)
            {
                this.Panel1.Controls.Add(new TextBox());
            }
            for (int j = 0; j < btnNum; j++)
            {
                this.Panel1.Controls.Add(new Button());
            }
        }
    }
}</span>

网页效果：

WebForm2.aspx设计

编写WebForm2.aspx.cs

<span style="font-size:18px;">/*
 * 创建人：齐伟
 * 创建时间：2015/6/7 21:28:36
 * 说明：
 * 版权所有：齐伟&http://blog.csdn.net/qwlzxx
 */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace panel
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.Panel1.Visible = false;
                this.Panel2.Visible = false;
            }
        }

        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            this.Label1.Text=this.Calendar1.SelectedDate.ToShortDateString();
        }

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

        protected void btnShowCalendar_Click(object sender, EventArgs e)
        {
            this.Panel2.Visible = true;
            this.Panel1.Visible = false;
            
        }
    }
}</span>

网页显示效果

这里想显示广告，还需要一个XML文件。

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/Images/image1.jpg</ImageUrl>
    <Height>60</Height>
    <Width>190</Width>
    <NavigateUrl>http://www.microsoft.com</NavigateUrl>
    <AlternateText>我</AlternateText>
    <Impressions>80</Impressions>
    <Keyword>1</Keyword>
    <Caption>This is the caption for Ad#1</Caption>
  </Ad>
  <Ad>
    <ImageUrl>~/Images/image2.jpg</ImageUrl>
    <Height>90</Height>
    <Width>90</Width>
    <NavigateUrl>http://www.wingtiptoys.com</NavigateUrl>
    <AlternateText>Wingtip Toys</AlternateText>
    <Impressions>80</Impressions>
    <Keyword>2</Keyword>
    <Caption>This is the caption for Ad#2</Caption>
  </Ad>
</Advertisements>
</span>

显示广告的网页效果：

在这里除了设计到 AdRotator、Calender控件外，还有Label、Button、TextBox、和panel控件，以及xml文件，需要认真分析和学习。

最后我们来看一下验证控件。

我们还是通过例子来学习一下。

validator窗体设计：

编写validator.aspx.cs

<span style="font-size:18px;">/*
 * 创建人：齐伟
 * 创建时间：2015/6/8 19:36:46
 * 说明：
 * 版权所有：齐伟&http://blog.csdn.net/qwlzxx
 */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;

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

        }

        protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
        {
            string userName = args.Value;
            SqlConnection con = new SqlConnection("server=.;database=login;uid=sa;pwd=123456;");
            con.Open();
            SqlCommand cmd = new SqlCommand("select Count(*) from login where userName='" + userName + "'", con);
            int count = Convert.ToInt32(cmd.ExecuteScalar());
            if (count >0)
            {
                args.IsValid = false;
            }
            else
            {
                args.IsValid = true;
            }
            con.Close();
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            if (this.IsValid)
            {
                Response.Write("提交");
            }
            else
            {
                Response.Write("页面无效");
            }
        }
    }
}</span>

页面效果（部分显示）

通过Web控件的学习我们可以发现其共同点。第一：专门用于ASP.NET，第二：映射到HTML元素并通过使用runat="server"属性在服务器上执行。

HTML控件不能和服务器有交互，但是可以通过为HTML元素添加runat="server"属性使其作为服务器控件。通过HTML元素唯一的id属性，可以用程序引用该控件。

几个常用的HTML服务器控件：

通过HtmlForm控件，可以再网页中创建一个用于元素的容器。

通过HtmlImage控件，可显示图像。

通过HtmlInputFile控件，可以将文件上载到服务器

做一个input（File）控件的例子。

inputFile.aspx设计

编写inputFile.aspx.cs

<span style="font-size:18px;">/*
 * 创建人：齐伟
 * 创建时间：2015/6/8 15:51:52
 * 说明：
 * 版权所有：齐伟&http://blog.csdn.net/qwlzxx
 */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void btnUpLoad_Click(object sender, EventArgs e)
        {
            string fullFileName = this.File1.PostedFile.FileName;
            string fileName = fullFileName.Substring(fullFileName.LastIndexOf("\\") + 1);
            string type = fullFileName.Substring(fullFileName.LastIndexOf(".") + 1);
            if (type == "jpg" || type == "bmp" || type == "gif")
            {
                this.File1.PostedFile.SaveAs(Server.MapPath("up") + "\\" + fileName);
                this.Image1.ImageUrl = "up/" + fileName;
            }
            else
            {
                Response.Write("<script language='javascript'>alert('你选择的图片格式错误！');</script>");
            }
        }
    }
}</span>

效果：

上传的图片已经到了相应的服务器文件夹。

那Web服务器控件和HTML服务器控件相比的优缺点在哪里呢？

Web服务器控件

优点：

Web服务器控件的类型化对象模型编程简洁并且易于检错，它们自动为下级(HTML 3.2)和上级(HTML 4.0)浏览器生成正确的HTML，它们可用于生成更复杂的服务器控件（例如Calender和DataGrid）

缺点：

直接控制服务器控件如何呈现在发送给浏览器的页面上的能力较弱

HTML服务器控件

优点：

HTML服务器控件能够同时在服务器和客户端编程，使用HTML服务器控件将现有HTML或ASP页转换为Web窗体页。

缺点：

所有值均为字符串，没有不具有类型安全性；可支持多种浏览器，但必须使用扩展样式，自己对其进行编程；不能自动检测用于样式的浏览器功能。

那设计页面什么情况下用Web服务器控件，什么情况下用HTML服务器控件呢？

适用Web服务器控件情况：

偏爱类似Visual Basic的编程模型；打算编写可能由HTML3.2和HTML4.0浏览器使用的Web窗体页；需要特定功能，例如日历；打算创建包含嵌套控件的应用程序并且需要在容器级别捕获事件

适用HTML服务器控件的情况：

偏爱类似HTML的对象模型；打算使用现有HTML页，并需要迅速添加Web窗体功能；与客户端脚本交互

小结：

控件是别人已经编写好的代码，它已经实现了部分功能。能够被很好的调用，控件是有界面、属性、方法、事件的一个封装，即代码复用。在本文中讲解的控件只是一些常用的控件中的部分功能，多加练习达到熟练运用的地步，更多的控件及其功能还需要我们去深入和学习。

DavidBigHero

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
17
评论
ASP.NET之控件

在ASP.NET编程中，控件是必不可少的一样东西。可以说，没有控件，那么界面只是一个空壳。相信大家对控件都多多少少有一些了解。不知道也没关系，下面就跟着我一起来认识一下各个控件，并简单学习一下它们的使用。从大类上分，控件分为Web控件、HTML和验证控件三大类。我们一样一样来进行学习。首先是Web控件，又分为内部控件、列表控件、复杂控件和验证控件四类。内部控件专门用于ASP.
复制链接

扫一扫

专栏目录