如何使用 asp.net 创建布局

Question

如何在单独的文件中创建包含页眉、主要内容和页脚的布局？

在 Site.Master 中有一个菜单、主要内容和页脚，我想将它们分开。 我用母版页 (Menu.aspx) 创建了新的 Web 表单：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="WebApplication2.Menu" %>
<asp:Content ID="Content1" ContentPlaceHolderID="menu" runat="server">
    <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">Application name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
</asp:Content>

我正在尝试将它包含在 Site.Master 中：

<form runat="server">
    <!-- Menu -->
    <asp:ContentPlaceHolder ID="menu" runat="server">
        </asp:ContentPlaceHolder>

    <!-- Main content -->
    <div class="container body-content">
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>

    </div>
</form>

但它不会渲染。怎么了？

Answer 1

我认为您的Menu.ascx 中的MasterPageFile 不应该存在。菜单就像一个局部视图，它不应该有母版页。但是，我会选择不同的方法。

菜单

<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Menu.ascx.cs" Inherits="WebApplication2.Menu" %>
    <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">Application name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>

我在菜单页面上所做的：我删除了菜单的MasterPageFile 属性，因为菜单不是整个页面而是一个页面的一部分（就像 MVC 中的部分视图）。此外，删除了 <asp:Content> 标记，因为您不希望菜单在 Site.Master 的主目录中呈现。

Site.Master

在Site.Master 的顶部添加这一行

<%@ Register TagPrefix="Menu" TagName="Menu" Src="the path to your Menu.ascx" %>

将Src 属性的值更改为Menu.Ascx 页面的路径。

现在您可以像这样在Site.Master 中的任意位置呈现您的Menu.ascx 页面：

<Menu:Menu runat="server" />

我不是 100% 确定它会起作用，因为我还没有测试过它。如果有什么不对的评论在下面。我会帮你的。