1 / 29

用户控件和主控页

用户控件和主控页. 16.1 用 户 控 件 16.2 主 控 页 16.3 小 结 16.4 习 题. 1 用 户 控 件. 1.1 什么是用户控件 1.2 创建用户控件的方法 1.3 使用用户控件 1.4 代码分析 1.5 将 Web 窗体页转换为用户控件. 16.2 用 户 控 件. 16.2.1 什么是用户控件.

teige
Download Presentation

用户控件和主控页

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 用户控件和主控页 • 16.1 用 户 控 件 • 16.2 主 控 页 • 16.3 小 结 • 16.4 习 题

  2. 1 用 户 控 件 • 1.1 什么是用户控件 • 1.2 创建用户控件的方法 • 1.3 使用用户控件 • 1.4 代码分析 • 1.5 将Web窗体页转换为用户控件

  3. 16.2 用 户 控 件

  4. 16.2.1 什么是用户控件 • 用户控件(User Control)是一种自定义的组合控件，通常由系统提供的可视化控件组合而成。在用户控件中不仅可以定义显示界面，还可以编写事件处理代码。当多个网页中包括有部分相同的用户界面时，可以将这些相同的部分提取出来，做成用户控件。 • 一个网页中可以放置多个用户控件。通过使用用户控件不仅可以减少编写代码的重复劳动，还可以使得多个网页的显示风格一致。更为重要的是，一旦需要改变这些网页的显示界面时，只需要修改用户控件本身，经过编译后，所有网页中的用户控件都会自动跟随变化。

  5. 用户控件本身就相当于一个小型的网页，同样可以为它选择单文件模式或者代码分离模式。然而用户控件与网页之间还是存在着一些区别，这些区别包括：用户控件本身就相当于一个小型的网页，同样可以为它选择单文件模式或者代码分离模式。然而用户控件与网页之间还是存在着一些区别，这些区别包括： • 用户控件文件的扩展名为 .ascx而不是.aspx；代码的分离(隐藏)文件的扩展名是.ascx.cs而不是.aspx.cs； • 在用户控件中不能包含 <HTML>、<BODY>和<FORM>等HTML语言的标记； • 用户控件可以单独编译，但不能单独运行。只有将用户控件嵌入到.aspx文件中时，才能和ASP.NET网页一起运行。 • 除此以外，用户控件与网页非常相似。

  6. 16.2.2 创建用户控件的方法 • 创建用户控件的步骤如下所述。 • (1) 先创建一个网站。 • (2) 右击网站中某个目录，选择【添加新项】，并在打开的对话框中选择【Web用户控件】，然后确定用户控件的名称，再单击【打开】按钮。 • (3) 从【工具箱】中将控件添加到Web用户控件中。其中凡是希望用服务器编程方式访问的控件都必须是服务器端控件。 • (4) 为各控件设置属性或编写事件代码。 • (5) 给用户控件进行编译。方法是先选择用户控件名，然后选择【生成】|【生成页】命令以便完成编译工作。 • 下面结合一个示例来讲述创建用户控件的过程。

  7. 假定某个项目中多个网页的上方都需要放置如图16.4所示的显示界面。我们可以为这个界面创建一个用户控件。 • (1) 创建时，先建立网站，给网站取名为usrControl。 • (2) 右击网站(应用程序)名，在弹出的菜单中选择【添加新项】，然后在打开的对话框中选择【Web用户控件】，根据需要确定其名称，然后单击【打开】按钮，以便在设计器中打开用户控件。 • (3) 从【工具箱】的【标准】选项卡中将Panel控件拖入设计窗口，设置它的属性(如底色、大小等)。然后在其中拖入其他控件，如图16.4所示。这些控件包括： • 6个HyperLink控件，将它们的Text属性分别设成“新闻”“娱乐”等； • 4个Image以及4个Label控件，分别选择各自的图标，标上“保存”“下载”等； • 1个TextBox文本框和1个“查询”按钮。 • (4) 在应用程序中添加多个Web Form(网页)，用于显示各种不同的内容。 • (5) 然后通过HyperLink的NavigateUrl属性分别与各窗体链接。 • (6) 如果需要，可双击【查询】按钮，在代码隐藏文件中编写查询程序。最后选择【生成】菜单，再选择【生成页】命令，以编译用户控件。

  8. 16.2.2 创建用户控件的方法 图16.4 用户控件示例

  9. 16.2.3 使用用户控件 • 用户控件只能在同一应用程序的网页中共享。就是说，应用项目的多个网页中可以使用相同的用户控件，而每一个网页可以使用多种不同的用户控件。如果一个网页中需要使用多个用户控件时，最好先进行布局。然后再将用户控件分别拖到相应的位置。 • 在设计阶段，有的用户控件并不会充分展开，而是被压缩成小长方形，此时它只起占位的作用。程序运行时才会自动展开。

  10. 16.2.4 代码分析 • 进入ASP.NET的【源】视图，可以看见用户控件的相关代码如下： • <%@ Register TagPrefix="uc1" TagName="WebUserControl1" • Src="WebUserControl1.ascx" %> • <body > • <form id="Form1" method="post" runat="server"> • <uc1:WebUserControl1 id="WebUserControl11" • runat="server"></uc1:WebUserControl1> • </form> • </body> • 代码中粗体为用户控件的相关部分。其中语句： • <%@ Register TagPrefix="uc1" TagName="WebUserControl1" • Src="WebUserControl1.ascx" %> • 代表用户控件已经在.aspx中注册。语句中各个标记的含义如下。 • TagPrefix：代表用户控件的命名空间(这里是ucl)，它是用户控件名称的前缀。如果在一个.aspx网页中使用了多个用户控件，而且在不同的用户控件中出现了控件重名的现象时，命名空间是用来区别它们的标志。 • TagName：是用户控件的名称，它与命名空间一起来惟一标识用户控件，如代码中的“uc1:WebUserControl1”。 • Src：用来指明用户控件的虚拟路径。

  11. 16.2.5 将Web窗体页转换为用户控件 • 将Web窗体页转换为用户控件的目的，是为了将该窗体转换成为可重用的控件。由于两者原本采用的技术就非常相似，所以只需要做一些较小的改动即能将Web窗体改变成为用户控件。 • 由于用户控件必须被嵌套于网页中运行，因此在用户控件中不能包括<html>、<body> 和<form>等HTML标记，否则将会产生代码重复。转换中必须移除窗体页中的这些标记。除此以外，还必须在包括用户控件的 Web 窗体页中将ASP.NET指令类型从@ Page 更改为@ Control。转换的具体步骤如下。 • 在代码(隐藏)文件中将类的基类从 Page更改为UserControl类。这表明用户控件类是从UserControl类继承的。例如：在Web窗体页中，类Welcome从Page类继承。语句如下： • public class welcome : System.Web.UI.Page{…} • 现在改为从UserControl类继承。语句如下： • public class welcome : System.Web.UI.UserControl{…} • 在.aspx 文件中删除所有<html>、<head>、<body> 和 <form>等标记。 • 将ASP.NET指令类型从@ Page 更改为 @ Control。 • 更改Codebehind属性来引用控件的代码(隐藏)文件(ascx .cs)。 • 将.aspx 文件的扩展名(后缀)更改为 .ascx。

  12. 16.3 主 控 页 • 16.3.1 什么是主控页 • 16.3.2 创建主控页的方法 • 16.3.3 在主控页中放入新网页的方法 • 16.3.4 将已建成的网页放入主控页中

  13. 16.3 主 控 页

  14. 16.3.1 什么是主控页 • 主控页(Master Page)是一个以“.master”作为后缀的文件。在主控页中可以放入多个标准控件并编写相应的代码，同时还给各窗体页留出一处或多处的“自由空间”。主控页与用户控件之间的最大区别在于，用户控件是基于局部的界面设计，而主控页是基于全局性的界面设计。用户控件只能在某些局部上使各网页的显示取得一致，而主控页却可以在整体的外观上取得一致。用户控件通常被嵌入到主控页中一起使用。 • 一个网站可以设置多种类型的主控页，以满足不同显示风格的需要。

  15. 16.3.2 创建主控页的方法 • 下面通过示例来讲述创建主控页的方法。 • 首先创建一个新网站，然后右击应用程序名，在弹出的菜单中选择【添加新项】，在弹出的对话框中选择【主控页】，并使用“MasterPage1.master”默认名(可改名，但后缀不能改)。此时在界面中将出现一个ContentPlaceHolder方形窗口，这个方形窗口是配置网页的地方。可以先对网页进行布局，然后再将这个窗口移动到合适的地方。下面举例说明具体步骤。 • (1) 选择【布局】菜单中的【插入表】命令以便进行布局。在【插入表】对话框中选择【模板】，然后在下拉列表中选择布局样式。在本例中选择的是【页眉和边】样式，如图16.5所示。 • (2) 用鼠标单击右下角的空间，并且将它的VAlign属性设置为Top，再将ContentPlaceHolder拖入到右下角的窗口中。 • (3) 用鼠标单击左下角的空间，并且将它的VAlign属性设置为Top，再将TreeView控件从【工具箱】(ToolBox)拖入。 • (4) 用类似方法将用户控件(User Control)拖入上面的空间中。

  16. 16.3.2 创建主控页的方法 图16.5 选用模板进行布局

  17. 16.3.2 创建主控页的方法

  18. 16.3.3 在主控页中放入新网页的方法 • 可以直接在主控页中生成新网页，也可以在建立新网页过程中选择主控页。 • 1．直接从主控页中生成新网页 • 直接从主控页中生成新网页的步骤是： • (1) 打开主控页； • (2) 右击ContentPlaceholder控件，在弹出的菜单中选择【添加内容页】命令，以确定内含的新网页； • (3) 右击新网页，在弹出的菜单中选择【编辑主表】命令，然后在网页中增添新控件。 • 此时新网页将被嵌入到母模板中，与主控页形成一个网页文件，网页的名字即新网页的名字。

  19. 2．在创建新网页中选择主控页 • 在创建新网页中选择主控页的方法是：在网站中创建一新网页。此时，在网页名的右方提供了两项选择，可以从中选择一项或两项，或者两项都不选择。两种选择项的含义如下。 • 将代码放在单独的文件中：代表采用代码分离方式。 • 选择主控页：代表将新网页嵌入到主控页中。 • 如果两项都不选择时，系统将创建一个单文件模式的独立网页，此网页将独立于主控页。 • 如果选择了第2项，将弹出一文件列表，提供一个或多个“主控页”文件以供选择。当选择其中之一后，新网页就会嵌入到指定的主控页中。 • 主控页与新网页将构成一个整体成为一个新的网页，新网页仍使用新产生的网页名。在主控页中将包括多个网页的共性部分，被嵌入的网页中包含的是网页的个性部分。这种关系可以用一个简单的表达式来表示： • default.aspx = Master Page + default.aspx • 网页与主控页的关系如图16.7所示。

  20. 16.3.3 在主控页中放入新网页的方法 图16.7 网页与主控页的关系

  21. 16.3.4 将已建成的网页放入主控页中 • 为了将已经建成的网页嵌入主控页中，需要在已经建成的网页中用手工方法增加或改写一些代码。 • (1) 打开已建成的网页，进入它的代码界面，在页面指示语句中增加与主控页的联系。为此需增加以下属性，其中"~/MasterPage.master"代表主控页名。 • <%@Page Language="C#" MasterPageFile=" ~/MasterPage.master" • AutoEventWireup="…"> • (2) 由于在主控页中已经包含有HTML、Head、Body、Form等标记，因此在网页中要删除所有这些标记，以避免重复。同样，类似于<H1></H1>的标记也要删除(div标记不要删除)。 • (3) 在剩下内容的前后两端加上Content标记，并增加Content的ID属性，Runat属性以及ContentPlaceHolderID属性，后者的值(这里是ContentPlaceHolder1)应该与主控页中的网页容器相同。修改后的语句结构如下： • <asp:Content ID="bodyContent" ContentPlaceHolderID="ContentPlaceHolder1" Runat=Server> • <div> • … • </div> • </asp:Content> • 就是说修改后的代码中除页面指示语句以外，所有语句都应放置在<asp:Content…>与</asp:Content>之间。

  22. 16.4 小 结 • 为了使得网站中一批网页的显示风格保持一致，ASP.NET 2.0提供了主题、用户控件和主控页技术。主题、用户控件和主控页虽然都是对控件显示的定义，但是它们定义的层次和影响的范围不同。 • 主题是利用皮肤文件对一批单个控件显示的定义，皮肤文件必须放在主题目录之下，而主题目录又必须放在专用目录App_Themes之下。用户控件与主控页都是由设计者利用标准控件自行创建的组合控件，用户控件只能作用于网页的局部，而主控页是对整体布局的定义。 • 恰当地将三者结合，就可以使网站的多个网页之间，从单个控件到局部、再到整体布局方面在显示风格上取得一致。

  23. 16.5 习 题 • 1 填空题 • 2 选择题 • 3 判断题 • 4 简答题 • 5 操作题

  24. 16.5 习 题__ 填空题 • (1) 皮肤文件是以“.skin”为后缀的文件，用来定义的样式。 • (2) 下面是一段皮肤文件中的定义： • <asp:TextBox • BackColor = "Orange" • ForeColor = "DarkGreen" • Runat = "server" /> • 代码将服务器控件的底色定义为色，将控件中的字符定义为色。 • 下面是ASPX网页中的一段代码： • <%@ Register TagPrefix="uc1" TagName="WebUserControl1" • Src="WebUserControl1.ascx" %> • 其中带下划线的字符串代表。

  25. 16.5 习 题__选择题 • (1) 当一种控件有多种定义时，用属性来区别它们的定义。 • A. ID B. Color • C. BackColor D. SkinID • (2) 用户控件是后缀为的文件。 • A. master B. asax • C. aspx D. ascx • (3) 主控页是后缀为的文件。 • A. master B. asax • C. aspx D. ascx • 下面是ASPX网页中的一段代码： • <%@Page Language="C#" MasterPageFile=" ~/MasterPage.master" • AutoEventWireup="…"> • 其中带下划线的部分代表。 • A. 主控页的路径 B. 用户控件的名字 • C. 用户控件的路径 D. 主控页的名字

  26. 16.5 习 题__判断题 • (1) 利用主题可以为一批服务器控件定义样式。 ( ) • (2) 主题目录必须放在专用目录App_Themes的下面。 而皮肤文件必须放在“主题目录”下面。 ( ) • (3) 用户控件是一种自定义的组合控件。 ( ) • (4) 用户控件不能在同一应用程序的不同网页间重用。 ( ) • (5) 使用主控页是为了多个网页在全局的样式上保持一致。 ( )

  27. 16.5 习 题__ 简答题 • (1) 为了保持多个网页显示风格一致，ASP.NET 2.0使用了哪些技术，每种技术是如何发挥作用的？ • (2) 简述将ASPX网页转换成用户控件的方法。 • (3) 简述将已经创建的ASPX网页放进主控页的方法。

  28. 16.5 习 题__操作题 • 将主题、用户控件及主控页技术相结合创建风格一致的多个网页。

  29. Q & A?Thanks!

More Related