How to create layout using asp.net

Question

how to create layout with header, main content and footer in separately files?

In Site.Master there is a Menu, main content and footer together and I want to separate them. I've created new Web Form with Master Page (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>

and I'm trying to include it in 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>

but it won't render. What's wrong?

Answer 1

I think that the MasterPageFile in your Menu.ascx shouldn't be there. The menu is like a partial view, it shouldn't have masterpage. However, I would chose different approach.

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>

What I've done on the Menu page: I removed the MasterPageFile attribute of the menu, because the menu isn't a whole page but a part of one (like partial view in MVC). Also, removed the <asp:Content> tag because you don't want the menu to be rendered in the main of your Site.Master.

Site.Master

Include this line on the top of the Site.Master

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

Change the value of the Src attribute with the path to your Menu.Ascx page.

Now you can render your Menu.ascx page wherever you want in your Site.Master like that:

<Menu:Menu runat="server" />

I am not 100% sure it will work because I haven't tested it. If something's wrong comment below. I will help you.