第4章Net控件课件.ppt

1、.NET架构,主讲教师 徐新 武汉科技大学计算机学院,关于ASP.NET,ASP.NET利用一系列的控件，实现从窗口应用程序向Web应用程序的过渡。 ASP.NET能使用尽可能少的代码生成企业级Web应用。,ASP.NET核心技术,Web Form编程 标准控件、验证控件、内置对象 数据处理 数据源+数据绑定控件 成员和角色管理 登录控件 站点导航 导航控件 母版页技术 主题与皮肤 个性化用户配置 Web部件 AJAX技术 Web服务,第4章 ASP.NET标准控件,4.1 基础知识 4.2 标准控件,4.1 基础知识Web Form示例,Web Form编程模型,标准控件,控件属性,控件事件

2、,代码,页代码模式,内嵌代码模式混合式 HTML标记、服务器端元素以及事件处理程序都位于同一个aspx文件中，其中代码部分插入在页中具有runat=“server“的script块中。 代码隐藏模式分离式 HTML标记和服务器端元素位于同一个aspx文件中，但事件处理等页代码位于单独的cs代码文件中。,内嵌代码模式示例1,内嵌代码模式示例Hello ASP.NET,基本格式：,内嵌代码模式示例2,内嵌代码模式示例void SubmitBtn_Click(Object sender, EventArgs e) Message.Text=“Hello ASP.NET!“; ,表示层和逻辑层混在同一

3、页面 编写维护复杂，可读性差,全部用户编码,代码隐藏模式示例,Untitled Page,Default.aspx,Default.aspx.cs, public partial class _Default : System.Web.UI.Page protected void Button1_Click(object sender, EventArgs e) Message.Text = “Hello ASP.NET!“; ,自动生成,用户编码,【返回】,4.2 标准控件,标准控件全部运行于服务器端，即必须显示声明runat=“server“. 这类控件在服务器端都以特殊的控件标签作为其H

4、TML语法：当页面运行于客户端时，它们就会自动生成相应的符合HTML语法的控件标签。(以TextBox为例),标准控件(1),为重点讲解,标准控件(2),标准控件(3),【返回】,4.2.1 Label,示例,编程方式动态设置：Label1.Text = “ASP.NET程序设计“;Label1.Font.Name = “黑体“;Label1.Font.Size = 30;Label1.ForeColor = System.Drawing.Color.Blue; 动态创建一个Label控件，并将它添加到页面中：Label myLabel = new Label();myLabel.Text =

5、 “This is a new Label“;Page.Controls.Add(myLabel);,【返回】,4.2.2 TextBox,示例,文本框：最多6位密码框：多行文本框(不能自动换行)： ,【返回】,4.2.3 Button/LinkButton/ImageButton,当用户单击这三种类型按钮中任何一个时，都会产生Click事件，同时都会自动产生向服务器回送的操作。,示例1：页面跳转说明：单击Button1按钮后会跳转到login.aspx页面。 示例2：具有超链接外观的按钮 武汉科技大学示例3：图形按钮示例4：Click事件 protected void Button1_Cli

6、ck(object sender, EventArgs e) Label1.Text = “Hello World!“; ,【返回】,4.2.4 HyperLink,Target属性取值： _blank：在新窗口显示。 _parent：在父窗口显示。 _self：在同一个窗口显示 _top(默认值)：在整个浏览器窗口显示。,武汉科技大学,注意LinkButton与HyperLink区别,二者均可在网页上创建超链接，外观相似。 HyperLink使用NavigateURL属性，LinkButton使用PostBackUrl属性来实现链接。 LinkButton功能与HyperLink不同(如不支

7、持Click事件等)。,【返回】,4.2.5 DropDownList,DropDownList控件实质是列表项（ListItem）容器，每个列表项对象都带有自己的属性，列表项可以通过手动或编程方式添加。,DropDownList控件只能单选,手动添加列表项Items属性,DropDownList示例,上海武汉广州获取选中项： Response.Write(DropDownList1.SelectedIndex+“); Response.Write(DropDownList1.SelectedItem + “); Response.Write(DropDownList1.SelectedVal

8、ue + “); 设置选中项： DropDownList1.SelectedIndex = 2; Response.Write(DropDownList1.SelectedValue);,SelectedItem.Value,或 SelectedItem.Text,SelectedIndexChanged事件,当选择项发生改变时，触发该事件。 配合AutoPostBack=true自动产生向服务器回送的操作。,示例：在页面中显示DropDownList控件的选择项。上海武汉protected void DropDownList1_SelectedIndexChanged(object send

9、er, EventArgs e) if ( DropDownList1.SelectedIndex -1 ) Response.Write(DropDownList1.SelectedItem.Text); ,练习,参考,友情链接武汉科技大学湖北工业大学protected void DropDownList1_SelectedIndexChanged() int str = int.Parse(DropDownList1.SelectedItem.Value);switch (str) case 1: Response.Redirect(“http:/“); break;case 2: Res

10、ponse.Redirect(“http:/“); break; ,编程控制Items重要属性和方法,DropDownList1.Items.Count：获取列表项总数 DropDownList1.Items.Add(项目名)：添加一个新项目 DropDownList1.Items.Remove(项目名)：删除指定项目 DropDownList1.Items.Insert(索引值, 项目名)：在指定索引位置添加一个新项目 DropDownList1.Items.RemoveAt(索引值)：删除指定索引项 DropDownList1.Items.Clear()：清除所有项目,示例1遍历,for

11、(int i = 0; i “); 或者： foreach(ListItem s in DropDownList1.Items)Response.Write(s.Text+“);,示例2清除,for (int i = 0; i = 0; i-)DropDownList1.Items.RemoveAt(i); 清除3： DropDownList1.Items.Clear();,【返回】,4.2.6 ListBox,ListBox控件与DropDownList控件基本相同，但ListBox控件的项目可多选。,如果列表控件只允许一个选项，则此属性可获取该选定项。 如果列表控件允许多个选项，则此属性可

12、获取索引最小的选定项。,列表项Items重要属性和方法,ListBox1.Items.Count：获取列表项总数 ListBox1.Items.Add(项目名)：添加一个新项目 ListBox1.Items.Remove(项目名)：删除一个指定的项目 ListBox1.Items.Insert(索引值, 项目名)：在指定索引位置添加一个新项目 ListBox1.Items.RemoveAt(索引值)：删除指定索引项 ListBox1.Items.Clear()：清除所有项目,示例,示例1：为ListBox添加列表项。for ( int i = 0; i 10; i+ ) ListBox1.It

13、ems.Add(“项目“+i.ToString() ); 示例2：显示ListBox多个选项。,参考,protected void ListBox1_SelectedIndexChanged( ) String Msg = “选中项目:“ + “;for (int i = 0; i “;Response.Write(Msg); ,如何用foreach改写,参考,foreach(ListItem li in ListBox1.Items) if (li.Selected = true) Msg += li.Text + “; ,练习,参考,右移1项： if (ListBox1.SelectedI

14、ndex -1) ListBox2.Items.Add(ListBox1.SelectedItem.Text);ListBox1.Items.RemoveAt(ListBox1.SelectedIndex); 右移多项：for (int i = 0; i ListBox1.Items.Count; i+) if (ListBox1.Itemsi.Selected) ListBox2.Items.Add(ListBox1.Itemsi.Text);ListBox1.Items.RemoveAt(ListBox1.SelectedIndex); 右移所有项： for (int i = 0; i L

15、istBox1.Items.Count; i+) ListBox2.Items.Add(ListBox1.Itemsi.Text); ListBox1.Items.Clear();,【返回】,4.2.7 CheckBox,选择的结果为bool型. 当选中状态发生改变时，会触发CheckedChanged事件。,示例,示例, 测试 protected void CheckBox1_CheckedChanged(object sender, EventArgs e) Label1.Font.Bold = !Label1.Font.Bold; protected void CheckBox2_Che

16、ckedChanged(object sender, EventArgs e) Label1.Font.Italic = !Label1.Font.Italic; protected void CheckBox3_CheckedChanged(object sender, EventArgs e) if(CheckBox3.Checked) Label1.ForeColor = System.Drawing.Color.Red;else Label1.ForeColor = System.Drawing.Color.Black; ,【返回】,4.2.8 CheckBoxList,CheckBo

17、xList控件是一组被封装在一起的CheckBox控件集合，可以通过编辑Items属性手工设置选择项，操作方法同DropDownList控件。 当选中状态发生改变时会触发SelectedIndexChanged。,示例获取多项值,参考程序,足球篮球排球音乐舞蹈protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e) string Msg = “您的个人爱好是：“;for (int i = 0; i “; Label1.Text = Msg; ,【返回】,4.2.9 RadioButton,示例,p

18、rotected void RadioButton1_CheckedChanged(object sender, EventArgs e) Label1.Font.Bold = true; protected void RadioButton2_CheckedChanged(object sender, EventArgs e) Label1.Font.Bold = false; ,【返回】,4.2.10 RadioButtonList,示例1,参考,中国美国俄罗斯法国protected void RadioButtonList1_SelectedIndexChanged(object sen

19、der, EventArgs e) Response.Write(“你选中了“+RadioButtonList1.SelectedItem.Text);,示例2,参考,中国美国俄罗斯法国,参考,protected void CheckBox1_CheckedChanged(object sender, EventArgs e) if (CheckBox1.Checked = true)RadioButtonList1.RepeatLayout = RepeatLayout.Flow;elseRadioButtonList1.RepeatLayout = RepeatLayout.Table;

20、protected void CheckBox2_CheckedChanged(object sender, EventArgs e) if (CheckBox2.Checked = true)RadioButtonList1.RepeatDirection = RepeatDirection.Horizontal;elseRadioButtonList1.RepeatDirection = RepeatDirection.Vertical; ,【返回】,4.2.11 Image,【返回】,4.2.12 ImageMap,ImageMap控件可以创建一个图像，该图像含有多用户可以单击的热区，每

21、个热区都可以是一个单独的超链接或回送事件。,热区2,热区1,ImageMap控件组成,两个部分组成：(1) 第一个部分是要显示的图像(2) 第二个部分是热区控件集合，对于每个热区需要设置位置和大小坐标。,HotSpot集合编辑器,圆形热区 矩形热区 多边形热区,HotSpot集合编辑器,HotSpotMode： NotSet/Navigate/PostBack/InactiveNavigateUrl： 单击HotSpot对象时导航至的URLPostBackValue： 单击HotSpot时传递的HotSpot对象名称,示例,【返回】,4.2.13 Table,Table控件包含TableRow

22、(行)和TableCell(单元格)两个子控件。 一个或多个TableCell控件构成一个TableRow控件； 一个或多个TableRow控件构成一个Table控件。,Table,TableRow,TableCell,Table主要属性,TableRow集合编辑器,TableRow主要属性,TableCell集合编辑器,TableCell主要属性,示例1：一个简单的表格,学号姓名专业2005001wustzzcs,阅读,protected void Page_Load(object sender, EventArgs e) int rows = 2, cells = 2;for (int i

23、 = 0; i rows; i+) TableRow r = new TableRow();for (int j = 0; j cells; j+) TableCell c = new TableCell();c.Text = “Row “ + i.ToString() + “,Col “ + j.ToString();r.Cells.Add(c); Table Table1 = new Table();Table1.Rows.Add(r);Table1.GridLines = GridLines.Both;Table1.BorderWidth = 1;Page.Controls.Add(Ta

24、ble1); ,示例2：动态生成表格,protected void Page_Load(object sender, EventArgs e) int rows = 2, cells = 2;for (int i = 0; i rows; i+) TableRow r = new TableRow();for (int j = 0; j cells; j+) TableCell c = new TableCell();c.Text = “Row “ + i.ToString() + “,Col “ + j.ToString();r.Cells.Add(c); Table Table1 = ne

25、w Table();Table1.Rows.Add(r);Table1.GridLines = GridLines.Both;Table1.BorderWidth = 1;Page.Controls.Add(Table1); ,动态地创建一个表包含三个步骤: (1) 创建TableCell对象，并设置Text属性； (2) 创建TableRow，并将创建的TableCell对象添加到TableRow的Cells集合中； (3) 将TableRow添加到Table的Rows集合中。 对表中的各行重复此过程。,【返回】,4.2.14 BulletedList,DisplayMode取值：Text(

26、文本/默认); HyperLink(超链接); LinkButton(链接按钮),BulletSytle取值： Numbered(数字序号)、LowerAlpha(序号为小写字母)、Disc(实心圆点序号)、CustomImage(序号为自定义图像)等.,Display Mode示例,.NET架构J2EE架构C#和Java ,武汉科技大学湖北工业大学 ,使用BulletImageUrl属性为项目符号指定自定义图像，必须将BulletStyle属性设置为CustomImage,将DisplayMode设置为HyperLink值就可将列表内容显示为超链接，同时ListItem使用Value属性指定

27、超链接定位到的URL。,BulletedList的Click事件,在BulletedList控件的DisplayMode=LinkButton模式下，并BulletedList控件中的某项被点击时触发。 触发时将被点击项在所有项目列表中的索引号(从0开始)作为传回参数传回服务器端。,【返回】,protected void BulletedList1_Click(object sender, BulletedListEventArgs e) switch(e.Index) case 0: Response.Write(“单击“ + BulletedList1.Itemse.Index.Text

28、+ “按钮“); break;case 1: Response.Write(“单击“ + BulletedList1.Itemse.Index.Text + “按钮“); break; ,4.2.15 HiddenField,主要属性：Value示例：,【返回】,protected void Button1_Click(object sender, EventArgs e) HiddenField1.Value =“保存的输入值=“+ TextBox1.Text; protected void Button2_Click(object sender, EventArgs e) Response

29、.Write(HiddenField1.Value); ,4.2.16 Calendar,Calendar控件的外观样式,也可使用“自动套用格式”对话框对Calendar样式进行设置,重要属性,关于DateTime结构,属性,关于DateTime结构,方法,示例1,基本用法,protected void Page_Load(object sender, EventArgs e) /获取当前日期：TextBox1.Text = Calendar1.TodaysDate.ToLongDateString(); 或者 TextBox1.Text = DateTime.Today.ToLongDate

30、String(); protected void Button1_Click(object sender, EventArgs e) /获取选中的日期TextBox1.Text = Calendar1.SelectedDate.ToShortDateString(); ,Calendar重要事件,SelectionChanged：当用户单击日期选择器选择一天、一周或整月时发生。,示例2示例1的改进,SelectionChanged事件编程 ,protected void Calendar1_SelectionChanged(object sender, EventArgs e) TextBox

31、1.Text = Calendar1.SelectedDate.ToShortDateString(); ,示例3,如何设置当前被选中的日期(默认情况不选中),方法2：编程方法(会影响SelectionChanged事件) (1) Calendar1.SelectedDate = Calendar1.TodaysDate; (2) Calendar1.SelectedDate=DateTime.Parse(“2009-11-23“); (3) Calendar1.SelectedDate = DateTime.Today;,方法1：设置SelectedDate属性：如“2009-11-23“,

32、阅读程序,DateTime tomorrow = DateTime.Today.AddDays(1); Calendar1.TodaysDate = tomorrow; Calendar1.SelectedDate = Calendar1.TodaysDate; Response.Write(Calendar1.SelectedDate.Day.ToString()+“);,示例4 SelectionMode,多日期的获取,protected void Calendar1_SelectionChanged(object sender, EventArgs e) String ds = “The

33、 selected date(s):“ + “;foreach (DateTime day in Calendar1.SelectedDates) ds += day.ToShortDateString() + “; Response.Write(ds); ,【返回】,4.2.17 AdRotator,在页面中随机并循环显示一组广告图片，当用户点击广告时，系统将跳转到指定目标URL。,AdvertisementFile文件格式,pic1.gifhttp:/武汉科技大学90edu ,广告显示的加权频率值，该值越大，广告显示的频率越大。,广告的类别。使用KeywordFilter属性可对广告进行筛

34、选,【返回】,4.2.18 FileUpload,FileUpload控件提供了SaveAs(string)方法，用于将用户上传的文件保存到Web服务器的指定位置,示例,protected void Button1_Click(object sender, EventArgs e) string saveDir = “images“; /指定的文件夹要存在string appPath = Request.PhysicalApplicationPath;if (FileUpload1.HasFile) string savePath = appPath + saveDir +FileUpload

35、1.FileName;FileUpload1.SaveAs(savePath);Response.Write(“上传成功！“);elseResponse.Write(“上传失败！“); ,【返回】,4.2.19 Wizard,Wizard控件使用多个步骤来描绘用户操作过程； 用户可在各个步骤之间前后移动，每个步骤都是一个WizardStep控件。,WizardStep集合编辑器,StepType：获取或设置步骤的类型 Auto(默认)、Complete、Finish、Start和Step,示例,学号姓名专业,FinishButtonClick事件,当单击“完成”按钮时发生，一般用于对最终数据进

36、行收集处理。,protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e) Response.Write( “学号:“+TextBox1.Text +“ 姓名:“ +TextBox2.Text+ “ 专业:“+TextBox3.Text); ,【返回】,4.2.20 XML,示例将XML文档内容以表格形式显示,假设要显示的XML文档为stu.xml； 样式表文件为stutable.xsl。,stu.xml：小明18小丽17,stutable.xsl：,方法1：采用DocumentSour

37、ce和ThansformSource属性：方法2： 采用Document和Transform属性动态绑定： System.Xml.XmlDocument doc = new System.Xml.XmlDocument(); doc.Load(Server.MapPath(“stu.xml“); System.Xml.Xsl.XslTransform trans=new System.Xml.Xsl.XslTransform(); trans.Load(Server.MapPath(“stutable.xsl“); Xml1.Document = doc; Xml1.Transform = t

38、rans;,【返回】,4.2.21 View和MultiView,View控件只能放置在MultiView控件内部; 在MultiView控件中，一次只能将一个View控件定义为活动视图，只有活动视图会呈现到客户端。,示例,实现多个View控件在MultiView控件内的切换。,View1,View2,View3,指定第一个View为活动视图,View内部的控件,protected void NextButton_Command(object sender, EventArgs e) MultiView1.ActiveViewIndex += 1; protected void BackBut

39、ton_Command(object sender, EventArgs e) MultiView1.ActiveViewIndex -= 1; protected void FinishButton_Command(object sender, EventArgs e) Response.Write(“结束啦！“); ,【返回】,4.2.22 Panel,该集合提供add、remove、clear等方法来处理子控件,示例,要生成的TextBox个数：012,protected void Page_Load(object sender, EventArgs e) if (Check1.Chec

40、ked) Panel1.Visible = false;else Panel1.Visible = true;int numtexts = int.Parse(DropDown1.SelectedItem.Value);for (int i = 1; i = numtexts; i+) TextBox t = new TextBox();t.Text = “TextBox“ + (i).ToString();t.ID = “TextBox“ + (i).ToString();Panel1.Controls.Add(t); ,【返回】,4.2.23 PlaceHolder,示例： Button

41、myButton = new Button(); myButton.Text = “确定“; PlaceHolder1.Controls.Add(myButton);,【返回】,4.2.24 Substitution,Substitution控件指定输出缓存网页上免于缓存的部分，在此位置，会检索动态内容，并以动态内容替换Substitution控件。,Substitution控件执行时，会调用一个返回字符串的方法，该方法返回的字符串即为要在页中的Substitution控件的位置上显示的内容。 使用MethodName属性指定要在Substitution控件执行时调用的回调方法的名称，指定的回

42、调方法必须是包含Substitution控件的页或用户控件的静态方法。 该回调方法接受HttpContext 参数并返回字符串。, .void Page_Load(object sender, System.EventArgs e) Label1.Text = DateTime.Now.ToString(); public static string GetCurrentDateTime (HttpContext context) return DateTime.Now.ToString (); 未缓存部分：缓存部分： ,运行结果,【返回】,Substitution控件内容会及时更新(未缓存)

43、,Label控件内容10秒之后才更新(使用缓存内容),4.2.25 Literal,PassThrough：Text属性的全部内容不经任何修改就传递给浏览器。Encode：Text属性的内容在呈现前会转换为HTML编码字符串。Transform：Text属性的呈现行为取决于要呈现的标记的类型。如果在支持HTML或XHTML的浏览器上呈现，Transform会产生与PassThrough相同的行为。,示例,Hello“ Mode=“PassThrough“ Hello“ Mode=“Encode“,【返回】,4.2.26 Localize,Localize控件与Literal控件完全相同。 Label控件允许向显示的文本应用样式，而Localize控件则不允许这样做。,【完】,