最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 正文

8.1网页中的控件类型

来源:动视网 责编:小OO 时间:2025-09-30 22:14:00
文档

8.1网页中的控件类型

第8章网页标准控件控件是一种类,绝大多数控件都具有可视的界面,能够在程序运行中显示出其外观。利用控件进行可视化设计既直观又方便,可以实现“所见即所得”(WhatYouSeeIsWhatYouGet,简称为WYSIWYG)的效果。程序设计的主要内容是选择和设置控件以及对控件的事件编写处理代码。本章将介绍网页中最常用的几个标准网页控件。目的在于学会这些常用控件的使用方法。其他控件在后续的章节中介绍。8.1网页中的控件类型ASP.NET的类库中包括大量的控件,根据功能可以将它们分成以下几种类型。标准
推荐度:
导读第8章网页标准控件控件是一种类,绝大多数控件都具有可视的界面,能够在程序运行中显示出其外观。利用控件进行可视化设计既直观又方便,可以实现“所见即所得”(WhatYouSeeIsWhatYouGet,简称为WYSIWYG)的效果。程序设计的主要内容是选择和设置控件以及对控件的事件编写处理代码。本章将介绍网页中最常用的几个标准网页控件。目的在于学会这些常用控件的使用方法。其他控件在后续的章节中介绍。8.1网页中的控件类型ASP.NET的类库中包括大量的控件,根据功能可以将它们分成以下几种类型。标准
第8章 网页标准控件

控件是一种类,绝大多数控件都具有可视的界面,能够在程序运行中显示出其外观。利用控件进行可视化设计既直观又方便,可以实现“所见即所得”(What You See Is What You Get,简称为WYSIWYG)的效果。程序设计的主要内容是选择和设置控件以及对控件的事件编写处理代码。

本章将介绍网页中最常用的几个标准网页控件。目的在于学会这些常用控件的使用方法。其他控件在后续的章节中介绍。

8.1网页中的控件类型

ASP.NET的类库中包括大量的控件,根据功能可以将它们分成以下几种类型。

标准控件:这些控件属于服务器控件。除窗体页中常用的按钮、文本框等控件以外,还有一些特殊用途的控件,例如,显示日历的控件等。网页标准控件与HTML元素标记之间不存在一对一的对应关系。

验证控件:用于检验用户的输入。例如,验证是否缺少必须填入的字段;输入的数据格式是否符合要求;输入的数据是否在指定的范围内等。

用户控件及自定义控件:这些控件都是由程序设计者自行定义的控件,是对系统控件的扩展。用户控件可以在项目内不同网页中重复使用,从而提高了程序设计的效率,同时还能使各网页的显示风格一致。

HTML控件:默认情况下它属于客户端(浏览器端)控件,但也可以将其转换成服务器端控件。每个控件对应于一个HTML元素的标记。

数据源控件

这类控件可以针对各种数据源实现数据绑定功能,这包括微软的SQL Server和Access,以及其他关系型数据库、XML文件和代码中实现的类。

数据视图控件

这类控件呈现为各种列表和表格,它们可以绑定到数据源以显示和编辑数据。

个性化控件

这类控件允许用户个性化地展示自己的站点,包括重新调整网页本身等。用户信息会被自动地、透明地保存,并从一个会话持续到下一个会话。

登录控件和安全控件

这类控件实现站点中的普通登录功能,并维护用户的密码。

组合控件:由多个标准控件组合而成,能够完成如客户认证等比较复杂的功能。

ASP.NET 2.0增加了近60个控件,其中有不少是功能强大的组合控件,从而大大提高了快速开发的能力。 

8.2 HTML控件转换成服务器控件

HTML控件是从基类 System.Web.UI.HtmlControls.HtmlControl 直接或间接派生的类,并且都直接映射到 HTML 元素上。默认情况下HTML控件属于浏览器端控件,服务器无法控制。这些元素被视为传递给浏览器的不透明的文本。这些不透明的文本被传送到浏览器后由浏览器下载并负责解释、执行。

但是,为了适应ASP.NET应用的需要,可以将 HTML 元素转换成 HTML 服务器控件,从而在服务器端对它们进行编程和处理。

将HTML 控件转换成服务器控件非常简单。下面举例说明。

例如,想将一个Text Field浏览器端控件转换成服务器端控件,转换的方法如下:

