Creating Master page in MVC
Most of web applications have logo, branding features, navigation bars, header, footer and some section (optional) etc. And these things are common across website. For achieving this will create a master page or layout page to get same common things in all pages. So we need to create a common layout page for all pages in shared folder.
Shared folder under View folder contains all the views which will be shared among different controllers e.g. layout files.
Create a Layout page with name of _masterpagelayout.cshtml
When we click this will come default
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
After Set logo, header and footer
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<section class="box">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.neerajcodesolutions.com/">Code Solutions</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="~/Home/Index">Home</a></li>
<li><a href="~/Welcome/Index">About us</a></li>
<li><a href="~/Contact/Conactus">Contact Us</a></li>
</ul>
</div>
</nav>
<div>
@RenderBody()
</div>
<div class="panel-footer"> Design By Neeraj Srivastava</div>
</section>
</div>
</body>
</html>
Controller (Home)
using MVCCODESOLUTIONS.Models;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Mail;
using System.Web;
using System.Web.Mvc;
namespace MVCCODESOLUTIONS.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
View(Index.cshtml)
@{
Layout = "~/Views/shared/_masterpagelayout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h3>
Hello friend ,
<br />
Hope this code will help you for implementing master page or layout in MVC
<br />
For more update like our facebook page
<br />
<a href="https://www.facebook.com/codesol" target="_blank"> Click here </a>
</h3>
</body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
</html>
Out-put:-
Creating Master page in MVC
Reviewed by NEERAJ SRIVASTAVA
on
2:22:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
2:22:00 PM
Rating:
No comments: