How to create a master page

In this recipe, we will take a look at how to create a master page and associate it with our view. Part of creating a master page is defining placeholders for use in the view. We will then see how to utilize the content placeholders that we defined in the master page.

How to do it...

  1. Start by creating a new ASP.NET MVC application.
  2. Then add a new master page to your solution called Custom.Master. Place it in the Views/Shared directory.
  3. Notice that there is a placeholder already placed in the middle of our page. Let's wrap that placeholder with a table. We will put a column to the left and the right of the existing placeholder. Then we will rename the placeholder to MainContent.

    Views/Shared/Custom.Master: 

    <table>
<tr>
<td>
</td>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</td>
<td>
</td>
</tr>
</table>
  4. Next, we will copy the placeholder into the first and the third columns.

    Views/Shared/Custom.Master: 

    <table>
<tr>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</td>
<td>
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</td>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"></asp:ContentPlaceHolder>
</td>
</tr>
</table>
  5. Next, we need to add a new action to the HomeController.cs file, from which we will create a new view. Do this by opening the HomeController.cs file, then add a new action named CustomMasterDemo.

    Controllers/HomeController.cs: 

    public ActionResult CustomMasterDemo()
{
return View();
}
  6. Then right-click on the CustomerMasterDemo and choose AddView, and select the new Custom.Master page that we created. Next, you need to change the ContentPlaceHolderID box to show the center placeholder name ContentPlaceHolder2. Then hit Add and you should see a new view with four placeholders.
    How to do it...

    Views/Home/CustomMasterDemo.aspx: 

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Custom Master Demo</h2>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
<meta name="description" content="Here are some keywords for our page description.">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div style="width:200px;height:200px;border:1px solid #ff0000;">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
</asp:Content>
<asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<div style="width:200px;height:200px;border:1px solid #000000;">
<b>News</b><br/>
Here is a blurb of text on the right!
</div>
</asp:Content>
  7. You should now see a page similar to this:
    How to do it...

How it works...

This particular feature is a server-side carry over from web forms. It works just as it always has. Before being sent down to the client, the view is merged into the master file and processed according to the matching placeholder IDs.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset