第12讲服务器控件(三)

.NET程序设计主讲教师:李璟e-mail:[e-mail]手机：[phone]第12讲服务器控件(三)•12.1用户控件•12.2导航控件•12.3母版页•12.4服务器控件综合实例12.1用户控件•如果在应用程序反复多次使用某种类型的功能且ASP.NET内置的服务器控件又不能满足应用程序的要求，ASP.NET提供了用户控件的技术来处理此类问题。•用户控件是ASP.NET提供的一种直观的可重用的模型。•用户控件使开发人员能够使用编写Web窗体页的相同编程技巧轻松地定义自定义控件。12.1用户控件•12.1.1用户控件概述•12.1.2创建用户控件•12.1.3设计用户控件属性12.1.1用户控件概述•用户控件是能够在其中放置标记和Web服务器控件的容器。•可以将用户控件作为一个单元对待，为其定义属性、方法和事件。•用户控件可以独立于Web窗体而单独使用，使程序员能够很容易地跨ASP.NETWeb应用程序划分和重复使用公共UI功能。用户控件和ASP.NET窗体页的相同点•(1)都可以向其中添加所需的标记和子控件，具有用户界面页。•(2)都包含对其内容进行操作的事件代码，操作方法也相同。•(3)在第一次请求时被编译并存储在服务器内存中，缩短以后请求的响应时间。用户控件和ASP.NET窗体页的不同点•用户控件扩展名为.ascx，代码扩展名为为.ascx.cs。•用户控件没有Page指令和html、body或者form元素，不能直接显示在浏览器上，只能通过在页面中被使用才能显示在浏览器上。12.1.2创建用户控件•用户控件的声明语法和创建ASP.NET页面的语法非常的相似，其主要的差别在于：–用户控件使用@Control指令取代了@Page指令。–用户控件在内容外部不包括html、body和form元素。•(1)启动VS2008打开或者新建一个网站，在【解决资源管理器】窗格中，右击选择网站URL，打开快捷菜单，选择【添加新项】，在【添加新项】对话框的对话框中单击【Web用户控件】，【名称】框中输入Web用户控件的名称，WebUserControl1.ascx后，单击【添加】按钮。•(2)VS2008将在网站所在的根目录中创建WebUserControl1.ascx文件及后台代码WebUserControl1.ascx.cs。用户控件示例•(3)自动生成的WebUserControl1.ascx文件中如下所示一行代码：•%@ControlLanguage=C#“•AutoEventWireup=trueCodeFile=WebUserControl1.ascx.csInherits=WebUserControl1%•(4)在该用户控件的HTML【设计】视图中，添加一个TextBox控件TextBox1，此时，用户控件设计好了。12.1.3设计用户控件属性•为用户控件添加属性体现了他的灵活性和强大功能。•用户控件与普通的Web页面不同，可以定义属性，并且可以在包含它的页面中设置和读取这些属性。12.1.3设计用户控件属性•接下来为上面创建的用户控件添加一个属性。•为用控件添加属性非常的简单，只需在.ascx.cs文件中添加一个属性即可。•下面在该用户控件中为其添加一个属性Content，可以实现对用户控件中TextBox1的Text属性的读写，代码如下所示：•publicstringContent{•get{returnTextBox1.Text;}•set{TextBox1.Text=value;}•}用户控件示例续•为用户控件添加完属性后，再新建一个Web页面Default6.aspx以测试该属性，步骤如下：•(1)把用户控件WebUserControl1.ascx拖放到Default6.aspx窗体上，选择菜单“生成”-“重新生成网站”，则在该用户控件的【属性】窗口，可以看到为用户控件定义好的属性——Content。•(2)在Web窗体Default6.aspx上添加一个Button控件Button1，并设置按钮Text属性值为“确定”，添加一个Label控件Label1，双击Button1控件，进入后台代码编写窗口，在该事件处理程序编写如下代码：•if(WebUserControl1.Content!=)•Label1.Text=WebUserControl1.Content+，你好！;•Else•Label1.Text=请输入你的姓名！;•(3)在Default6.aspx的PageLoad()事件代码中，编写如下代码：•if(WebUserControl1.Content==)•Label1.Text=请输入你的姓名！;Default6.aspx运行效果12.2导航控件•对于一个大型的企业级网站，可能拥有成百上千的网页，导航就变得十分重要。•好的导航系统能够便利用户在多个页面间来回浏览，增加应用程序的可交互性。•ASP.NET提供了内置的站点导航技术，让开发人员创建站点导航时变得轻松。12.2导航控件•12.2.1ASP.NET中的站点导航技术•12.2.2SiteMapPath控件•12.2.3TreeView控件•12.2.4Menu控件•12.2.5导航控件综合实例12.2.1ASP.NET中的站点导航技术•一些大中型的网站为了让用户便于找到合适的网页，特别定制了一些站点目录文件，用于定义站点结构，称之为站点地图。•在ASP.NET中，微软为了简化创建站点地图的工作，提供了一套用于导航的站点地图技术。•ASP.NET中的站点地图导航技术由如下三个组件组成：–一个用于定义站点结构的XML文件，又称为站点地图文件。–用来绑定到XML站点地图文件的SiteMapDataSource数据源控件。–用于显示站点地图的导航控件，如TreeView控件和Menu控件。12.2.2SiteMapPath控件•SiteMapPath控件是一个非常方便的控件，可以自动根据在站点地图文件Web.sitemap中定义的导航数据显示一个导航路径，此路径为用户显示当前页在网站中的路径及返回到首页的导航链接。•只有在站点地图文件中列出的页,才能在SiteMapPath控件中显示导航数据。•SiteMapPath控件可以自定义导航路径的外观。•(1)首先需要添加一个站点地图文件Web.sitemap，在文件中添加如下代码：•?xmlversion=1.0encoding=utf-8?•siteMapxmlns=•siteMapNodeurl=~/default9.aspxtitle=主页description=Home•siteMapNodeurl=~/default7.aspxtitle=服务description=Services•siteMapNodeurl=~/default3.aspxtitle=培训description=Tranining/•siteMapNodeurl=~/default8.aspxtitle=查阅description=Consulting/•/siteMapNode•/siteMapNode•/siteMapSiteMapPath控件示例SiteMapPath控件示例•(2)创建一个名为Default3.aspx的页面，从工具栏拖动一个SiteMapPath控件添加到该页面上，自动添加下面的代码：•asp:SiteMapPathID=“SiteMapPath1”Runat=“server”•/asp:SiteMapPathSiteMapPath控件示例•(3)设置SiteMapPath的属性如下：–设NodeStyle-ForeColor=Green“–设Font-Size=Small“–设PathSeparatorStyle-ForeColor=Green页面运行效果12.2.3TreeView控件•从.NET2.0开始，微软在ASP.NET中内置了TreeView控件，使用它可以创建一个树状结构图，以便让用户能够在节点的各层次中进行导航，大大简化了开发人员编写导航功能的复杂性。•TreeView控件用于在树结构中显示分层数据，例如目录或文件目录，并且主要支持下列功能：–数据绑定，允许控件的节点绑定到XML、表格或关系数据。–站点导航，通过与SiteMapDataSource控件集成实现。–节点文本既可以显示为纯文本也可以显示为超链接。–借助编程方式访问TreeView对象模型以动态地创建树、填充节点、设置属性等。–通过主题、用户定义的图像和样式可实现自定义外观。TreeView控件应用示例1．控件的组成元素•一个TreeView控件可以由任意多个TreeNode元素组成。•每个TreeNode元素还可以包含多个子TreeNode元素。•每个TreeNode元素可以关联文本和图像，还可以显示为超链接并与某个URL地址关联。2．控件的属性•TreeView控件的属性有许多。下面我们只介绍一些常用的属性。TreeView控件部分属性（1）属性名称说明AutoGenerateDataBindingsTreeView的节点是自动绑定到数据，为True表示可以自动绑定数据。ShowExpandCollapse设置节点折叠时是否显示“+”标记，该标记表示还可以展开。Showlines节点之间是否使用短线连接，设置为True表示有短线链接各节点。ExpandDepth一个整数值，用来设置默认情况下TreeView控件层次结构展开的级别数。TreeView控件部分属性（2）属性名称说明CollapseImageURL单击TreeNode折叠时节点关联图像的URL地址。ExpandImageURL单击TreeNode展开时节点关联图像的URL地址。NodeStyle应用于所有节点的默认样式。RootNodeStyle根节点使用的样式。SelectedNodeStyle应用于选定的节点的样式。3．使用TreeView控件•下面介绍一个简单的树状结构图的过程。•(1)新建或者打开一个网站。从【工具箱】窗格的【导航】选项卡中添加TreeView控件到Web窗体中。•(2)左击控件，在弹出的快捷菜单中选择【自动套用格式】命令，然后在弹出的【自动套用格式】对话框中选择使用“XP资源管理器”方案，从右侧的【预览】区中可以看到效果。•(3)单击【确定】按钮返回窗体，即看到使用格式后的效果。再次左击，在弹出的快捷菜单中选择【编辑节点】命令，打开【TreeView节点编辑器】对话框，单击【添加根节点】按钮，添加一个根节点，随即右侧的【属性】列表变为可用，从中设置Text属性为“清华大学出版社。•(4)使用同样的方法，依次添加“人民教育出版社”、“人民邮电出版社”和“高等教育出版社”3个根节点。•(5)选择根节点“清华大学出版社”，单击【添加子节点】按钮，然后使用添加根节点的方法添加“获奖图书”、“优秀教材”、“精品图书”和“书友论坛”4个子节点。•(6)用同样的方法为根节点“人民邮电出版社”添加“新书推荐”和“图书热卖”两个子节点，单击【确定】按钮返回【设计】视图即可看到未运行时的初始化效果。切换到【源】视图，会发现有以下代码，这些都是通过前面操作自动生成的。•asp:TreeViewID=TreeView1runat=serverImageSet=XPFileExplorer•NodeIndent=15•ParentNodeStyleFont-Bold=False/•HoverNodeStyleFont-Underline=TrueForeColor=#6666AA/•SelectedNodeStyleBackColor=#B5B5B5Font-Underline=False•HorizontalPadding=0pxVerticalPad