用手工方法在控件的定义中增加runat="server"属性,该控件就变成了服务器端控件。如果原来的HTML控件中没有id属性时,也应该补上。增加上述属性后,控件的定义如下:

HTML控件的功能在前面HTML章节中已经详细介绍,这里不再作讨论

8.3网页标准控件功能和格式

在ASP.NET 2.0的【工具箱】中,只有HTML选项卡中的控件是浏览器端控件,其他各种控件都是服务器控件。其中【标准】选项卡中的控件是常用的控件。在类库中,所有的网页控件都是从System.Web.UI.Control.WebControls直接或间接派生而来的。

1.网页标准控件的功能

在【工具箱】的【标准】选项卡中包括有几十个标准控件。这些控件中既有传统的窗体控件,例如,按钮、选择控件、文本框等,还有用来显示数据、选择日期等比较复杂的控件。其中,有的控件还具有很高的智能,例如:

能自动检测浏览器的类型,并根据浏览器的类型提供不同的输出。

能够使用模板来定义控件的外观。

可以选择事件信息传送的方式,是立即发送给服务器,还是先缓存然后再和其他信息一起传送给服务器。

有的控件可将事件信息从嵌套控件(例如表中的按钮)传递到它的容器控件。 

2.定义标准控件的格式

定义网页标准控件的格式如下:

其中asp代表命名空间,所有的Web服务器控件的命名空间都是asp;Control代表控件的类型;id代表控件的标志;runat="server"代表这是一个服务器控件,默认情况下,所有标准控件都是服务器控件。

例如,定义Label、TextBox、Button等网页控件的代码如下。

8.4.设置控件的属性和事件处理程序

开发人员通过从“工具箱”窗口拖放控件到设计页面上,并利用属性浏览器为其设置属性和事件。大多数控件都拥有一些共有的属性与事件,例如ID、Text属性以及Click事件等。让我们通过几个简单的控件来熟悉为控件设置属性和添加事件的基本方法。

首先,创建一个ASP.NET 网站,切换到Default.aspx页面的“设计”视图,从“工具箱”的“标准”组中将一个Label控件拖放到页面上。右击该控件,在菜单中选择【属性】,展开“属性”窗口(图11-1)。

在设置Label控件的属性前,先对“属性”窗口做一个了解。

图11-2中标出了“属性”窗口中最上面一行的四个按钮的作用。靠左边的两个按钮用于指定属性和事件排序的方式,通常使用按字母顺序排列便于查找。后面的两个按钮则是在属性与事件列表间切换时使用。

接下来,就可以在属性列表中为Label控件设置属性了。图11-3是以Label控件的外观的属性值:BackColor(背景色)、BorderColor(边框颜色)、BorderStyle(边框样式)、BorderWidth(边框宽度)、Font(字体)、ForeColor(前景色)、Height(高度)等为例。

  

图 11-1            图 11-2                 图 11-3

之前在“属性”窗口中所做的设置,也可以在该视图中手动添加。

代码清单 111 设置Label控件属性

BackColor="Blue" BorderColor="Yellow" BorderWidth="2px"

Font-Bold="True" Font-Names="Verdana" ForeColor="White" >

控件属性名称属性值
LabelIDlbName
Text请输入您的姓名:
TextBoxIDtbName
ButtonIDbtSubmit
Text提交
LabelIDlbResult
Text置空
在本示例中,将Label控件的Text属性设为“请输入您的姓名:”,然后添加TextBox、Button 和另外一个Label控件至页面。选中 Button 控件,在其“属性”窗口中将Text属性值设置为“提交”。更详细的控件属性设置见右侧的表。

其余样式按图11-4布局。

图 11-4

切换回“源”视图,此时的HTML标记丰富了许多(如图11-5所示)。

图 11-5

所有服务器控件使用“asp:”作为前缀,并包括一个runat=“server”的属性。这表明当页面运行时它们由 ASP.NET 在服务器端进行处理。接下来为Button控件添加处理事件。返回“设计”视图,双击Button控件,或者是选中Button控件,在“属性”窗口中点击事件标记,双击Click事件右侧的文本框(图11-6)。

此时,集成开发环境将在编辑器的单独窗口中打开Default. aspx.cs文件,其中包含Button按钮的Click 事件处理程序框架,键入如下代码:

代码清单 11-2

protected void btSubmit_Click(object sender, EventArgs e)

{

lbResult = tbName.Text + ",欢迎您!";

}

现在按下Ctrl + F5在浏览器中运行该页。在文本框中输入名称并单击提交按钮。输入的名称将显示在Label控件中(图11-7)。

 

图 11-7

8.5.标准控件介绍

标准的服务器控件的作用比较广泛,本节重点介绍标准控件中常用控件的使用方法和技巧。

(1)    标签控件

Label标签控件是最简单的控件,该控件的功能就是输出文本。向Web窗体页添加Label服务器控件步骤如下:

1.从工具箱的“标准”选项卡中,将 Label 控件拖到页面上。

2.在“属性”窗口的“外观”类别中,将该控件的 Text 属性设置为要显示的文本。 

文本也可以利用程序动态地设定。定义的语法如下:

输出文本

其中:“asp”为标准控件区别于HTML控件而添加的标记,在使用标准控件时,每个控件名称前都必须加上“asp”;

可以在文本属性中包括HTML标记,例如,在 Text 属性中,可以通过在文本中放置标记来对文本加粗。 

    Label1.Text = "Label标签控件";

运行程序后,文本“Label标签控件”加粗显示,这表明Label控件文本属性中的HTML标记是要被解释的。

(2)    文本框控件

TextBox文本框控件为用户提供了一种向网页中输入信息(包括文本、数字和日期)的方法。定义的格式如下:

TextBox控件有一个重要的属性:TextMode。该属性包括3个选项。

SingleLine:单行编辑框;

MultiLine:带滚动条的多行文本框;

PassWord:密码输入框,所有输入字符都用特殊字符(例如“*”)来显示。

Maxlength属性设置TextBox控件可以接收的最大字符数。

(3)    按钮控件

标准控件中提供了三种按钮:普通按钮(Button)、超链接按钮(LinkButton)和图片按钮(ImageButton)。它们之间功能相同,只有外观上有区别。Button的外观与传统按钮的外观相同;LinkButton的外观与超链接字符串相同;ImageButton按钮用图形方式显示外观,其图像通过ImageURL属性来设置。

三种按钮的功能都与HTML的提交按钮(Submit Button)相似,即每当这些按钮被单击(Click)时,就将缓冲区中的事件信息一并提交给服务器。

定义按钮的语法如下:

链接按钮

用鼠标双击LinkButton按钮,然后在隐藏文件中给按钮的Click事件写出以下程序,该按钮即可通过服务器转向新的网页,从而起到“超链接”的作用。

private void LinkButton1_Click(object sender, System.EventArgs e)

{

    Response.Redirect("其他窗体的URL");

}

另外,三种按钮都有一个PostBackUrl属性,利用这个属性可以将按钮变成“返回”按钮。即先将该属性设置成某个网页的URL,以后单击该按钮时就会直接转向该网页。

实例:

使用超链接按钮来提交用户登入信息,实现步骤如下。

(1)在网站中添加新的“Web 窗体”,在新建的页面中,选择“设计”视图。

(2)在页面中输入“请输入用户名和密码:”、“用户名”和“密码:”

(3)在“用户名”和“密码:”右侧分别添加文本框控件TextBox1和TextBox2,并在文本框控件TextBox2的“属性”窗口设置“TextMode”属性值为Password。

(4)在页面中添加两个LinkButton控件,并分别在“属性”窗口中设置Text属性为“重写”和“确定”。

(5)添加“标准”选项卡中的Label控件到页面中,在“属性”窗口中的“Font”属性下设置控件的字形(Bold)为粗体,并删除Text属性值。页面设计效果如图所示。

(6)在页面中双击“重写”按钮,生成LinkButton1_Click事件,并切换到显示逻辑代码的“源”视图中,在该窗口中输入事件共能实现代码,如下所示:

protected void LinkButton1_Click(object sender, EventArgs e)

    {

        TextBox1.Text = "";

        TextBox2.Text = "";

    }

代码的作用是清空文本框中的内容。其实我们可以用HTML的“重写”按钮代替LinkButton控件,只要把“Input(Reset)”HTML按钮加入到页面中,就可以实现重写的功能,不过要注意:“Input(Reset)”控件必学放在文本框所在的

…标记间。

(7)切换到“设计”视图,双击“确定”按钮生成LinkButton2_Click事件,并切换到“源”视图中,在该窗口中输入事件共能实现代码,如下所示:

protected void LinkButton2_Click(object sender, EventArgs e)

    {

        if (TextBox1.Text == "")

        {

            Response.Write("用户名为空,请输入!");

            return;

        }

        if (TextBox2.Text == "")

        {

            Response.Write("密码为空,请输入!");

            return;

        }

        if (TextBox1.Text != "ZhangSan")

        {

            Response.Write("用户名错误,请重新输入!");

            TextBox1.Text = "";

            return;

        }

        if (TextBox2.Text != "123456")

        {

            Response.Write("密码错误,请重新输入!");

            TextBox2.Text = "";

            return;

        }

        Label1.Text = "用户身份验证成功!";

    }

(8)在“.aspx”页面中单击右键,在弹出的“快捷菜单”中选择“在浏览器中查看”,即可浏览页面运行结果。

(4)    复选控件

CheckBox 复选框控件和 CheckBoxList复选框列表控件为用户提供了在真/假、是/否或开/关选项之间进行选择的方法。CheckBox 是单个控件,可以单独使用。使用单个 CheckBox 控件时,更容易控制页面上的布局。例如,可以在各个复选框之间包含文本。也可以单独控制复选框的字体和颜色。

该控件的常用属性如下:

Checked 用于判断或设定该项目是否被选中,如果Checked控件被选中,该属性返回值为TRUE,否这返回值为FALSE。

GroupName 用于判断或设定按钮所属的组,如果多个CheckBox 复选框控件的GroupName值相同,那么他们属于同一组。

Text 用于设置控件的文本标签,默认值为空。

TextAlign 用于判断或设定CheckBox控件的文本标签在选取框的左方还是在右方。,默认值是右方(Right);

而CheckBoxList复选框列表控件可以将多个CheckBox组合在一起使用。如果想用数据库中的数据创建一系列复选框,则 CheckBoxList 控件是较好的选择。

使用CheckBoxList时要给控件增添选项。方法是先选择该控件,然后找到控件的Items属性,单击右边的省略号按钮,将弹出如图7.1所示的对话框。

HTML中的CheckBox控件只能用于静态处理,而网页控件中的CheckBox可以进行数据绑定操作,所以通常用于动态数据绑定。关于数据绑定,将在以后的章节中介绍。

CheckBoxList控件的常用属性如下:

RepeatColumns    获取或设置要在 CheckBoxList 控件中显示的列数。

RepeatDirection    获取或设置一个值,该值指示控件是垂直显示还是水平显示。

SelectedIndex     获取或设置列表中选定项的索引值。

SelectedItem    获取列表控件中选定项的参数。 (继承自 ListControl。)

SelectedValue        获取列表控件中选定项的值,或选择列表控件中包含指定值的项。

SelectedItems        由于CheckBoxList控件可复选,被选取的项目被加入ListItems集合中;;本属性可传回ListItems集合,只读。

Text        获取或设置 ListControl 控件的 SelectedValue 属性。 (继承自 ListControl。)

TextAlign    获取或设置组内复选框的文本对齐方式。

实例:使用CheckBox控件进行多门课程选择。

在页面中添加四个CheckBox控件:CheckBox1、CheckBox2、CheckBox3、CheckBox4,一个按钮控件Button1,一个Label 控件Label1。页面设计效果如图所示。

其功能的“源”视图中BODY代码如下,

   请选择你要选修的课程:

    

   

   

    

  



后置代码.cs文件中按钮的Button1_Click事件如下:

  protected void Button1_Click(object sender, EventArgs e)

    {

        string str = "你要选修的课程是:";

        if (CheckBox1.Checked)

           str += CheckBox1.Text + " ";

         if (CheckBox2.Checked)

          str += CheckBox2.Text + " ";

         if (CheckBox3.Checked)

          str += CheckBox3.Text + " ";

         if (CheckBox4.Checked)

           str += CheckBox4.Text;

        Label1.Text = str;

    }

实例:动态添加复选框

本例使用复选框列表实现选择课程,并可动态添加课程,在页面中添加文本框控件TextBox1和TextBox2,按钮控件Button1,CheckBoxList控件CheckBoxList1,Label 控件Label1。页面设计效果如图所示。

