The basic layout structure in MVC looks like this.
- _MyLayout.cshtml
- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width" />
- <title>@ViewBag.Title</title>
- @RenderSection("CSS", required: false)
- </head>
-
- <body>
- @RenderBody() @RenderSection("Scripts", required: false) @RenderPage("~/Views/Shared/_Demo.cshtml")
- </body>
-
- </html>
In ASP.NET MVC, at application level we have _ViewStart file within the Views folder for defining the default layout page.
- BundleConfig.cs
- public class BundleConfig
- {
- public static void RegisterBundles(BundleCollection bundles)
- {
- bundles.Add(newScriptBundle("~/bundles/bootstrap")
- .Include(
- "~/Scripts/bootstrap.js", "~/Scripts/respond.js"));
- bundles.Add(newStyleBundle("~/Content/css")
- .Include("~/Content/bootstrap.css", "~/Content/site.css"));
- }
- }
- Scripts.Render generates script tags for each item in Script bundle when optimizations are disabled.
- Styles.Render generates multiple style tags in the CSS bundle.
- Index.cshtml
- @{
- ViewBag.Title = "Home";
- Layout = "~/Views/_MyLayout.cshtml";
- }
- <!-- MAIN-->
- <div id="main">
- <!-- @RenderBody()renders here.-->
- Hi , This is Demo.
- </div>
-
- @section CSS {
-
- @Styles.Render("~/Content/css")
- <link href="~/Content/css/jquery-ui.css"rel="stylesheet"/>
- <link href="~/Content/js/rating/jquery.rateyo.css"rel="stylesheet"/>
- }
-
-
- @section Scripts {
-
- @Scripts.Render("~/bundles/bootstrap ")
- <script src="~/Content/js/jquery-ui.min.js"></script>
- <script src="~/Content/js/rating/jquery.rateyo.js"></script>
-
- }
- @RenderPage()
RenderPage method exists in our Layout Page to render the other page if you want.
Example
- @RenderPage("~/Views/Shared/_Demo.cshtml")