网页设计控件.ppt

1、网页设计控件,服务器控件概述 HTML服务器控件 标准控件 高级控件,服务器控件分类,在创建ASP.NET网页时，可以使用以下类型的控件： 1.HTML服务器控件：HTML服务器控件属于HTML元素。 2.Web服务器控件：这些控件比HTML服务器控件具有更多内置功能。Web服务器控件与HTML服务器控件相比更为抽象，因为其对象模型不一定反映HTML语法。 3.验证控件：这类控件用来验证用户的输入。 4.用户控件：使用创建 ASP.NET网页的相同技术创建可重复使用的自定义控件。,Web服务器控件,标准的Web服务器控件：包括最常用的控件，这类控件在网页中占90。主要是指传统的Web窗体控件。

2、 数据控件：这类控件用来链接数据源。该类控件可细分为两种类型：数据源控件和数据绑定控件。 导航控件：与站点导航数据结合，实现站点导航功能。 登录控件：为Web应用程序提供可靠完整的登录解决方案。,服务器控件的创建,在设计视图中创建服务器控件 在源视图中创建服务器控件 ,设置控件的属性,设置控件的属性将定义其外观和行为。有两种方式设置控件属性： 在“设计”视图中，选择控件，然后在“属性”窗口中设置属性。 在“源”视图中，在控件的元素标记中置入插入点，然后在“属性”窗口中设置属性。,【例 35】, ,服务器控件的基本属性,服务器控件的标识,利用每个服务器控件的id属性和name属性标识该控件，对它

3、进行操作，如下例。 void page_load(object Src,EventArgs e) Label1.Text = 欢迎你的到来; ,服务器控件事件,可以为Web服务器控件创建事件处理程序。如在ASP.NET页面上添加一个按钮，然后为该按钮的Click事件编写事件处理程序。 与传统HTML页或基于客户端的Web应用程序中的事件相比，由ASP.NET服务器控件引发的事件的工作方式稍有不同，因为与服务器控件关联的事件是在客户端触发的，但是由ASP.NET页在服务器上处理的。,服务器控件的基本事件,【例 36】,void Button1_click(object sender, Event

4、Args e) Label2.Text = TextBox1.Text + Label2.Text; ,HTML控件,在创建站点时，有时对某些控件不需要服务器端做任何事。在这种情况下，只是想在页面上添加简单的静态HTML元素。如只是决定网页上元素的位置或提供一个容器给一组元素。HTML控件工具箱中包含一系列拖放控件，如Input、Table控件和div等，这些HTML控件对应着标准HTML元素。,HTML服务器控件,HTML服务器控件派生自命名空间System.Web.UI.HtmlControls。默认情况下，服务器无法使用纯粹的HTML控件，只有将HTML元素转换为HTML服务器控件，才将

5、其公开为可在服务器上编程的元素。,HTML服务器控件,HTML服务器控件具有以下几个重要特点： 可在服务器上使用面向对象技术对其进行编程控制，这为编程开发提供了便利。 提供了一组事件，可以为事件编写事件处理程序。 自动维护控件状态。在页面窗体到服务器端往返期间，用户在HTML服务器控件中输入的值将在页面回传中自动维护。 与验证控件进行交互。便于验证用户是否在控件输入了适当的信息。 允许在HTML服务器控件中自定义属性。开发人员可以将任何需要的属性添加到HTML服务器控件的属性集中，页框架将读取并呈现它们而不更改其他任何功能。,HTML输入控件,工具箱的“HTML”选项卡上提供多个基于HTML

6、input元素的控件： Input (Text) 控件：input type=text元素 Input (Password) 控件：input type=password元素 Input (Button) 控件：input type=button元素 Input (Submit) 控件：input type=submit元素 Input (Reset) 控件：input type=reset元素 Input (Checkbox) 控件：input type=checkbox元素 Input (Radio) 控件：input type=radio元素 Input (File) 控件：input

7、type=file元素 Input (Hidden) 控件：input type=hidden元素,【例 37】,输入姓名： 输入密码： ,【例 37】,protected void Submit1_ServerClick(object sender, EventArgs e) if (Password1 .Value=asp) span1.InnerHtml =密码正确; else span1.InnerHtml =密码不正确; protected void Reset1_ServerClick(object sender, EventArgs e) Text1.Value = ; Pass

8、word1.Value = ; protected void Button1_ServerClick(object sender, EventArgs e) span1.InnerHtml = 你单击了按钮; ,【例 38】,请选择您的性别： 男 女 请选择您的爱好： 足球 篮球 乒乓球,【例 38】,protected void Submit1_ServerClick(object sender, EventArgs e) string str=您的爱好是：; if (chk1.Checked) str += 足球 ; if (chk2.Checked) str += 篮球 ; if (ch

9、k3.Checked) str += 乒乓球 ; span2 .InnerHtml = str; if (Radio1.Checked) span1.InnerHtml = 您是男生; if (Radio2.Checked) span1.InnerHtml = 您是女生; ,【例 39】, ,【例 39】,void Button1_ServerClick(object sender, EventArgs e) File1.PostedFile.SaveAs (c:uploadupload.jpg); span1.InnerHtml= 上传完毕; ,【例 310】, 输入字符串： 这里显示的是隐

10、藏的字符串,【例 310】,void Page_Load(object sender, EventArgs e) if (Page.IsPostBack) Span1.InnerHtml = 你上次输入的值是： + Hidden1.Value + ; void Submit1_ServerClick(object sender, EventArgs e) Hidden1.Value = Text1.Value; ,【例 311】,您有什么问题可以留言: ,【例 311】,protected void Submit1_Click(object sender, EventArgs e) span1

11、.InnerHtml = 您的留言如下: + TextArea1.Value; ,Select控件,Select控件是一个下拉列表控件。还可用于数据绑定。 Select控件的格式如下： Item 1 Item 2 Item 3 ,【例 312】,void Button1_ServerClick(object sender, EventArgs e) int numrows = Convert.ToInt32(Select1.Value); int numcells = Convert.ToInt32(Select2.Value); for (int j = 0; j numrows; j+)

12、HtmlTableRow row = new HtmlTableRow(); for (int i = 0; i numcells; i+) HtmlTableCell cell = new HtmlTableCell(); cell.Controls.Add(new LiteralControl(行 +j+, 列+i ); row.Cells.Add(cell); Table1.Rows.Add(row); ,Image控件,Image控件是一个图片控件。通过该控件可以设置图片的位置、宽、高、边界宽度、鼠标移过后的提示文字等属性。 Image控件的主要属性有： Align属性：设置或取得文字

13、环绕时，图片放置的位置。 Alt属性：设置或取得说明文字。 Border属性：设置或取得边框的宽度。 Height属性：设置或取得图片的高度。 Width属性：设置或取得图片的宽度。 Src属性：设置或取得图片的URL地址。,Label控件,Label控件主要用于文本的显示，在网页的固定位置显示文本。 Label控件的格式如下： / options表示控件的属性。, protected void Page_Load(object sender, EventArgs e) Label1.Text=“南昌大学共青学院欢迎您！”; ,TextBox控件,TextBox控件是一个可以输入单行文本、密码

14、或者多行文本的控件。默认的情况下TextBox控件的TextMode属性是SingleLine，可以修改为MultiLine或Password。 TextBox控件的格式： ,TextBox控件常用的属性和事件,【例 313】,在文本框中输入内容,将输入的内容在标签控件中显示出来: ,【例 313】,protected void Button1_Click(object sender, EventArgs e) Label1.Text = Server.HtmlEncode(TextBox1.Text); , 用户名： 密码： ,protected void Button1_Click(obj

15、ect sender, System.EventArgs e) string name=TextBox1.Text; string psd=TextBox2.Text; bool flag=false; if (name!= ,按钮控件,标准控件中包含三种类型的按钮：标准命令按钮、超链接样式按钮和图像按钮。 当用户单击这三种类型按钮中的任何一种时，都会向服务器提交一个窗体，当前页被提交给服务器并在那里进行处理。可为下列事件之一创建事件处理程序： 页的Page_Load事件：因为按钮总是将页发送给服务器，所以该方法总是在运行。如果只提交相应窗体，单击哪个按钮并不重要，则使用Page_Load事件

16、。 Click事件：当了解哪个按钮被单击很重要时，编写该事件的事件处理程序。,【例 314】, ,【例 315】, void ImageButton1_Click(object sender, ImageClickEventArgs e) Label1.Text = 你单击了图像按钮。您的坐标是 + X为+e.X +，Y为+ e.Y; , Label ,protected void Page_Load(object sender, System.EventArgs e) Label1.Text=练习使用BUTTON按钮控件，请单击CLICK ME按钮; Label1.BackColor=Sys

17、tem.Drawing.Color.DarkOrange; protected void Button1_Click(object sender, System.EventArgs e) Label1.Text=单击按钮之后; Label1.BackColor=System.Drawing.Color.DarkGreen; Button1.Text=OK; Button1.Enabled=false; ,CheckBox控件,CheckBox和CheckBoxList控件都是为用户提供了一种在二选一（如真/假、是/否或开/关）选项之间切换的方法。当用户选中这个控件时，表示输入的是true，当没

18、有选中这个控件，表示输入的是false。 CheckBox控件的格式如下： / Options表示控件的属性或事件,CheckBox控件属性和事件,【例 316】, void Button1_Click(object sender, EventArgs e) if (CheckBox1.Checked = true) Label1.Text = 复选框1被选中; else Label1.Text = 复选框1未被选中; ,【例 317】, void CheckBox1_CheckedChanged(object sender, EventArgs e) if (CheckBox1.Checke

19、d) Label1.Text = 复选框1被选中; else Label1.Text = 复选框1未被选中; ,CheckBoxList控件,CheckBoxList控件是一个CheckBox控件组，当需要显示多个CheckBox控件，并且对于所有控件的处理方式都相似时，使用这种控件就十分方便。 CheckBoxList控件的格式如下： ,【例 318】,选择你喜爱的球类运动： 篮球 足球 乒乓球 羽毛球 ,【例 318】,protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e) int i; s

20、tring str = 您喜爱的球类运动是：; for (i = 0; i ; Label1.Text = str; , 您关注的地区： 您关注的方向： 教育 医药 出版 零售 餐饮 娱乐 旅游 I T 科技 ,protected void Button1_Click(object sender, System.EventArgs e) string ss=您关注的地区是： ; if(CheckBox1.Checked=true) ss+=CheckBox1.Text; if(CheckBox2.Checked=true) ss+= +CheckBox2.Text; if(CheckBox3.

21、Checked=true) ss+= +CheckBox3.Text; ss+=您关注的方向是： ; for (int i=0;iCheckBoxList1.Items.Count;i+) if(CheckBoxList1.Itemsi.Selected=true) ss+=CheckBoxList1.Itemsi.Value+ ; Label1.Text=ss; ,RadioButton控件,RadioButton和RadioButtonList控件为用户提供从互相排斥的选项中进行选择的方法。RadioButton控件与CheckBox控件相似，但在使用时通常与其他RadioButton控件

22、组成一组，以提供一组相互排斥的选项，在一组中，每次只能选择一个单选按钮。 RadioButton控件格式如下： / Options表示控件的属性或事件。,RadioButton的属性和事件,【例 319】,选择您从上海到北京的交通工具： 火车 汽车 飞机 ,【例 319】,protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) Label1.Text = 您选择的交通工具是 + RadioButtonList1.SelectedValue; , 性别： 学历： 小学 初中 高中 中专 专科

23、 本科 硕士 博士 博士后 ,protected void Button1_Click(object sender, System.EventArgs e) string ss=性别：; if(RadioButton1.Checked=true) ss+=RadioButton1.Text; if(RadioButton2.Checked=true) ss+=RadioButton2.Text; ss+=; 学历: ; if(RadioButtonList1.SelectedIndex-1) ss+=RadioButtonList1.SelectedItem.Text; Label1.Text

24、=ss; ,ListBox控件,ListBox控件提供的是单选或多重选择列表，允许用户从预定义的列表中选择一项或多项。使用ListBox控件时，只要改变它的SelectionMode属性值就能实现CheckBoxList控件和RadioButtonList控件的功能。 ListBox控件格式如下： , 课程列表： 您的选修课程： 操作系统 数据结构 汇编语言 网络基础 网络安全 电子商务 数据库原理 ASP编程 C#程序设计 WEB程序设计 onclick=Button1_Click ,protected void Button1_Click(object sender, System.Eve

25、ntArgs e) if(ListBox1.Items.Count!=0) if(ListBox1.SelectedIndex-1) ListBox2.Items.Add(ListBox1.SelectedItem);ListBox1.Items.Remove(ListBox1.SelectedItem); ListBox2.ClearSelection(); protected void Button2_Click(object sender, System.EventArgs e) if(ListBox2.Items.Count!=0) if(ListBox2.SelectedIndex-

26、1) ListBox1.Items.Add(ListBox2.SelectedItem);ListBox2.Items.Remove(ListBox1.SelectedItem); ListBox1.ClearSelection(); ,DropDownList控件,DropDownList控件是将选项显示为下拉列表，并从中进行单项选择。该控件类似于ListBox控件。不同之处在于它是在框中显示选定项，同时还显示下拉按钮，当用户单击此按钮时，将显示项的列表。,【例 320】, 03 04 05 06 ,【例 320】, 微机原理 数据结构 数据库 C语言 计算机网络 编译原理 ,【例 320】

