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

Manish Singh
13y
100k
0
0

Article

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"

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

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"

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.

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.

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:

Step11: Press cltr+f5 run the application.

Output: