如何使用 asp.net 创建布局

Question

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

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

<%@ 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 不应该存在。菜单就像一个局部视图，它不应该有主页。但是，我会选择不同的方法。

Menu

<%@ 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" %>

使用 Menu.Ascx 页面的路径更改 Src 属性的值。

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

<Menu:Menu runat="server" />

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

如何使用 asp.net 创建布局

How to create layout using asp.net

c#

asp.net

master-pages