Friday, May 24, 2019

Difference between RenderBody, RenderPage and RenderSection in MVC



This question is a real interview question of Gurgaon, Haryana company. I am trying to explain it with practical way.

CLICK HERE for My Youtube tutorial Videos

Let’s see the definitions of These:

 RenderBody Method: This method is declared inside master page. Generally known as Layout page in MVC. This method indicates that where your page contents will display.
Related Question: Can a Layout page has more than 1 RenderBody method?
Answer: NO. It will show following exception.
System.Web.HttpException: 'The "RenderBody" method has already been called.'

Syntax: @RenderBody()

RenderPage Method: This method is helpful to fill contents from other pages.
Related Question: Can a Layout page has more than 1 RenderPage method?
Answer: YES.
Syntax: @RenderPage("~/Views/Shared/_Header.cshtml")
_Header is the name of file. Its content will display where RenderPage method is used.

RenderSection Method: This method is used to show the contents of any section defined in the pages. It is helpful when your page many sections in the page and you want show any single or particular number of sections of the page.
Example of defining section in individual pages:
@section footer{
<b>From About Page</b>
}
@section MySection{
<b>My Custom Section - About Page</b>
}
Syntax of method: @RenderSection("MySection", false). Second parameter is optional, if not given, it will mandatory to declare section in page. ‘false’ shows non-mandatory.
Related Question: Can a Layout page has more than 1 RenderSection method?
Answer: YES.

teps to practice:
Step 1: Create an MVC project and name it with any Name.
Step 2: Open _Layout.cshtml file from Solution Explorer.
Step 3: Inside layout file, write following code to understand above methods-
@RenderPage("~/Views/Shared/_Header.cshtml")
       
        @RenderBody()
       
        @RenderPage("~/Views/Shared/_Header2.cshtml")
        @RenderPage("~/Views/Shared/_Header.cshtml")
        @RenderSection("footer",false)
        <hr />
        @RenderSection("MySection", false)
Step 4: Create a View inside Shared folder with name - _Header. And write following code:
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Header</title>
</head>
<body>
    <div>
        <h2>This is from Header Page Text</h2>
    </div>
</body>
</html>
Step 5: Create a View inside Shared folder with name - _Header2. And write following code:
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Header</title>
</head>
<body>
    <div>
        <h2>This is from Header 2 Page Text</h2>
    </div>
</body>
</html>
Step 6: Open View Contact.cshtml and create sections at bottom inside it:
@section footer{
    <b>From Contact Page</b>
}
@section MySection{
    <b>My Custom Section - Contact Page</b>
}
Step 7: Open View About.cshtml and create sections at bottom inside it:
@section footer{
    <b>From About Page</b>
}
@section MySection{
    <b>My Custom Section - About Page</b>
}

How to practice:
Save the changes and run the MVC project. See the changes in page by clicking on the menu options (HOME, ABOUT, CONTACT).
Remove method syntax one by one from the Layout page -> run again -> see changes. Then again add one by one and see again changes.

I hope this exaplanation will help.
Happy Coding.

Rudra Pratap Singh
Software Engineer

How to Get Organic Views on Your Channel/Content

 Hi Friends, This post will be very short and specific in the information.  If you are a content creator and want some help in getting organ...