其功能的“源”视图中BODY代码如下,

        课程名称(text):

        课程编码(value):

        



        请选择课程: RepeatDirection="Horizontal">



CheckBoxList 控件中的AutoPostBack属性设定用户选择不同的项目时,是否要自动触发OnSelectedIndexChanged事件,当AutoPostBack="true"时,服务器控件将发生自动回传,而不需通过按钮控件的Click事件引发;当AutoPostBack="false",则回传必须经过类似Click的事件引发。下面要讲到的“单选控件”、“Select控件”也有AutoPostBack属性,功能相同。

按钮的Button1_Click事件和复选框列表的CheckBoxList1_SelectedIndexChanged事件如下:

protected void Button1_Click(object sender, EventArgs e)

    {

        CheckBoxList1.Items.Add(new ListItem(TextBox1.Text, TextBox2.Text));

    }

    protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)

    {

        string str = "";

        foreach (ListItem li in CheckBoxList1.Items)//每个都检查是不是被选中!

        {

            if (li.Selected == true)

            {

                str += li.Text + "(" + li.Value + "), ";

            }

        }

        Label1.Text = "选的分别是:" + str;

    }

(5)    单选控件

RadioButton和RadioButtonList单选控件的作用和使用方法与CheckBox基本相同,惟一的差别在于,在一个RadioButtonList内的多个RadioButton之间只能有一项被选中,而在CheckBoxList中可以同时选中多项。要使多个RadioButton控件之间只能有一项被选中,必须把控件GroupName属性设置相同值,否则能选择多项。

实例:RadioButton控件使用。

显示页面中body中代码如下:

 请选择你所在的年级:

 


 


 


 





把4个RadioButton控件的GroupName属性值都设置为"grade",否这一次能选择多个单选按钮。

按钮的Button1_Click事件如下:

protected void Button1_Click(object sender, EventArgs e)

    {

        string str = "你所在的年级是:";

        if (RadioButton1.Checked)

        {

            str += RadioButton1.Text + " ";

        }

        if (RadioButton2.Checked)

        {

            str += RadioButton2.Text + " ";

        }

        if (RadioButton3.Checked)

        {

            str += RadioButton3.Text + " ";

        }

        if (RadioButton4.Checked)

        {

            str += RadioButton4.Text;

        }

        Label1.Text = str;

    }

(6)下拉列表控件

DropDownList控件呈现为下拉列表,是列表项的容器,每一个列表项都属于ListItem类型,用户可以从下拉列表框中选择一项,其语法是: 

    OnSelectedIndexChanged = "Method"  Runat ="server">

该控件的作用和使用方法与RadioButtonList单选控件基本相同。

实例:

显示页面中body中代码如下:

 



AutoPostBack设置为true后,触发OnSelectedIndexChanged的事件立刻发送到服务器

按钮的Button1_Click事件和下拉列表DropDownList1_SelectedIndexChanged事件如下:

protected void Button1_Click(object sender, EventArgs e)

    {

        DropDownList1.Items.Add(new ListItem("name", "spell"));

        DropDownList1.Items.Add(new ListItem("age", "24"));

        DropDownList1.Items.Add(new ListItem("sex", "boy"));

    }

protected void Button2_Click(object sender, EventArgs e)

    {

        Label1.Text = DropDownList1.SelectedItem.Text + " : " + DropDownList1.SelectedItem.Value;

    }

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

    {

        Label1.Text = DropDownList1.SelectedItem.Text + " : " + DropDownList1.SelectedItem.Value;

    }

(7)ListBox控件 

ListBox Web 控件和DropDownList Web 控件的功能几乎是一样,只是ListBox控件没有下拉列表框,可一次显示多项,用户可以选择一个项可以选择多个项,与DropDownList的区别除了外观,就是它还允许选择多个项,其语法是: 

    Rows = “Count”    SelectionMode = “Single|Multiple”

    OnSelectedIndexChanged = “Method”Runat = “server” >

/>

Rows:设定ListBox控件一次要显示的行数,默认是4行。

SelectionMode:设定ListBox控件是否可以按住【shift】或【Control】按钮进行复选,默认是Single,只能单选。

(8)    图像控件

利用Image图像控件可以在Web窗体页上显示图像,并用自己的代码来管理这些图像。图像源文件可以在设计时确定,也可以在程序运行中指定,还可以将控件的ImageURL属性绑定到数据源上,根据数据源的信息来选择图像。

