ASP.NET MVC 5 – RenderBody, RenderPage and RenderSection with Example

In this chapter, you will learn:
1. What is RenderBody, RenderPage, and RenderSection in MVC 5?
2. How to use @RenderBody?
3. How to use @RenderSection?
4. How to use @RenderPage?
5. What are Styles.Render and Scripts.Render and How to use it?

While creating Master Page Layout in ASP.NET MVC 5, you may encounter with @RenderBody, @RenderPage, and @RenderSection. In this tutorial, you will learn all about these with complete programming example.

@RenderBody

@RenderBody is used for injecting content from child page into the master page design. If there is no named section in child page, the content will get displayed in RenderBody section.

Example:
//Layout Page
<div class="content">
            @RenderBody()
</div>

//Child Page
@{
    ViewBag.Title = "DarkLayoutPage";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}
 

<h2>DarkLayoutPage</h2>
Hello CompShop Appliation. I am in RenderBody section because there is no named section for me.

Output
Render Body Output

@RenderSection

@RenderSection is used for injecting content in the defined section. It allows you to specify a region in Layout.

Two steps are there to define @RenderSection in ASP.NET MVC.

A. Specify a @RenderSection Area in Layout Page.
<div style="background-color:rebeccapurple; color:antiquewhite; font-weight:bold">
        @RenderSection("Note",false)
    </div>
    <!-- End of Content Body -->

    <!-- Footer -->
    <footer>
        <h4>I am Footer.</h4>
        <div style="background-color:red; color:aliceblue">@RenderSection("Footer", false)</div>
    </footer>

B. Use this specified section to inject content from child page.
@{
    ViewBag.Title = "DarkLayoutPage";
    Layout = "~/Views/Shared/_DarkLayout.cshtml";
}

<h2>DarkLayoutPage</h2>

Hello CompShop Application. I am in RenderBody section because there is no named section for me.

@section Note
{
    I am a RenderSectionArea.
}

@section Footer
{
    I am Footer Section Areas.
}
<h2>Hello world</h2>
Note: Order doesn’t matter. You can use @section Footer before @section Note and the output would be same.

You have noticed that I have used false parameter when created a section on the layout page.
@RenderSection("Footer", false)

false parameter denotes that Footer section is optional and It is your choice whether to use it or not. If you use true parameter then it is compulsory to use this section in child page otherwise you will get following error.

[HttpException (0x80004005): Section not defined: "Footer".]

Output:
rendersection

@RenderPage

@RenderPage is used to call one page inside another page. For example, you have promotional texts and photos, and you want to use it all on your page but the condition is that promotions have to change frequently.

You just create a page containing promotional texts and photos and use this page wherever you want to insert. When the web page will get rendered in the browser, it will render all the content of that page. When you want to change promotional texts just change it in one place and it would reflect all the pages.

Example:
1. Go to View Shared folder and create _StaticPromotionalPage.
2. Add following code into this page.
<div style="padding:10px; background-color:#f3f045; color:#dc1f36; position:inherit">
    <strong>This is Promotional page</strong>
    You can use this page to insert this content.
</div>
3. Now, open Home DarkLayoutPage.cshtml and insert _StaticPromotionalPage like this.
@RenderPage("~/Views/Shared/_StaticPromotionalPage.cshtml")
Output:
Render Page
 

COMPLETE CODE

1. View Shared _DarkLayout.cshtml
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body style="background-color:burlywood">
    
    <!-- Header -->
    <header>
        <h1 style="text-align:center; color:bisque">My Dark Layout Page</h1>
    </header>
    <!-- End of Header -->

    <!-- Left Sidebar -->
    <nav>
        <h3>Navigation</h3>
        @Html.ActionLink("About","About");<br />
        @Html.ActionLink("Contact", "Contact");<br />
        @Html.ActionLink("Enquiry", "Enquiry");<br />
        @Html.ActionLink("Home", "Home");<br />
        @Html.ActionLink("Purchase", "Purchase");<br />
    </nav>
    <!-- End of Left Sidebar -->
    
    <!-- Content Body -->
    <div class="content">
            @RenderBody()
    </div>

    <div style="background-color:rebeccapurple; color:antiquewhite; font-weight:bold">
        @RenderSection("Note",false)
    </div>
    <!-- End of Content Body -->

    <!-- Footer -->
    <footer>
        <h4>I am Footer.</h4>
        <div style="background-color:red; color:aliceblue">@RenderSection("Footer", false)</div>
    </footer>

    <!-- Style -->
    <style>
        header {
            height: 100px;
            width: 100%;
            background-color: red;
        }

        nav {
            float: left;
            width: 200px;
            height: 250px;
            background-color: darkgoldenrod;
        }

        .content {
            background-color: aliceblue;
            padding: 20px;
        }

        footer {
            background-color: green;
            width: 100%;
            height: 50px;
            float: right;
            text-align: center;
        }
    </style>
</body>
</html>
2. Views Home DarkLayoutPage.cshtml
@{
    ViewBag.Title = "DarkLayoutPage";
    Layout = "~/Views/Shared/_DarkLayout.cshtml";
}


<h2>DarkLayoutPage</h2>

Hello CompShop Application. I am in RenderBody section because there is no named section for me.

@RenderPage("~/Views/Shared/_StaticPromotionalPage.cshtml")



@section Note
{
    I am a RenderSectionArea.
}

@section Footer
{
    I am Footer Section Areas.
}


<h2>Hello world</h2>
3. Controllers HomeController.cs
using System.Web.Mvc;

namespace CompShop.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";
            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }

        public ActionResult Enquiry()
        {
            return View();
        }

        public ActionResult Purchase()
        {
            return View();
        }
        public ActionResult DarkLayoutPage()
        {
            return View();
        }
    }
}
4. Views Shared _StaticPromotionalPage.csthml
<div style="padding:10px; background-color:#f3f045; color:#dc1f36; position:inherit">
    <strong>This is Promotional page</strong>
    You can use this page to insert this content.
</div>
Output:
Render Page

Summary:

In this chapter, you learned @RenderBody, @RenderSection, and @RengerPage in details with complete programming example. In the next chapter, you will learn about Partial View Pages in ASP.NET MVC5.

More Articles

 

Share your thought