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

最新推荐文章于 2023-06-20 08:00:17 发布

Viola_tt

最新推荐文章于 2023-06-20 08:00:17 发布

阅读量785

点赞数 1

分类专栏： ✿ 项目开发 ——【牛腩新闻发布系统】文章标签： asp.net 设计模式模板界面用户控件

本文链接：https://blog.csdn.net/sweetyoyy/article/details/66972195

版权

✿ 项目开发同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

——【牛腩新闻发布系统】

4 篇文章 0 订阅

订阅专栏

一模板
二模板页
- 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图，我们一起回顾一下吧。