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

Layout in mvc






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 Creating Master page in MVC Reviewed by NEERAJ SRIVASTAVA on 2:22:00 PM Rating: 5

No comments:

Powered by Blogger.