27、,void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) Label2.Text = 您是： + DropDownList1.SelectedItem.Value + 级学生; void ListBox1_SelectedIndexChanged(object sender, EventArgs e) string str = ; int i; for (i = 0; i ListBox1.Items.Count; i+) if (ListBox1.Itemsi.Selected) str += ListBox1.

28、Itemsi.Value + , 请选择学校： 北京理工大学 东华理工大学 大连理工大学 江西理工大学 南昌理工大学 华中师范大学 赣南师范学院 江科技大学西 Label ,protected void Page_Load(object sender, System.EventArgs e) / 在此处放置用户代码以初始化页面 if(!IsPostBack) Label1.Text=您没有选择学校！; else Label1.Text=您选择学校是：+DropDownList1.SelectedItem.Text; ,HyperLink控件,HyperLink控件主要用于实现超文本链接，使用户

29、可以在应用程序中在页之间移动。可以以文本方式或图形方式呈现HyperLink控件。与大多数服务器控件不同的是，当用户单击HyperLink控件时并不会在服务器代码中引发事件。 HyperLink控件的格式： text / Options表示控件的属性。,HyperLink控件常用的属性,【例 321】,搜狐网站,Table控件,Table控件是用来在Web窗体页上创建通用表的。每个Table控件包含一个或多个TableRow对象。依次的，每个TableRow对象包含一个或多个TableCell对象。 创建Table控件包括两个步骤：添加表本身，然后再分别添加行和单元格。如果是在设计时添加行和列

30、来创建静态表，最好使用HTML表元素，而不使用Table服务器控件，因为HTML的表元素更简单。如果希望在运行时通过代码向表中添加行和列时，可以使用Table服务器控件。,【例 322】, void Button1_Click(object sender, System.EventArgs e) int rowCnt, rowCtr, cellCtr, cellCnt; rowCnt = int.Parse(TextBox1.Text); cellCnt = int.Parse(TextBox2.Text); for (rowCtr = 1; rowCtr = rowCnt; rowCtr+)

31、 TableRow tRow = new TableRow(); Table1.Rows.Add(tRow); for (cellCtr = 1; cellCtr = cellCnt; cellCtr+) TableCell tCell = new TableCell(); tCell.Text = Row +rowCtr +, Cell +cellCtr; tRow.Cells.Add(tCell); ,AdRotator控件,AdRotator控件提供了一套快速广告发布系统。该控件会随机地显示所提供的广告图像，单击这些图像，可链接到指定的URL中。每次刷新页面都将更改显示的广告，广告的显示

32、频率是由该广告的权重决定的。 AdRotator控件从有一条或多条广告记录的数据源读取广告信息。通常将广告信息存储在一个 XML 文件中，然后将AdRotator控件绑定到该文件。,用于广告文件的XML文件,将广告条图像位置、用于重定向的URL等广告信息存储在一个XML文件中。,AdRotator控件,AdRotator控件格式如下： ,【例 323】, /image/hexun.gif 和讯 门户 20 /image/sina.gif 新浪 门户 80 ,【例 323】, 当前文件的图片格式是： 链接到的网址是： void AdRotator1_AdCreated(object sender

33、, AdCreatedEventArgs e) Label1.Text = e.ImageUrl; Label2.Text = e.NavigateUrl; ,Calendar控件,Calendar控件就是日历控件，负责在页面上显示日历并接受用户选择日期的操作。当需要在网页中显示日期或需要用户输入或确认日期时，就需要这样一个控件。 使用Calendar控件可以执行以下操作： 显示和选择日期 启用日期选定 自定义日历的外观 捕获用户与Calendar控件之间的交互 在Calendar控件中显示数据库信息,Calendar控件,日期获取模式 Calendar控件有四种基本日期获取模式，以指定用户在

34、控件中选定日、周或整个月份。通过控件的SelectionMode属性来实现：,【例 324】, void Page_Load(Object Sender, EventArgs e) Calendar1.SelectionMode = (CalendarSelectionMode)DropDownList1.SelectedIndex; if(Calendar1.SelectionMode = CalendarSelectionMode.None) Calendar1.SelectedDates.Clear(); protected void click(object sender, Event

35、Args e) Label1.Text = 当前选择的日期是 + Calendar1.SelectedDate.ToLongDateString (); ,Calendar控件的外观属性,Calendar控件的样式,自定义特别日,日历控件还可以定义特别日的外观和显示，如节日、纪念日等。可以包括以下操作： 突出显示某些日。例如，以不同的颜色显示假日。 向日显示中添加信息，例如约会或事件信息。 自定义用户可以单击以选择某日的链接文本。 自定义特别日利用的是Calendar控件的DayRender事件。,【例 325】, ,【例 325】,void DayRender(object source,

36、DayRenderEventArgs e) if ( !e.Day.IsWeekend) e.Cell.BackColor = System.Drawing.Color.Yellow; if (e.Day.Date.Day = (14) e.Cell.Controls.Add(new LiteralControl(开会); e.Day.IsSelectable = true; else e.Day.IsSelectable = false; ,【例 325】,protected void Calendar1_SelectionChanged(object sender, EventArgs e

37、) int i; i = Calendar1.SelectedDates.Count; if (i = 1) Label1.Text = 当前选择的日期是： + Calendar1.SelectedDate.ToLongDateString(); else Label1.Text = 当前选择的日期是： + Calendar1.SelectedDates0 + 到 + Calendar1.SelectedDatesi - 1; ,【例 326】, void Page_Load(object sender, EventArgs e) holidays9, 10 = 教师节; holidays10

38、, 1 = 国庆节; holidays12, 25 = 圣诞节; holidays1, 1 = 元旦; ,【例 326】,void DayRender(object sender, DayRenderEventArgs e) string aHoliday; DateTime theDate = e.Day.Date; aHoliday = holidaystheDate.Month, theDate.Day; if (aHoliday != null) Label aLabel = new Label(); aLabel.Text = + aHoliday; e.Cell.Controls.

39、Add(aLabel); e.Cell.BackColor = System.Drawing.Color.Gainsboro; if (e.Day.IsOtherMonth) e.Cell.Controls.Clear(); ,MultiView和View控件,View控件是视图控件，MultiView控件是多视图控件，两个控件都属于容器控件，通常一起使用，提供一种可以方便显示信息的替换视图的方式。 View和MultiView控件格式如下： ,【例 327】, 输入您的姓名： 输入您的学号： ,【例 327】,public enum searchtype name = 0, number =

40、 1 void RadioButton_CheckedChanged(object sender,EventArgs e) if (RadioButton1.Checked) MultiView1.ActiveViewIndex = (int); else if (RadioButton2.Checked) MultiView1.ActiveViewIndex = (int)searchtype.number; ,ImageMap控件,ImageMap控件是图片地图控件，可以在一副图片上设置很多热区。ImageMap控件格式如下： ImageMap 控件主要包括I

41、mageUrl、HotSpotMode和HotSpots等属性，以及一个Click事件。,【例 328】, ,【例 328】,void ImageMap1_Click(object sender, ImageMapEventArgs e) int sinacount = (ViewStatesinacount != null) ? (int)ViewStatesinacount : 0); int hexuncount=(ViewState hexuncount!=null )?(int)ViewState hexuncount:0); if (e.PostBackValue .Contain

42、s (sina) sinacount +=1; Label1 .Text =新浪现在的投票数是：+sinacount+ +和讯现在的投票数是：+hexuncount; ,【例 328】,else if (e.PostBackValue.Contains (hexun) hexuncount +=1; Label1.Text = 新浪现在的投票数是： + sinacount + +和讯现在的投票数是： + hexuncount; ViewState sinacount=sinacount ; ViewState hexuncount=hexuncount ; ,Wizard控件,Wizard控件主要实现以下功能： 能将内容复杂的信息收集工作，分隔成多个小的、具有一定逻辑性的步骤。 实现收集数据的功能。 实现线性和非线性导航。 Winzard控件格式如下： ,Wizard控件的StepType属性,【例 329】, 你喜欢的颜色： 你喜欢的样式： ,【例 329】,void Page_Load(Object sender, System.EventA