与大多数其他Web服务器控件不同,Image控件不支持鼠标单击(click)事件。如果需要使用鼠标单击事件时,可以使用ImageButton控件来代替Image控件。

显示一个图像所需的最少操作是:先创建一个Image控件,然后指定一个图像文件。具体步骤如下。

①    进入【设计】视图,在【工具箱】中展开【标准】选项卡,然后将一个Image控件拖放到网页界面上。

②    将控件的ImageURL属性设置为、或其他网络图形文件的URL。

③    给Image控件设置以下属性。

Height和Width:在页面上为图形保留适当空间(高度和宽度)。

ImageAlign:用来设置图像对齐的方式。可使用的值包括Top、Bottom、Left、Middle和Right。

Alternatetext:有的浏览器不支持加载图像时,替代图像的文本。

ImageMap控件可以用来显示图像,也可以实现图像的超链接。该控件的最大特点是,可以将ImageMap中的图像按照(X,Y)坐标划分成不同形状的区域,分别链接到不同的网页。该控件的ImageUrl属性用来连接图像源文件;HotSpot属性用来划分链接区域。单击HotSpot属性右边的省略号按钮,将弹出如图7.2所示的对话框。

利用【添加】按钮的下拉列表可以选择区域的形状,在右边的属性中可以确定区域的位置以及链接的网页。

(9)    超链接控件

HyperLink超链接控件用于从一个页面转向到另一个页面,与HTML中的超链接不同之处在于,此处的HyperLink超链接可以使用数据绑定。

在HyperLink超链接控件中有3个重要的属性。

Text:一个可以使用数据绑定动态改变的值,可以使用{0}来表示Text属性   的值。

NavigateUrl:需要将链接转向的地址(URL)。

Target:目标。选择链接的网页出现的位置。

在使用数据绑定的时候,可以通过改变Text属性所绑定的数据源的值来实现动态超链接。

(10) FileUpload控件

FileUpload 控件在Web页面上,显示为一个“文本框控件”和一个“浏览”按钮,用户可以将自己计算机上的文件上传到Web服务器。可以在文本框中输入本地计算机上文件的完整路径来指定要上载的文件,也可以通过单击“浏览”按钮,在“选择文件”对话框中定位文件夹来选择文件。但是用户选择要上载的文件后,控件不会自动将该文件保存到服务器。必须编写代码,来实现上传。

在上传的过程中,文件数据作为页面请求的一部分,上传并缓存到服务器的内存中,然后再写入服务器的指定的物理硬盘中。

,FileUpload控件还公开了几个只读的属性,在表5-8和表5-9列出。

表5-8  FileUpload控件属性

名  称

类型说  明

FileContentStream×返回一个指向上传文件的流对象
FileNamestring×返回要上传文件的名称,不包含路径信息
HasFileBoolean×如果是true,则表示该控件有文件要上传

PostedFileHttpPostedFile×返回已经上传文件的引用。表5-9列出了它所公开的只读属性

表5-9  HttpPostedFile属性

名  称

类  型

说  明

ContentLengthinteger×返回上传文件的按字节表示的文件大小
ContentTypestring×返回上传文件的MIME内容类型

FileNamestring×返回文件在客户端的完全限定名,包含路径

InputStreamStream×返回一个指向上传文件的流对象
所有这些属性将在下面的示例中说明。

为了查看FileUpload控件在实际中的运用,创建一个FileUploadDemo网站。在页面上添加一个FileUpload控件,然后,添加一个ASP.NET按钮,Text属性设置为“上 传”,ID分别设置为btnSave。增加一个Label控件,将ID设置为lblMesage。用
HTML元素分隔这些控件。切换到设计视图,通过按钮,为它们在代码隐藏文件中创建具有默认名称的Click事件处理程序。完成后的内容文件类似于示例5-11。

示例5-11:FileUploadDemo网站的default.aspx页面body中代码如下:

      

请选择要上传的文件


                   Text="上 传" 

OnClick="btnSave_Click" />



