Post
Ask Question

Creating Page Layouts with View Master Page in ASP.NET MVC


Introduction: This is a simple application for beginners that helps wil how to add your own master page in an ASP.NET MVC application.  We know that MVC is the integrated module that is built on three seperated words that mean Model,VIew,Controller. Models are used to create the business logic. Views is provide the presentation and controller handle the request provide by model and view. Master Pages were introduced in version 2.0 of ASP.NET. Master Pages are a template that other pages can inherit from to keep consistent functionality. The pages that inherit from Master Pages are referred to as content pages. Master Pages allow the ASP.NET developer to keep consistent reusable, web based code (html, css, javascript, etc.) in one high level place so the content pages can concentrate on their specific web-based code. It contains the extension ".master" a common SharePoint Master Page is default.master. ASP.NET MVC gives you a powerful patterns based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable agile development

Step1: Open Visual Studio 2010.

  • Go to file -> New->Projects
  • Create an ASP.NET MVC 2 Empty Web Application
  • Name it "Sonal"

start.gif

startappli.gif

Step2: Add master page in shared folder.

  • Right Click of shared folder add master page
  • Right Click of shared folder ->add->add new items->Web->MVC->View master page

adddcontent.gif

master.gif

masterpagedesign.gif

Step 3: Write the code of the master page.

Code:
 <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" AutoEventWireup="false" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head id="Head1" runat="server">
     <title></title>
     <style type="text/css">
     html
     {
           background-color:Green;
     }
     .column
     {
          float:left;
          width:300px;
          border:solid 1px black;
          margin-right:10px;
          padding:5px;
          background-color:white;
          min-height:500px;
     }
     </style>
     <asp:ContentPlaceHolder ID="head" runat="server">
     </asp:ContentPlaceHolder>
 </head>
<body>
     <h1> This is Manish application</h1>
<div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
     </div>
     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
          </asp:ContentPlaceHolder>
     </div>
 </body>
</html>

Step 4: Add a folder of view.

  • Right click of View Folder->Add->New Folder
  • The name of Folder is "Home"

addfolder.gif

Step 5: Add the content page on the in home folder.

  • Right click of Home Folder->Add->Add new item->Web->MVC->add content page.
  • Nmae of content page is "content.

adddmaster.gif

content.gif

contentdesign.gif

Step6: Write the following code on the content page.

Code:
 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/manish.Master" AutoEventWireup="false" Inherits="System.Web.Mvc.ViewPage" %>
 <script runat="server">
 </script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>This is manish page</h1>
 <asp:Image ID="Image2" runat="server" Height="243px"
    ImageUrl="~/Image/Panoramics_Images.jpg" Width="300px"></asp:Image>
 </asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <h1>This is sandeep page</h1>
 <asp:Image ID="Image1" runat="server" Height="244px"
    ImageUrl="~/Image/Taj Mahal.jpg" Width="301px" />
 </asp:Content>
 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/manish.Master" AutoEventWireup="false" Inherits="System.Web.Mvc.ViewPage" %>
 <script runat="server">
 </script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>This is manish page</h1>
 <asp:Image ID="Image2" runat="server" Height="243px"
    ImageUrl="~/Image/Panoramics_Images.jpg" Width="300px"></asp:Image>
 </asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <h1>This is sandeep page</h1>
 <asp:Image ID="Image1" runat="server" Height="244px"
    ImageUrl="~/Image/Taj Mahal.jpg" Width="301px" />
 </asp:Content>

Step 7: Add a controller.

  • Right click on the Controllers folder ->add->Controllers.
  • Name of the Controller is "Home".
  • In a controller, define the request.

Ccontrolleer.gif

aaaaaaaaaaaaaaaaaa.gif

Step8: Write the code for the controller.

Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Sonal.Controllers;
namespace Sonal.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult content()
        {
            return View();
        }
    }
}

Step 9: Some changes in the global.aspx file.

Code:
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "content", id = UrlParameter.Optional } // Parameter defaults
            );
  }

Step 10:  The complete application is:

complete applicatiom.gif

Step11: Press cltr+f5 run the application.

Output:

output.gif

 


Similar Articles