Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / C#

RenderBody, RenderPage and RenderSection Methods in MVC 3

Rate me:
Please Sign up or sign in to vote.
4.84/5 (74 votes)
12 Mar 2013CPOL3 min read 472.2K   60   27
In this article, we will learn about the three methods of MVC 3 and those are RenderBody, RenderPage, and RenderSection.

In this article, we will learn about the three methods of MVC 3 and those are RenderBody, RenderPage, and RenderSection. We will learn the following topics:

  • RenderBody
    • What is RenderBody?
    • How RenderBody works?
    • RenderBody Example
  • RenderPage
    • What is RenderPage?
    • How RenderPage works?
    • RenderPage example
  • RenderSection
    • What is RenderSection?
    • How RenderSection works?
    • RenderSection Example

Now going into details…

RenderBody

What is RenderBody?

In layout pages, renders the portion of a content page that is not within a named section. [MSDN]

How RenderBody Works (graphical presentation)?

RenderBody

RenderBody Example

It’s simple. Just create an ASP.NET MVC 3 web application by Visual Studio 2010. After creating this application, you will see that some files and folders are created by default. After that, open the _layout.cshtml file from views/Shared folder. Basically, this file will be used as a standard layout for all the pages in project. Keep in mind that you can create more than one layout page in an application and to use layout page in other page is optional. The _layout.cshtml file consists of the following code:

HTML
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" 
    rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
    type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink
                    ("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink
                    ("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

Now, open another file called index.cshtml from views/home. This file consists of the following code:

C#
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" 
    title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

Main thing is that by the above code, you couldn’t find which layout page is being used by this index page. But there is little trick done at MVC3. You will get a file called _ViewStart.cshtml in the views folder. This file consists of the following code:

C#
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

This code means that by default, all the content pages will follow the _Layout.cshtml layout page. Now if we consolidate both the _layout.cshtml and index.cshtml page, we will get the following code:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link href="@Url.Content("~/Content/Site.css")" 
rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 
type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main"><h2>@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" 
title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

It’s nothing complicated, it’s just replacing the code of RenderBody() of layout page by the code of content page.

If you want to use different layout for different content pages, then create a layout page as like _Layout.cshtml and just copy the below code to your desired content page.

C#
@{
Layout = "another layout page";
}

RenderPage

What is RenderPage?

Renders the content of one page within another page. [MSDN] The page where you will place the content could be layout or normal page.

How RenderPage Works (graphical presentation)?

RenderPage Example

Create a page called _StaticRenderPage at Views/Shared folder. Open it and paste the below code.

HTML
<p>
This messge from render page.
</p>

Open the Index.cshtml file from Views/Home folder and paste the below code:

C#
@RenderPage("~/Views/Shared/_StaticRenderPage.cshtml")

Now if you merge the code of _StaticRenderPage to Index.cshtml, then you will get the below code:

HTML
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" 
    title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<p>
This messge from render page.
</p>

If you want to pass the data by using RenderPage, then you have to use the data parameter at RenderPage. I will give another example for this. To do this, at first, create a class file called AvailableUser at Models/AccountModels. Create the class with the below code:

C#
public class AvailableUser
    {
        public string UserName { get; set; }
        public string UserPassword { get; set; }

        public static List<AvailableUser> AllUsers()
        {
            List<AvailableUser> userList = new List<AvailableUser>();

            AvailableUser user1 = new AvailableUser
            {
                UserName = "Anupam Das",
                UserPassword = "lifeisbeautiful",
            };

            AvailableUser user2 = new AvailableUser
            {
                UserName = "Chinmoy Das",
                UserPassword = "GoodTime",
            };

            userList.Add(user1);
            userList.Add(user2);

            return userList;
        }
    }

Now go to AccountController and write down the below code

C#
public ActionResult AvailableUserList()
{
return View(MvcApplication1.Models.AvailableUser.AllUsers());
}

Create a view page called AvailableUserList.cshtml at Views/Account with the below code:

C#
@model IEnumerable<MvcApplication1.Models.AvailableUser>

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

<h2>AvailableUserList</h2>

@RenderPage("~/Views/Shared/_DisplayAllUsers.cshtml", new { AvailableUser = Model })

At last, create another view page called _DisplayAllUsers at Views/Shared with the below code:

C#
@foreach (var usr in Page.AvailableUser)
{
<text>
@usr.UserName   @usr.UserPassword <br />
</text>
}

Now run the project (Account/AvailableUserList) and see the user list which comes from AvailableUser class.

RenderSection

What is RenderSection?

In layout pages, renders the content of a named section. [MSDN]

How RenderSection Works (graphical presentation)?

RenderSection Example

It’s simple, just add the below code at _layout page.

C#
@RenderSection("Bottom",false)

and add the below code at Index page.

C#
@section Bottom{
This message form bottom.
}

That’s all. But keep in mind that if you don’t want to use the Bottom section in all pages, then you must use false as the second parameter at RenderSection method. If you will mention it as false, then it will be mandatory to put Bottom section at every content page.

Now run the project and see how it works !!!

I will be happy if you found anything wrong or know more, please share it via comments.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder Codexplorer Technologies
Bangladesh Bangladesh
I am:
Founder & Technical Head at Codexplorer Technologies.
IT Consultant at Meridian Group.

I was:
Manager (IT) at Meridian Group.
Assistant Manager (Software Division) at KDS Garment Industries Limited.
Assistant Manager (Software Division) at E-Vision Software Limited.

My blog:
crea8ivecode

My preferred work area:
ASP.NET & SQL SERVER.

My email:
sadeque.sharif@yahoo.com

Follow me:
twitter | facebook | linkedin

Comments and Discussions

 
Questionvery nice article Pin
Member 1242399526-Apr-18 23:40
Member 1242399526-Apr-18 23:40 
QuestionMissing @RenderPage Pin
northturton25-Aug-16 8:35
northturton25-Aug-16 8:35 
Suggestionfalse will make section optional not mandatory Pin
s__tom14-Jan-16 0:13
s__tom14-Jan-16 0:13 
GeneralRe: false will make section optional not mandatory Pin
Member 1198839826-Aug-16 1:00
Member 1198839826-Aug-16 1:00 
Questionthanks! Pin
Member 1109139523-Sep-15 10:37
Member 1109139523-Sep-15 10:37 
Generalrendersection Pin
Rakesh kumar Behera2-Oct-14 18:17
Rakesh kumar Behera2-Oct-14 18:17 
QuestionSmall Correction Pin
Kumarbs23-Jul-14 20:11
professionalKumarbs23-Jul-14 20:11 
Questionnice article Pin
AbdullaMohammad5-Jan-14 2:06
AbdullaMohammad5-Jan-14 2:06 
just want to say it is a nice article, good coverage.
QuestionShort and simple, 5 stars Pin
Janilane18-Dec-13 16:28
Janilane18-Dec-13 16:28 
GeneralA Ray of Light in the darkness Pin
csugden22-Nov-13 3:42
professionalcsugden22-Nov-13 3:42 
GeneralNice Article Pin
JoCodes12-Nov-13 19:58
JoCodes12-Nov-13 19:58 
GeneralRe: Nice Article Pin
Sadeque Sharif12-Nov-13 21:20
professionalSadeque Sharif12-Nov-13 21:20 
GeneralMy vote of 5 Pin
Antariksh Verma4-Sep-13 22:38
professionalAntariksh Verma4-Sep-13 22:38 
GeneralMy vote of 5 Pin
nocksos29-Aug-13 21:49
nocksos29-Aug-13 21:49 
GeneralMy vote of 5 Pin
techno2mahi16-Jul-13 23:14
techno2mahi16-Jul-13 23:14 
AnswerBlog Pin
Member 1003435011-Jun-13 1:11
Member 1003435011-Jun-13 1:11 
GeneralRe: Blog Pin
Sadeque Sharif11-Jun-13 1:15
professionalSadeque Sharif11-Jun-13 1:15 
GeneralMy vote of 4 Pin
Chandrasekara Reddy10-Jun-13 3:57
Chandrasekara Reddy10-Jun-13 3:57 
GeneralRe: My vote of 4 Pin
Sadeque Sharif10-Jun-13 23:20
professionalSadeque Sharif10-Jun-13 23:20 
GeneralMy vote of 3 Pin
Donsw22-May-13 10:51
Donsw22-May-13 10:51 
QuestionPicture links broken Pin
kelvin199711-Mar-13 13:08
kelvin199711-Mar-13 13:08 
AnswerRe: Picture links broken Pin
Sadeque Sharif12-Mar-13 1:08
professionalSadeque Sharif12-Mar-13 1:08 
GeneralRe: Picture links broken Pin
Sushil Mate5-Aug-15 20:10
Sushil Mate5-Aug-15 20:10 
GeneralMy Vote of 4 Pin
deepakaitr123458-Jan-13 19:48
deepakaitr123458-Jan-13 19:48 
QuestionGood article Pin
Béla Tamás9-Dec-12 0:08
Béla Tamás9-Dec-12 0:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.