示例5-12:FileUploadDemo网站的在代码隐藏文件Default.aspx.cs中,

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    protected void btnSave_Click(object sender, EventArgs e)

    {

        string str = "";

        if (FileUpload1.HasFile)

        {

            try

            {

                str += "正在上传的文件: " + FileUpload1.FileName;

                //指定文件保存在服务器的位置,Server.MapPath("~/")获取虚拟目录的物理路径

                FileUpload1.SaveAs(Server.MapPath("~/") + FileUpload1.FileName);

                //  显示文件信息

                str += "
文件在客户端的文件名及路径: " + FileUpload1.PostedFile.FileName;

                str += "
文件类型: " +

                    FileUpload1.PostedFile.ContentType;

                str += "
文件大小 (bytes): " +

                    FileUpload1.PostedFile.ContentLength;

            }

            catch (Exception ex)

            {

                str += "
错误
不能上传文件:"

+ FileUpload1.FileName + "
" + ex.Message;

            }

        }

        else

        {

            str = "没有选择要上传的文件";

        }

        lblMessage.Text = str;

    }

}

在“上 传”按钮的btnSave_Click事件处理程序中,FileUpload控件的HasFile属性用于检测文本框中是否输入了有效的完全限定文件名。如果文本框为空或输入的名称无效,将不会通过检测,并且lblMessage将显示“没有选择要上传的文件”。

假定上传了一个有效文件,那么将执行try代码块中的代码。关键语句是调用File- Upload控件的SaveAs方法。该方法使用硬编码路径和FileName属性传递一个完全限定的文件名。该语句可能会由于各种原因而失败,包括磁盘空间不足、无效的路径或安全问题。

如果SaveAs方法失败,则执行catch代码块。在lblMessage中显示一个错误信息,包括该异常的Message属性ex..Message。

如果SaveAs方法执行成功,关于上传文件的多个信息将显示在lblMessage中,这些信息通过FileUpload.PostedFile(类型为HttpPostedFile)中的属性获取。

文件保存后,页面看起来类似于图5-11。

图5-11:文件保存后的FileUploadDemo

当在讨论从客户端上传文件到web服务器时,安全是非常让人关注的。须注意两点,首先,使用这种方式会公开web服务器,从而会有非常大的安全漏洞,为此要特别细心。因为这样不仅可以上传病毒,木马和其他恶意软件,还会存在客户端浏览web服务器目录结构的危险。因此,应该使用硬编码目标目录,至少严格限定在哪里保存上传的文件。

利用FileUpload控件并结合良好的安全防护,用户可以把自己的文件传送到网站,以丰富网站功能。

8.6.动态生成控件

Web服务器控件允许在程序的运行中动态生成,这是一项重要的优点。因为在某些情况下,动态生成控件比设计时创建的控件更加灵活。例如,在网页中进行搜索,要求用表格来显示搜索结果。因为事先不知道结果有多少项,因此表格的行数事先也不能确定,只能根据搜索结果动态生成。

动态生成控件的步骤如下。

(1)    先放置新控件的容器以便给新创建的控件占位。如果没有容器时,也可以利用 Placeholder或Panel控件来替代新控件的容器。

(2)    创建新控件对象。

(3)    给新控件设置属性。

(4)    将新控件加入到容器中来。

下面通过两个示例来说明创建的方法。

例1:创建一个新的Label对象,Panel1作为它的容器。

先拖入一个Panel1对象作为新控件的容器。然后给某个按钮编写以下代码:

Label myLabel = new Label();            // 生成控件myLabel1

myLabel.Text = "简单的动态Label";      // 给控件设置属性

Panel1.Controls.Add(myLabel);          // 将新控件加入到容器中

例2:动态创建按钮和按钮事件。

先拖入一个Panel1对象作为新控件的容器。然后在Page_Load事件中编写以下代码:

protected void Page_Load(object sender, EventArgs e)

    {      

        TextBox T1 = new TextBox();// 生成文本框控件T1

        T1.Text = "";

        T1.ID = "t1";

        Panel1.Controls.Add(T1);

        Button B1 = new Button();// 生成按钮控件B1

        B1.Text = "提交";

        B1.ID = "b1";

        B1.Click += new EventHandler(B1_Click); // 给按钮控件添加B1_Click事件

        Panel1.Controls.Add(B1);

    }

手工添加按钮控件B1_Click事件,代码如下:

protected void B1_Click(object sender, EventArgs e)

    {

        TextBox t = (TextBox)Panel1.Controls[1]; //获取文本框的值

        Response.Write(t);

    }

例3:动态创建一个表格。

