Working with Master Pages in ASP.NET MVC 2

ASP.NET MVC 2 Cookbook

A fast-paced cookbook with recipes covering all that you wanted to know about developing with ASP.NET MVC

• Solutions to the most common problems encountered with ASP.NET MVC development
• Build and maintain large applications with ease using ASP.NET MVC
• Recipes to enhance the look, feel, and user experience of your web applications
• Expand your MVC toolbox with an introduction to lots of open source tools
• Part of Packt’s Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible     

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.

   

   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 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.

Determining the master page in the ActionResult

In the previous recipe, we took a look at how to build a master page. In this recipe, we are going to take a look at how to control what master page to use programmatically. There are all sorts of reasons for using different master pages. For example, you might want to use different master pages based on the time of day, if a user is logged in or not, for different areas of your site (blog, shopping, forum, and so on).

How to do it…

1. We will get started by first creating a new MVC web application.
2. Next, we need to create a second master page. We can do this quickly by making a copy of the default master page that is provided. Name it Site2.Master.
3. Next, we need to make sure we can tell these two master pages apart. The easiest way to do this is to change the contents of the H1 tag to say Master 1 and Master 2 in each of the master pages.
4. Now we can take a look at the HomeController. We will check if we are in an even or odd second and based on that we can return an even or odd master page. We do this by specifying the master page name that we want to use when we return the view.Controllers/HomeController.cs:

   public ActionResult Index()
    {
    ViewData["Message"] = "Welcome to ASP.NET MVC!";
   
   string masterName = "";
   
   if (DateTime.Now.Second % 2 == 0)
   masterName = "Site2";
   else
   masterName = "Site";
   return View("Index", masterName);
   }

5. Now you can run the application. Refreshing the home page should alternate between the two master pages now and then. (Remember that this is based on the second and is now just a pure alternating page scheme.)

How it works…

This method of controlling which master page is used by the view is built into the MVC framework and is the easiest way of performing this type of control. However, having to dictate this type of logic in every single action would create quite a bit of fluff code in our controller. This option might be appropriate for certain needs though!