开发者社区> 范大脚脚> 正文

Asp.net控件开发学习笔记(十一)----服务器控件模板

简介:
+关注继续查看
   在Asp.net 2.0以后的版本,Asp.net提供了服务器控件模板(Template)和数据绑定(Data Bind)来简化开发工作,模板是是用于定制化服务器控件或者HTML如何在页面呈现,而模板和数据绑定往往结合起来在一起实现更高级的功能,比如最经典的GridView.例如,在 GridView服务器控件中可以使用 HTML 元素和控件的组合来创建列表中每行的布局。同样,GridView服务器控件对网格中的每行都具有一个默认的外观。但是,您可以通过为单个行、间隔行、所选行等行定义不同的模板来自定义网格的外观。

 

定制控件内容

   模板用于让开发人员自定义HTML或者服务器控件作为主要控件输出流的一部分。提供了模板的服务器控件其实是给予插入自定义内容提供了容器。

   服务器控件模板的强大之处在于它通过让开发人员可以定制输出特定的html来给予了开发人员极高的灵活性.如下图:

   

 

使用服务器控件模板

使用服务器控件模板的一大好处是我们可以专注开发空间,而把外观等html和css设置内容让其他人来完成。

   在GridView控件里,我们可以通过在ItemTemplate里设置任何我们想设置的内容,在DropDownList控件中我们可以插入ListItem子控件,但在里面插入比如TextBox控件则不行。这个原因就要说到下面一个标签(Attribute)

 

ParseChildren Attribute

   服务器控件必须通过在类声明时添加ParseChildren标签来告诉asp.net页面分析器这个控件需要支持模板。ParseChildren的功能是让服务器控件所含有的子控件作为它的一个属性存在。

 对于继承System.Web.UI.WebControls.WebControl基类的控件,这个标签已经通过继承而存在不需要再声明

 ParseChildren标签还暴露了ChildrenAsProperties属性,在使用

可以:ParseChildrenAttribute(ChildrenAsProperties = true)

也可以用简便写法:ParseChildren(true)

   ChildrenAsProperty属性的作用是让控件的属性和直接在控件内部的html代码,或者说是XML代码(“<”和”>”)进行匹配.如下图:

  



而不使用ChildrenAsProperties属性的则会是如下图:

 



下面通过一个Demo来看

Demo 服务器导航菜单

   先看Demo的效果

  

  

先声明两个用于存放子控件的容器,代码如下:

    public class BasicTemplateContainer : WebControl, INamingContainer

    {

        public BasicTemplateContainer(): base(HtmlTextWriterTag.Div)

        {

            this.BorderWidth = 1;

            this.BorderStyle = BorderStyle.Solid;

        }

    }

    public class SeperatorTemplateContainer : WebControl, INamingContainer

    {

        public SeperatorTemplateContainer(): base(HtmlTextWriterTag.Span)

        {

        }

 }

第一个用于存放HeaderTemplate和footerTemplate,而第二个用于存放分隔符

再声明一个存放菜单超链接的容器,代码如下:

    [TypeConverter(typeof(ExpandableObjectConverter))]

    public class MenuItemData

    {

        public MenuItemData()

        {

        }

        [NotifyParentProperty(true)]

        public string Title { get; set; }

        [NotifyParentProperty(true)]

        public string Url { get; set; }

        [NotifyParentProperty(true)]

        public string ImageUrl { get; set; }

        [NotifyParentProperty(true)]

        public string Target { get; set; }

    }

最后声明一个继承于CompositeControl基类的控件,声明代码如下:

public class TemplateMenu : CompositeControl

最终完全代码如下:

 


TemplateMenu完全代码
前台调用代码如下:

首先注册控件:<%@ Register Namespace="bindcontrol" TagPrefix="dd" %>

然后是前台代码:

<dd:TemplateMenu runat="server" >

       <HeaderTemplate>template header</HeaderTemplate>

       <SeparatorTemplate>%</SeparatorTemplate>

       <FooterTemplate>template footer</FooterTemplate>

    </dd:TemplateMenu>

注意,作为模板的类型必须声明成ITemplate类型,而这个ITemplate的具体类型则通过TemplateContainer标签进行注入.我们通过声明CreateControlHierarchy()函数来进行控制控件的具体输出,最后通过覆盖父类的CreateChildControls()方法来调用我们写好的CreateControlHierarchy方法达到控制输出的目的。

 

   最后,你可能有疑问,那个神奇的ChildrenAsProperties属性跑哪去了?如果没有这个属性,那上面<headerTemplate>之类的标签又是如何匹配的呢?还记得吗,继承与WebControl基类的控件继承了这个标签,所以不用显示声明,所以ChildrenAsProperties属性come for free:-)



本文转自CareySon博客园博客,原文链接:http://www.cnblogs.com/CareySon/archive/2009/10/19/1586146.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ASP.NET Core 2.1以上Bootstr ap4前端模板文件,开发环境与发布环境前端模板environment的使用
ASP.NET Core 2.1以上Bootstr ap4前端模板文件,开发环境与发布环境前端模板environment的使用
102 0
学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面
原文:学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.
1159 0
学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面
原文:学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面 学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体  学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面   本篇文章介绍上一篇文章中创建的书籍信息管理系统中增删改查的四个Razor模板页面。
1077 0
52ABP模板 ASP.Net Core 与 Angular的开源实例项目
阅读文本大概需要 5 分钟。 关注角落的白板报 开始之前 自从上一篇文章".NET:持续进化的统一开发平台"发布后,已经有三个月的时间没有写过文章了。
1613 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载