在【工具箱】的HTML选项卡中提供了Table控件,在【标准】选项卡中同样提供了一个Table控件。两种控件各有特色。如果用于显示静态数据时采用HTML中的Table控件比较有利,如果表格需要动态生成时,使用【标准】选项卡中的Table控件比较有利。

首先应该明确的是,“表(Table)”是对象,表中的“行(TableRow)”也是对象,行中的“列(单元格,TableCell)”也是对象。父对象包括子对象,子对象又包括自己的子对象,而每种对象都需要单独生成,然后组合到一起。

其中Table 控件作为 TableRow 控件的父对象,支持名为 Rows 的属性,它是 TableRow 对象的集合。可以通过管理该集合(在其中添加或删除项)来指定表的行。TableRow 对象又支持名为TableCell的对象的集合。

表中显示的内容将添加到TableCell对象中。单元格有 Text 属性,可以将其设置为任何HTML文本,具体步骤如下。

(1)    先在窗体页中放置新控件的容器。在这里,Table控件就是新控件的容器。将Table控件拖入窗体页中,设置好整个表的外观属性,比如Font、BackColor和ForeColor等。默认情况下TableRow控件和TableCell控件也将支持这些属性,当然也可以重新为个别行或单元格指定另外的外观属性,新设置的属性将覆盖父表中的设置。

(2)    可以将数据绑定到控件上,通常是向表添加TableCell控件。然后将单个 TableCell控件的Text属性绑定到数据上,或者向单元格添加数据绑定控件(比如 Label 控件或TextBox控件)。

添加行的方法是:

TableRow tRow = new TableRow();      // 生成行对象

Table1.Rows.Add(tRow);                  // 将行对象加入到表中

添加单元格的方法是:

TableCell tCell = new TableCell();       // 生成单元格对象

tRow.Cells.Add(tCell);                    // 将单元格加入到行中

向单元格添加内容有多种方法,如表7.2所示。

现在综合前面的方法动态生成一个表格。表格的行与列的数目是由两个文本框(TextBox1、TextBox2)中的数字决定。每个单元格中以静态文本形式显示其行号和单元 格号。

先将【标准】选项卡中的Table控件拖入窗体作为动态表格的容器,并为该控件设置相关属性,然后在按钮的Click事件中编写以下代码: 

public void Button1_Click (object sender, System.EventArgs e){

   int rowCnt;          // 行的数目 

   int rowCtr;          // 当前行

   int cellCtr;      // 每行包括的列数

   int cellCnt;      // 当前的列

   rowCnt = int.Parse(TextBox1.Text);

   cellCnt = int.Parse(TextBox2.Text);

for(rowCtr=1; rowCtr <= rowCnt; rowCtr++) {

   // 创建新行并加入到表中

     TableRow tRow = new TableRow();

     Table1.Rows.Add(tRow);

for (cellCtr = 1; cellCtr <= cellCnt; cellCtr++)

      {

     // 创建新列并加入到行中

        TableCell tCell = new TableCell();

        tCell.Text = "行 " + rowCtr + ", 列 " + cellCtr;

        tRow.Cells.Add(tCell);

       }

     } 

  }

显示结果如图7.3所示。

有时,在数据表的某些单元格中放置控件(例如TextBox)更加有利于数据绑定。此时应先生成一个控件对象,然后将其添加到单元格的Controls集合中。例如:

  TextBox Text1 = new TextBox();          // 生成Text1对象

  TableCell tcell = new TableCell();      // 生成单元格对象

  tcell.Controls.Add(Text1);               // 将控件对象加入到单元格中

本示例中涉及一些数据类型的转换。在程序中这种转换是会经常遇见的。

文档

8.1网页中的控件类型

第8章网页标准控件控件是一种类,绝大多数控件都具有可视的界面,能够在程序运行中显示出其外观。利用控件进行可视化设计既直观又方便,可以实现“所见即所得”(WhatYouSeeIsWhatYouGet,简称为WYSIWYG)的效果。程序设计的主要内容是选择和设置控件以及对控件的事件编写处理代码。本章将介绍网页中最常用的几个标准网页控件。目的在于学会这些常用控件的使用方法。其他控件在后续的章节中介绍。8.1网页中的控件类型ASP.NET的类库中包括大量的控件,根据功能可以将它们分成以下几种类型。标准
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top