ASP.NET 中定义母页的理想方法

William Emmanual

4.70/5 (8投票s)

2013年9月26日

CPOL

2分钟阅读

15357

规划 ASP.NET 中的母页

引言

每个项目都始于网页设计师（HTML 极客）和 .NET 开发者之间关于如何根据网站的具体需求来构建 ASP.NET 母页的争论。为了缓解这场争论，并提供一种可靠、经过验证的方法来尽量减少讨论，我分享我的母页，它帮助我完成了几乎所有的网站开发项目。

背景

规划母页的正确结构对于整个网站的性能和可扩展性至关重要。我想介绍一种易于理解的方法，它将网站的结构分解为抽象部分，分布在用户控件、内容占位符和站点地图文件中，以确保代码复杂性最小化。

Using the Code

这种分解确保

您的 SEO 团队将更新的元标记被分离到一个单独的用户控件中，可以与您的主要开发[headTags.ascx]分开编辑。
头部内容占位符确保您有一个部分来放置自定义 CSS、特定于任何页面的自定义 JS 文件。
菜单被分离到一个用户控件[menu.ascx]中，允许您为不同的页面编写自定义代码以显示不同类型的菜单，包括显示活动页面的代码。
站点地图路径文件，以确保您不必多次编写整个站点地图，并且它用于创建网站的导航面包屑、网站的菜单、页脚上的快速链接（如果需要）。
页脚内容占位符确保任何新的自定义 jQuery 文件都可以在加载包括 jQuery 文件在内的通用 JS 文件集**之后**添加到网站的页脚。

//
<%@ Master Language="C#" AutoEventWireup="true" 
CodeBehind="generic.master.cs" Inherits="MeriBus.generic" %>
<%@ Register TagPrefix="headTags" 
TagName="headerTags" Src="~/headTags.ascx" %>
<%@ Register TagPrefix="siteMenu" 
TagName="siteWideMenu" Src="~/menu.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <!-- UserControl for Meta tags, stylesheets, 
    JQuery min file to be added on every  page -->
    <headTags:headerTags runat="server" ID="headerTags" />

    <!-- For custom styles to be added each page -->
    <asp:ContentPlaceHolder ID="head" 
    runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="newsletter" runat="server">    

    <header>
        <div class="container">
            <div class="row">
                <!-- UserControl For dynamic menu to be added each page -->
                <siteMenu:siteWideMenu runat="server" ID="siteWide" />
            </div>
        </div>
    </header>
    <section id="content">
      <div class="container">
        <div class="row">
            <div class="breadcrumb">
                <asp:SiteMapPath ID="SiteMapPath1" runat="server" 
                PathSeparator=" \ "></asp:SiteMapPath>
            </div>
            <asp:ContentPlaceHolder ID="quickLinks" 
            runat="server"></asp:ContentPlaceHolder>
            <asp:ContentPlaceHolder ID="center" 
            runat="server"></asp:ContentPlaceHolder>
        </div>
       </div>    
     </section>
    </form>
    <footer>
        <div class="container" >            
        </div>
    </footer>

    <!-- Javascript files -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    .
    .
    .
    <script type="text/javascript" src="js/bootstrap.js"></script>
    
    <!-- For custom scripts to be added each page -->
    <asp:ContentPlaceHolder ID="footer" 
    runat="server"></asp:ContentPlaceHolder>

</body>
</html>
//

这应该作为创建任何新网站母页时的默认母页引用。如果您有改进这种分解的想法，请告诉我。

为什么使用用户控件？

用户控件是确保代码片段可以放置在母页之外的好方法，从而允许我在任何数量的母页中调用它。这对于网站结构元素（如菜单导航和 HTML 元标记）来说是一个理想的情况。

用户控件确保网站的各个元素可以从单个位置在代码的多个实例中进行编辑，例如，如果一个网站有一个会员区域和一个开放的公共区域，两个视图的导航将是不同的。但是，您可以通过在多个母页上调用的同一个用户控件来编写显示两个视图的菜单代码。