Tuesday, January 22, 2013

Masterpage in mvc4 or layout design in mvc4

Wondering how to set masterpage in MVC4 ! _Layout.cshtml is same as master page in aspx, the moment you create mvc4 application you may notice the file in shared folder inside the root. First time it may look like how to customize the masterpage ( template ) with user control as per your business need,  MVC 4 is much easier than i expected it to be.

I am happy to share my first template design with MVC4

< html >
< head >
    < meta charset="utf-8" / >
    < meta name="viewport" content="width=device-width" / >
    < title >@ViewBag.Title< /title >
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
< /head >
< body >
    < div >
        @{Html.RenderPartial("TopNavigation");}
    < /div >
    < div style="float: left; width: 15%;" >
        @{Html.RenderPartial("LeftNavigation");}
    < /div >
    < div style="float: left; width: 85%;" >
        @RenderBody()
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    < /div >
    < div style="clear: both;" >
    < /div >
    < div >
        @{Html.RenderPartial("BottomNav");}
    < /div >
< /body >
< /html >


if you notice @{Html.RenderPartial("PartialViewName");} is the syntax for adding any partial view (similar to user control )

Now lets use the master page in some mvc4 razor page, so i have created a razor page called aboutus.cshtml , and have written the code below

@{
    ViewBag.Title = "AboutUs";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

< h2 >AboutUs< /h2 >

< div >
This is something about the current organisation
< /div >

done, my master page / layout has been set successfully.

No comments: