ASP.NET模板使用--牛腩收仓

一模板
二模板页
- 1MasterPage
- 2子页面
三用户控件WebuserControl
四嵌套模板
五结语

一、模板

牛腩中的模板，和之前自己学习的模板方法的设计模式很想，不过牛腩中更加注重的界面的样式，实质上他们也算是亲戚。将很多页面上的常用的内容抽象出来，放在模板中，再次创建页面的使用可以在已经创建的模板的基础上进行添加内容。减少了内容的冗余，牛老师提到两种创建模板的方法，一种是模板页（MasterPage），另一种是添加用户控件（WebuserControl），小编今天两种方法都做一个简单的介绍。

二、模板页

2.1MasterPage

确定公有内容，牛腩中每个页面中都有的内容是这个头部和尾部：

所以我们可以建立一个模板只包含这两块的内容,选择程序集，右键添加，选择-masterpage：新建好号的模板中有如下的内容，只是一个框架

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.master.cs" Inherits="WebBlack.blog.Site2" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head><body><form id="form1" runat="server"><div><%--可变内容的区域,可视为容器,认为这里是精髓，灵活性的体现--%><asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        </asp:ContentPlaceHolder></div></form>
</body>
</html>

我们在模板中天上头部和尾部，作为固定不变的部分，代码如下：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebBlack.Site1" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>模板演示</title><link href="~/CSS/common.css" rel="stylesheet" /> <%--绑定上样式--%><asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder></head>
<body><form id="form1" runat="server"><div><%--固定内容1：头部--%><div id="top"><a href="Default.aspx"><img src="/Image/niu.gif" /></a><a href="http://blog.csdn.net/sweetyoyy" target="_blank"><img src="/Image/blog.jpg" /></a></div> <%--固定内容2：搜索--%><div id="search">搜索条件：<asp:RadioButton ID="radTitle" GroupName="cond" runat="server" Text="  标题  " Checked="true" /><asp:RadioButton ID="radContent" GroupName="cond" runat="server" Text="  内容" /><asp:TextBox ID="txtKey" runat="server" CssClass="textbox" ValidationGroup ="sousuo"></asp:TextBox>               <asp:ImageButton ID="ibtnSearch" ImageUrl="~/Image/search.PNG" runat="server" OnClick="ibtnSearch_Click" ValidationGroup ="sousuo" /><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="请输入搜索的内容！" ControlToValidate ="txtKey" ValidationGroup ="sousuo" Text ="* "></asp:RequiredFieldValidator><%--只是验证了没有提示消息，如果要有提示消息，就要和下面的组件一起使用--%>            <asp:ValidationSummary ID="ValidationSummary1" ValidationGroup ="sousuo" runat="server" ShowMessageBox ="true" ShowSummary="false"/></div> <%--可变内容的区域,可视为容器,认为这里是精髓，灵活性的体现--%><div id="main"><asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">      </asp:ContentPlaceHolder></div><%--固定内容3 尾部--%><div id="footer">版权声明 &copy; 牛腩 &amp;  <a href="http://blog.csdn.net/sweetyoyy" target="_blank">刘雅雯</a></div> </div></form>
</body>
</html>

这是模板的建完之后的效果图：

2.2子页面

就该创建套用模板的页面了，新建ContentPage，这是我们可以选择模板site1了~

创建好的页面，代码如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/blog/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebBlack.blog.WebForm1" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"><%--head和母版中的head位置对应--%>
</asp:Content><%--注意这里和模板中可变内容的ID对应着，所以这里填写自己独有的内容--%>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

这是我填写了内容之后的子页面:

<%@ Page Title="" Language="C#" MasterPageFile="~/blog/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebBlack.blog.WebForm1" %><%@ Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"><%--head和母版中的head位置对应--%>
</asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"><div><uc1:WebUserControl1 ID="WebUserControl11" runat="server" /></div>    <!--热点新闻--><div id="hotnews" class ="commonfrm"><h4>热点新闻</h4><asp:GridView ID="gvHotNews" runat="server" AutoGenerateColumns="False" GridLines="None" ><Columns><asp:TemplateField HeaderText="所属类别" HeaderStyle-CssClass ="th_category" ItemStyle-CssClass="td_category" ><ItemTemplate><%--<asp:Label ID="Label1" runat="server" Text='<%# Bind("name") %>'></asp:Label>--%>[ <a class="td_category" href ='NewsList.aspx?caid=<%# Eval ("categoryid") %>'> <%# Eval("name") %></a>]</ItemTemplate></asp:TemplateField><asp:TemplateField HeaderText="新闻标题"  ><ItemTemplate><%--<asp:Label ID="Label2" runat="server" Text='<%# StringTruncat( Eval("title").ToString (),18,"...") %>'></asp:Label>--%><a  href="newscontent.aspx?newsid=<%# Eval("id")  %>" target="_blank"  title='<%# Eval("title") %>' ><%# StringTruncat( Eval("title").ToString (),18,"...") %></a></ItemTemplate></asp:TemplateField><asp:TemplateField HeaderText="发布时间" HeaderStyle-CssClass="th_time" ItemStyle-CssClass ="td_time" ><ItemTemplate><asp:Label ID="Label3" runat="server" Text='<%# Bind("createTime") %>'></asp:Label></ItemTemplate></asp:TemplateField></Columns></asp:GridView></div>
</asp:Content>

三、用户控件（WebuserControl）

右键创建一个WebuserControl,新建完后的代码如下：只有一行

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl2.ascx.cs" Inherits="WebBlack.blog.WebUserControl2" %>

我们将内容直接放入放其中：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebBlack.blog.WebUserControl1" %>
<div id ="category" class ="commonfrm"><h4>新闻分类</h4><ul><li><a href ="Default.aspx">首　　页</a> </li><asp:Repeater ID="repCategory" runat="server"><ItemTemplate > <%--模板--%><li><a href='NewsList.aspx?caid=<%# Eval("id") %>'><%# Eval("name") %></a></li> <%--这里引号后为啥还有一个尖括号-和前面是一组的-%> 注意这里的caid是后边要单击页面的时候显示的<%-- <li><a href="#">体育新闻</a> </li>--%><%--<li><a href="#">财经新闻</a> </li><li><a href="#" >社会新闻</a></li>--%></ItemTemplate> </asp:Repeater></ul></div>

内容是这样的：

这个如何使用呢？我们之前是选择模板，用户控件的话不是选择模板，也不能直接从代码中写，我们将子窗体，点到设计页面，将其拖进来，我们拖拽的位置如下：

拖进来后会自动出现两行的代码，他们是：

现在可以让大家看看子窗体最后的模样的，他是父窗体MasterPage的内容加上WebuserControl的内容加上自己独有的内容：

四、嵌套模板

嵌套模板可以理解为二级模板，在模板的基处上建立另一个模板。右键新建嵌套模板：NestedMasterPage:

选择模板，我们这里选择一级模板：

建完之后的模板代码如下：

<%@ Master Language="C#" MasterPageFile="~/blog/Site1.Master" AutoEventWireup="true" CodeBehind="NestedMasterPage1.master.cs" Inherits="WebBlack.blog.NestedMasterPage1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"><asp:ContentPlaceHolder ID="N_ContentPlaceHolder" runat="server"><%--这里包着的内容是套用改模板的页面可以特用的内容--%></asp:ContentPlaceHolder></asp:Content>

一下的步骤就和咱们上面说的一级的模板一样的，这里就不赘述了，这里就是告诉大家我们不光可以建立模板，还可以建立嵌套模板~

五、结语

这里的创建模板和模板方法设计模式很想，但是有一些不同的地方。创建模板我们把相同的内容拿出来，但是没有列出他们的框架，不同的地方我们可以自己任意添加，没有限制。而模板方法呢，在父类中定义了算法的框架和抽象行为，这行抽象的行为告诉你子窗体可以实现什么功能，我想也是这一点上有很明显的不同之处。如下是模板方法模式的UML图，我们一起回顾一下吧。