服务器控件的基本知识.ppt

服务器控件的基本知识,本章内容,了解和使用各种服务器控件深入体会服务器控件带来的软件编程思想使用验证控件确保输入数据的正确性使用导航控件方便地创建导航系统使用用户控件减少代码提高程序的重用性,本章重点,ASP.NET2.0中的各种服务器控件验证控件导航控件用户控件,本章学习目标,本章将围绕ASP.NET页面内容，主要介绍Web服务器控件。通过本章学习，应掌握以下内容：了解HTML服务器控件掌握常用的Web服务器控件的使用方法掌握验证控件、导航控件及用户控件的使用方法,ASP.NET服务器控件,3.1服务器控件的基本知识3.2服务器控件的事件模型3.3HTML服务器控件3.4标准控件3.5动态生成控件3.6验证控件3.7导航控件3.8用户控件3.9本章小结,3.1服务器控件的基本知识,Web窗体是一个容器类对象，由代码、标记、正文文本和服务器控件构成。服务器根据页面请求，结合所有控件的输出，生成正确的HTML标记语言向客户提供在浏览器中显示的页面。在ASP.NET页面元素中，除了HTML标记外，所有控件实际上是在服务器端运行的，因此将这些控件称为服务器控件。所有的服务器控件都必须放在与标记之间。服务器控件编程的关键是runat属性，如果一个控件没有使用runat=”server”属性进行声明，则该控件被认为是纯文本，并按照先后顺序输出。如果使用了runat=”server”属性进行声明，ASP.NET在服务器上处理页面时就会生成该控件的一个实例，该控件对象实例的属性方法对程序员是透明的。每个服务器控件都有一个惟一的ID名称和一些属性、方法，以便在服务器端代码中引用它。,3.1服务器控件的基本知识,ASP.NET提供了两大类服务器控件：HTML服务器控件和Web服务器控件。HTML服务器控件与HTML标记一一对应，在每一个HTML标记属性中添加runat=”server”属性就变成了HTML服务器控件。Web服务器控件不与HTML标记对应，ASP.NET2.0提供了丰富的Web服务器控件包括标准控件、验证控件、导航控件、登录控件等类型。,3.2服务器控件的事件模型,ASP.ENT除了ASP.NET的页面事件以外，还有HTML事件、服务器控件事件等。这些事件中，有的只能由服务器处理，而在浏览器端发生的事件，有些可以由浏览器处理也可以由服务器处理。因此也可以将这两种事件称为浏览器处理事件和服务器处理事件。浏览器处理事件服务器处理事件,3.2服务器控件的事件模型,浏览器处理事件浏览器处理事件在客户端浏览器上触发，也由浏览器响应。内置于浏览器的解释器会执行该事件的处理程序，不会将该事件传至服务器，这样就可以减轻服务器的负担，处理效率也会更高。浏览器处理事件主要有：onMouseUp、onMouseDown、onMouseOver、onMouseMove、onClick、onDblClick、onKeyUp、onkeyPress、onKeyDown等事件。,3.2服务器控件的事件模型,服务器处理事件服务器处理事件在客户端浏览器引发，但浏览器并不处理它，首先要将事件的信息发送到服务器，告诉服务器处理该事件，并在服务器端执行事件处理代码，待服务器处理完毕后再返回客户端浏览器，比浏览器处理事件多了一个信息的往返过程。但是，由于服务器处理事件可以利用服务器所有的资源，可以用多种语言例如C#、VB等.NET支持的语言编写事件处理代码，因此由服务器处理的事件功能更强。浏览器处理事件与服务器处理事件的最大不同在于处理事件的方法不同。一个是在客户端浏览器进行处理，而另一个是在服务器端进行处理。,3.2服务器控件的事件模型,服务器处理事件有的事件只能由浏览器处理，如onMouseOver事件，由于这些事件发生的过于频繁，为了减轻服务器的负担，没有必要传送到服务器去处理，因此这样的事件只能由客户端浏览器来处理。有些事件虽然服务器能完成处理工作，但如果能在能由浏览器执行，则执行效率更高，功能也更强。如在客户端的事件处理程序中可以用JavaScript或VBScript语言编写的脚本，如可以通过alert()方法弹出一个消息框，也可以通过confirm()方法弹出一个确认窗口。点击确定,3.2服务器控件的事件模型,服务器处理事件ASP.NET的某些服务控件会自动生成一部分客户端代码，用来响应客户端的浏览器处理事件。为了减少事件处理过程中的信息往返次数，如文本框中的文本以及下拉列表框、单选按钮、复选按钮中的选项发生改变时，这种信息的改变并不及时发送到服务器，而是先将事件的信息保存到客户端的缓冲区中，等到下一次向服务器发送信息时，再和其它信息一起发送到浏览器。,3.3HTML服务器控件,3.3.1在页面中添加HTML服务器控件3.3.2常用的HTML服务器控件3.3.3HTML服务器控件的公有属性、方法和事件,3.3.1在页面中添加HTML服务器控件,在页面中添加HTML控件，在工具箱中选择HTML选项卡，双击所需控件或将所需的控件拖到页面中适当的位置即可。每个HTML服务器控件都有一个HTML标记与之对应。默认情况下，HTML控件属于浏览器端控件，不能被服务器使用。将HTML控件变为能够在服务器上运行的HTML服务器控件，有两种方法：一在设计视图中右击该控件，在弹出的快捷菜单中选择“作为服务器控件运行”命令；另一种方法是在源视图中，在HTML标记中加入属性runat=”server”。,3.3.2常用的HTML服务器控件,3.3.2常用的HTML服务器控件,3.4标准控件,添加到窗体中的每一个控件都会生成相应的HTML语句:或基本控件选择控件高级控件,3.4标准控件,3.4.1基本控件1.Label控件2.TextBox控件3.Button、ImageButton和LinkButton控件4.Image和ImageMap控件5.HyperLink控件6.Panel和PlaceHolder控件,1.Label控件,标签控件Label是服务器控件中最简单的控件，用于在页面上动态显示文本。语法格式如下或要显示的文本要想改变标签中显示的文字，可通过修改Text属性来实现。有两种方法：一是在标签的属性窗口中直接修改Text属性；二是通过编程方式，在程序运行过程中在标签中动态显示文本。如：Label2.Text=TextBox1.Text+您好!,2.TextBox控件（1）,文本框控件TextBox是用得最多控件之一，该控件可以用来显示数据，也可以用来接收用户输入的数据。语法格式如下：,2.TextBox控件（2）,提示：TextMode属性有3个选项：默认为SingleLine，单行文本框；MultiLine，多行文本框；Password，密码输入框。,Button控件,Button控件是最常用的按钮控件，一般用来提交表单。语法格式如下：Button按钮控件都可以接收用户的单击事件（Click），执行OnClick属性指定的事件过程来完成相应的操作。,ImageButton控件,图像按钮ImageButton控件综合了Image控件和Button控件的功能，用于创建图像外观的按钮，功能与Button控件相同，语法格式如下：提示：图像路径最好用相对路径。,LinkButton控件,LinkButton控件用来创建超链接外观的按钮，可起到超链接动作用。语法格式如下：链接文本提示：Button、ImageButton、LinkButton三种按钮都有一个PostBackUrl属性，可以将该属性设置成某个页面的URL，或其它的外部网址，单击该按钮时便可直接转向该页面。,Image控件,图像控件Image可以在页面上显示图像，通过ImageUrl属性设置要显示图像的路径及文件名。图像文件为.gif、.jpg或其它格式，可以在设计时设定，也可以在程序运行时指定，还可以将控件的ImageUrl属性绑定到数据源上。语法格式如下：,HyperLink控件,超链接控件HyperLink用来创建一个文本超链接或图片超链接。语法格式如下：提示：Target属性用来指定打开页面的窗口，其取值为：_blank，新窗口；_self，相同框架；_parent，父框架；_top，整页。Button、ImageButton、LinkButton、HyperLink区别：,Panel控件（1）,Panel控件主要是为其它控件提供容器，可以通过编程方式来生成控件以及显示隐藏控件组等，语法格式如下：其它控件利用Visible属性可以显示或隐藏一组控件。在Panel控件中，可以方便地添加或移除Panel控件内的其它控件。,Panel控件（2）,例3.2Panel控件应用示例。在页面中添加2个，在第一个Panel控件中添加3个文本框，并在属性窗口中设置TextMode属性，在第二个Panel控件中显示添加的内容，程序运行时，在文本框中输入信息，单击“确定”按钮，在Panel2中显示结果。,Panel控件（3）,protectedvoidButton1_Click(objectsender,EventArgse)Panel1.Visible=false;Panel2.Visible=true;Label1.Text=您输入的信息如下：;Label2.Text+=您的用户名：+TextBox1.Text+;Label3.Text+=您的密码是：+TextBox2.Text+;Label4.Text+=您的留言内容是：+TextBox3.Text;,PlaceHolder控件（1）,PlaceHolder控件与Panel控件类似，只作为其它控件的容器，可以动态地添加各种控件，但PlaceHolder控件本身不产生可见输出。语法格式如下：在PlaceHolder控件中，通过Controls集合的Add、Remove等方法可以方便地添加或移除PlaceHolder控件内的其它控件。例3.3在PlaceHolder控件中动态添加1个标签。,PlaceHolder控件（2）,protectedvoidPage_Load(objectsender,EventArgse)Buttonbtn=newButton();btn.Text=动态生成的按钮;PlaceHolder1.Controls.Add(btn);,3.4.2选择控件,1.RadioButton和RadioButtonList2.CheckBox和CheckBoxList3.DropDownList和ListBox控件,RadioButton控件,单选按钮控件RadioButton用于向页面中添加单选钮。语法格式如下：,Autopostback是一种机制（自动根据Web控件的一些事件，将页面自动发回服务器。在一些Web控件中，称为autopostback属性。如设置为true，当此控件的某事件发生时，将发送一个request到服器。例如：DropdownBox(Combobox)控件的属性AutoPostBack。如果我们将其设置为true，当用户在组合框中选择不同的值时，被触发的事件将发送一个request给服务器。为什么我们需要发送请求到服务器？在此情况下的网页一般是用来输入用户信息的。该网页包含两个组合框控件：国家和城市。当用户选择某国，适当的城市应该显示到另一组合框，当然这一般是从数据库加载。为实现这一要求，我们可以设置国家组合框的autopostback属性为true。如果我们这样做，当国家组合框触发了事件，那么将有一request发送给服务器，而此时，可执行一次，我们预先写好的根据国家值从数据库读取适当的城市值。,RadioButtonList控件,单选按钮组控件RadioButtonList用来创建单选按钮组。语法格式如下：显示的文字显示的文字,CheckBox控件,复选框控件CheckBox用于在页面中添加单个复选框。语法格式如下：提示：可通过Checked属性判断复选按钮是否被选中。,CheckBoxList控件,复选框组控件CheckBoxList可以创建一个可多选的组。语法格式如下：为CheckBoxList控件添加选项的操作方法与RadioButtonList控件相同。,RadioButton和CheckBox控件,提示：可以向页面添加单个RadioButton控件，并单独使用这些控件。也可以通过将多个单选按钮的GroupName属性设置成相同名称的方法，将它们归为一组。同一组中的单选按钮是互相排斥的，只能有一个按钮被选中。可以根据Checked属性判断按钮是否被选中。AutoPostBack属性结合OnCheckChanged属性可以在单选按钮被选中时立即引发OnCheckChanged属性指定的事件过程。,RadioButtonList和CheckBoxList控件,提示：RepeatColumns设置每行显示的列数。RepeatDirection用于设置按钮的排列方向。TextAlign设置标题文本的显示位置，默认值为Right。通过设置属性DataSource=“”、DataTextField=“数据源的字段”、DataValueField=“数据源的字段”可将RadioButtonList绑定到数据源。如果要想创建单选按钮组，而不是单个的单选按钮，建议使用RadioButtonList单选按钮组控件。为RadioButtonList控件添加选项也可在“源”视图中通过编写HTML代码来实现。,RadioButton和RadioButtonList控件应用示例,创建如图所示的页面，在页面中添加2个RadioButton控件用于选择学分，添加1个RadioButtonList控件用于选择课程类别，1个命令按钮和1个标签。单击“确定”按钮后，在标签中显示选定内容；单击“重置”按钮，恢复选定前的状态。,RadioButton和RadioButtonList控件应用示例,/为“确定”按钮的单击事件添加代码protectedvoidButton1_Click(objectsender,EventArgse)if(RadioButton1.Checked)Label1.Text=您选择课程是：+RadioButton1.Text;elseif(RadioButton2.Checked)Label1.Text=您选择课程是：+RadioButton2.Text;if(RadioButtonList1.SelectedIndex-1)Label1.Text+=+RadioButtonList1.SelectedValue;,CheckBox和CheckBoxList控件应用示例,创建如图所示的页面，在页面中添加1个CheckBoxList控件用于选择爱好，添加1个CheckBox控件用于改变显示方式，1个命令按钮和1个标签。当单击用于改变显示方式的复选框时，显示方式将会发生改变；“单击“确定”按钮时，将在标签中显示选定内容。,CheckBox和CheckBoxList控件应用示例,/为复选框选项改变时添加代码protectedvoidCheckBox1_CheckedChanged(objectsender,EventArgse)if(CheckBox1.Checked=true)CheckBoxList1.RepeatDirection=RepeatDirection.Horizontal;/横向排列CheckBoxList1.RepeatColumns=4;/每行显示4个选项elseCheckBoxList1.RepeatDirection=RepeatDirection.Vertical;/垂直排列CheckBoxList1.RepeatColumns=2;/每行显示2个选项,CheckBox和CheckBoxList控件应用示例,/为“确定”命令按钮添加代码protectedvoidButton1_Click(objectsender,EventArgse)stringstr=您的爱好是：;for(inti=0;i：RenderCurrentNodeLink：取值为True或False，指定是否使当前页面和其它页面一样以超链接方式显示。ParentLeverdisplayed：设置显示父节点的数量，如设置为2，则只显示当前页面前面的2个父节点。默认为-1，表示将所有节点全部展开。,SiteMapPath控件3/4,SiteMapPath控件还可以通过样式来设置链接路径的外观，样式包括：CurrentStyle：用于设置当前节点的样式。NodeStyle：用于设置所有节点使用的样式。PathSeparatorStyle：定义链接之间的分隔符的样式。RootNodeStyle：用于设置根节点的样式。此外，还可以通过自动套用格式来实现。在页面中添加SiteMapPath控件，单击控件右上角的图标，在任务列表中选择“自动套用格式”选项，在打开的自动套用格式对话框中选择一种样式，即可将选定样式应用于该控件。,SiteMapPath控件4/4,例5.2创建如图5.3所示的SiteMapPath控件应用示例程序。添加了3个SiteMapPath控件，并对控件进行属性设置。,Menu控件,Menu控件用于设置复杂的导航菜单，而无需编写任何代码。Menu控件的组成:由多个菜单项组成，菜单项有2种类型：根菜单项和子菜单项。位于最顶层的是根菜单项，一个Menu控件可以有多个根菜单项，根菜单项的下层菜单项称为子菜单项。Menu控件的排列方向：水平菜单和垂直菜单两种，可通过设置Orientation属性来实现。,Menu控件应用示例1/7,例5.3创建Menu控件应用示例程序。,Menu控件应用示例2/7,操作步骤如下：（1）添加Menu控件。在工具箱中单击“导航”选项卡，在页面中添加1个Menu控件。（2）设置菜单方向。新添加的菜单的Orientation属性为“Vertical”，默认是垂直的，可不修改。（3）添加菜单项。右击添加的菜单控件，在弹出的快捷菜单中选择“显示智能标记”“编辑菜单项”命令，打开“菜单项编辑器”对话框。,Menu控件应用示例3/7,Menu控件应用示例4/7,操作步骤如下：（4）添加根菜单项。在“菜单项编辑器”对话框中单击“添加根项”按钮，在右侧的属性列表中设置相关属性，如设置在菜单中显示文本的Text属性，将Text属性值设置为chapter1、chapter2等。（5）添加子菜单项。单击要添加子菜单项的根菜单项，如单击根项chapter3，接下来单击“添加子项”按钮，为其添加子菜单项，如“StandardControls”、“Validators”、“Navigators”等，并设置属性。接下来，再为子菜单项添加自己的子菜单。,Menu控件应用示例5/7,添加过程中可单击“移除项”按钮移除不需要的项；也可单击上移或下移按钮在同级间上移或下移菜单项；单击级别提升或按钮可将所选项的级别提升，成为其父级的同级；单击级别降低按钮可使所选项的级别降低，成为其前一个同级的子级。添加完毕后，单击“确定”按钮即可。也可为Menu菜单自动套用格式，或在属性窗口中进行格式设置。,Menu控件应用示例6/7,Menu控件应用示例7/7,其中Items属性用于设置Menu控件所有菜单项的集合。每一个子菜单都放在标记中，要注意其中的嵌套关系。,将Menu菜单绑定到数据源,Menu菜单为静态菜单，采用了直接输入菜单项的方法，也可将其绑定到其它的数据源，如XML文件，或站点地图文件等。将Menu控件绑定到站点地图文件的操作步骤如下：（1）新建页面，在页面中添加1个Menu控件。（2）在Menu控件的任务列表“选择数据源”下拉列表中选择“新建数据源”选项，打开“数据源配置向导”对话框，选择“站点地图”选项，将自动生成SiteMapDataSource数据源控件并与前面已经创建的站点地图文件Web.sitemap建立连接。,将Menu菜单绑定到站点地图文件,TreeView控件,TreeView控件用于以树形结构显示分层数据，如目录或文件目录。下面就采用树形结构显示Menu菜单中的内容。例5.4创建TreeView控件应用示例程序。添加节点、添加菜单项、添加子菜单项的方法与Menu菜单的操作相同。不同的是：在系统生成的源代码中，Menu菜单的每一个子节点都放在了标记中，要注意其中的嵌套关系。,TreeView控件应用示例,TreeView控件应用示例程序,用户控件（1）,用户控件（UserControl）是一种由用户自行开发的组合控件，通常由系统提供的可视化控件组合而成。ASP.NET2.0提供了丰富的控件，如果这些控件还不能满足应用程序的特定要求，也可以使用Web控件根据应用程序的需要自行开发控件，以实现一定的功能；另一方面，当多个页面中都包含有相同部分的用户界面时，就可以将这些相同的部分提取出来，做成用户控件的形式实现界面的重用。当页面内容需要改动时，只需修改用户控件即可，也便于站点的维护。,用户控件（2）,在用户控件中，既可以通过组合控件定义显示界面，也可以象Web窗体页一样为其编写事件处理代码。与Web窗体页一样，用户控件同样在第一次请求时被编译并存储在服务器内存中，从而缩短以后请求的响应时间。但与Web窗体页不同的是，用户控件的扩展名为.ascx，而不是.aspx；不能独立地请求用户控件，用户控件必须包含在Web窗体页内才能使用；用户控件中不包含、等标记。创建用户控件使用用户控件,用户控件（3）创建用户控件（1）,创建用户控件有两种方法，一是自行创建用户控件，二是将已有的Web窗体页转换为用户控件。自行创建用户控件的方法：（1）新建用户控件。单击工具栏上的“添加新项”按钮，在打开的“添加新项”对话框中选择“Web用户控件”，确定用户控件的名称，如WebUserControl.ascx，单击“添加”按钮。（2）编辑用户控件。从工具箱中向用户控件页面中添加所需的各种控件，如果需要还可以为控件添加事件处理代码。（3）对用户控件进行编译。单击“生成”“生成页”命令，以编译用户控件。,用户控件（4）创建用户控件（2）,服务器控件代码中的粗体部分Control一般用在用户控件.ascx文件中，一个.ascx文件中只能包含一个Control指令。用户自定义控件可以包含事件，也可以不包含事件，上面定义的用户控件即是一个不包含事件的用户控件。,用户控件（5）创建用户控件（3）,第二种方法是将已有的Web窗体转换为用户控件：（1）在源视图中将HTML标记、移除。（2）如果Web窗体页中有Page指令，将其改为Control指令。（3）为该控件指定一个文件名，并将文件扩展名.aspx改为.ascx。（4）将CodeFile属性修改为引用用户控件的后台代码文件.ascx.vb。,用户控件（6）使用用户控件（1）,创建了用户控件之后，如果想在Web窗体页中使用该控件，只需象其它控件一样将其从解决方案资源管理器中拖到Web窗体页中适当的位置即可。在应用程序的多个页面中可以使用相同的用户控件；同一个页面中可以添加多个不同的用户控件。,用户控件（7）使用用户控件（2）,用户控件应用示例,用户控件（8）使用用户控件（3）,注意上面代码中的粗体部分。在上面代码中添加了Register指令，通过Register指令指明所使用的用户控件。在Register指令中有3个重要属性：TagPrefix属性：该属性将前缀与用户控件相关联。此前缀将包括在用户控件元素的开始标记中。TagName属性：该属性将名称与用户控件相关联。此名称将包括在用户控件元素的开始标记中。Src属性：用来指明用户控件的路径，建议使用相对路径，如”/UserControls/WebUserControl.ascx”，表示站点的根目录。,本章小结,ASP.NET2.0提供了丰富的服务器控件，它们包括：HTML服务器控件、标准控件、验证控件、导航控件等类型，它们有两个共同的属性：即控件的唯一标识属性ID和服务器控件的标识runat=”server”属性，Web服务器通过控件的ID属性来识别每一个服务器控件。服务器控件也象窗体一样有自己的属性、方法和事件。服务器控件的事件在客户端引发，回传至服务器进行处理。在所有的服务器控件中，标准控件是窗体中使用最多的控件；使用验证控件可以方便地对控件中输入的数据进行验证，以保证输入数据的准确性；ASP.NET2.0提供的导航控件可以方便地生成菜单或树形结构的导航系统；如果系统提供的控件不能满足程序设计的需求，还可自定义用户控件，或是将各个页面中重复出现的控件制作成用户控件，以方便重用，这样可使多个页面风格一致，使网站的维护变得更加容易。,