MVC 5 - RenderBody, RenderPage and RenderSection With Example PDF

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
1 <div class="content">
2 @RenderBody()
3 </div>
//Child Page
1 @{
2 ViewBag.Title = "DarkLayoutPage";
3 Layout = "~/Views/Shared/_MyLayout.cshtml";
4 }
5
6
7 <h2>DarkLayoutPage</h2>
8 Hello CompShop Appliation. I am in RenderBody section because there is no named section for me.
Output
(https://www.completecsharptutorial.com/wp-content/uploads/2017/10/New-Picture-12.png)
@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.

1 <div style="background-color:rebeccapurple; color:antiquewhite; font-weight:bold">
2 @RenderSection("Note",false)
3 </div>
4 
5
6 
7 <footer>
8 <h4>I am Footer.</h4>
9 <div style="background-color:red; color:aliceblue">@RenderSection("Footer", false)</div>
10 </footer>
B. Use this specified section to inject content from child page.

1 @{
3 Layout = "~/Views/Shared/_DarkLayout.cshtml";
4 }
5
7
8 Hello CompShop Application. I am in RenderBody section because there is no named section for me.
9
10 @section Note
11 {
12 I am a RenderSectionArea.
13 }
14
15 @section Footer
16 {
17 I am Footer Section Areas.
18 }
19 <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:
(https://www.completecsharptutorial.com/wp-content/uploads/2017/10/rendersection.png)
@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.
1 <div style="padding:10px; background-color:#f3f045; color:#dc1f36; position:inherit">
2 <strong>This is Promotional page</strong>
3 You can use this page to insert this content.
4 </div>
3. Now, open Home  DarkLayoutPage.cshtml and insert _StaticPromotionalPage like this.

@RenderPage("~/Views/Shared/_StaticPromotionalPage.cshtml")
Output:
(https://www.completecsharptutorial.com/wp-content/uploads/2017/10/New-Picture-4-1.png)
COMPLETE CODE
1. View  Shared  _DarkLayout.cshtml

1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <meta name="viewport" content="width=device-width" />
6 <title>@ViewBag.Title</title>
7 </head>
8 <body style="background-color:burlywood">
9
10 
11 <header>
12 <h1 style="text-align:center; color:bisque">My Dark Layout Page</h1>
13 </header>
14 
15
16 
17 <nav>
18 <h3>Navigation</h3>
19 @Html.ActionLink("About","About");<br />
20 @Html.ActionLink("Contact", "Contact");<br />
21 @Html.ActionLink("Enquiry", "Enquiry");<br />
22 @Html.ActionLink("Home", "Home");<br />
23 @Html.ActionLink("Purchase", "Purchase");<br />
24 </nav>
25 
26
27 
28 <div class="content">
29 @RenderBody()
30 </div>
31
32 <div style="background-color:rebeccapurple; color:antiquewhite; font-weight:bold">
33 @RenderSection("Note",false)
34 </div>
35 
36
37 
38 <footer>
39 <h4>I am Footer.</h4>
40 <div style="background-color:red; color:aliceblue">@RenderSection("Footer", false)</div>
41 </footer>
42
43 
44 <style>
45 header {
46 height: 100px;
47 width: 100%;
48 background-color: red;
49 }
50
51 nav {
52 float: left;
53 width: 200px;
54 height: 250px;
55 background-color: darkgoldenrod;
56 }
57
58 .content {
59 background-color: aliceblue;
60 padding: 20px;
61 }
62
63 footer {
64 background-color: green;
65 width: 100%;
66 height: 50px;
67 float: right;
68 text-align: center;
69 }
70 </style>
71 </body>
72 </html>
2. Views  Home  DarkLayoutPage.cshtml

1 @{
3 Layout = "~/Views/Shared/_DarkLayout.cshtml";
4 }
5
6
8
9 Hello CompShop Application. I am in RenderBody section because there is no named section for me.
10
11 @RenderPage("~/Views/Shared/_StaticPromotionalPage.cshtml")
12
13
14
15 @section Note
16 {
17 I am a RenderSectionArea.
18 }
19
20 @section Footer
21 {
22 I am Footer Section Areas.
23 }
24
25
26 <h2>Hello world</h2>
3. Controllers  HomeController.cs
1 using System.Web.Mvc;
2
3 namespace CompShop.Controllers
4 {
5 public class HomeController : Controller
6 {
7 public ActionResult Index()
8 {
9 return View();
10 }
11
12 public ActionResult About()
13 {
14 ViewBag.Message = "Your application description page.";
15 return View();
16 }
17
18 public ActionResult Contact()
19 {
20 ViewBag.Message = "Your contact page.";
21 return View();
22 }
23
24 public ActionResult Enquiry()
25 {
26 return View();
27 }
28
29 public ActionResult Purchase()
30 {
31 return View();
32 }
33 public ActionResult DarkLayoutPage()
34 {
35 return View();
36 }
37 }
38 }
4. Views  Shared  _StaticPromotionalPage.csthml

1 <div style="padding:10px; background-color:#f3f045; color:#dc1f36; position:inherit">
2 <strong>This is Promotional page</strong>
3 You can use this page to insert this content.
4 </div>
Output:
(https://www.completecsharptutorial.com/wp-content/uploads/2017/10/New-Picture-4-1.png)
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 (https://www.completecsharptutorial.com/asp-net-mvc5/adding-partial-views-pages-
in-mvc-5-with-example.php).
MORE ARTICLES
 Previous Article (https://www.completecsharptutorial.com/asp-net-mvc5/asp-net-mvc-5-

create-master-page-layout-with-easy-steps.php) Next Article 
(https://www.completecsharptutorial.com/asp-net-mvc5/adding-partial-views-
pages-in-mvc-5-with-example.php)
SHARE YOUR THOUGHT

 Like us
Complete Csharp Tut…

2,816 likes
Like Page Share
Be the first of your friends to like this
Complete Csharp
Tutorial
about 2 months ago
https://www.completecsharptutorial.co
m/…/retrieve-database-…
Retrieve Database Result in MVC
and Convert and Download Output
into PDF. Easy C# Example.
Copyright © 2011-2022 Complete C# Tutorial (https://www.completecsharptutorial.com) | Copyright

(https://www.completecsharptutorial.com/copyright.php) | Cookie and Privacy
(https://www.completecsharptutorial.com/privacy.php)

MVC 5 - RenderBody, RenderPage and RenderSection With Example PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

MVC 5 - RenderBody, RenderPage and RenderSection With Example PDF

Încărcat de

Drepturi de autor:

Formate disponibile

ASP.

NET MVC 5 – RenderBody, RenderPage And RenderSection

In this chapter, you will learn:

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

A. Specify a @RenderSection Area in Layout Page.

B. Use this specified section to inject content from child page.

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

3. Now, open Home  DarkLayoutPage.cshtml and insert _StaticPromotionalPage like this.

1. View  Shared  _DarkLayout.cshtml

2. Views  Home  DarkLayoutPage.cshtml

4. Views  Shared  _StaticPromotionalPage.csthml

 Previous Article (https://www.completecsharptutorial.com/asp-net-mvc5/asp-net-mvc-5-

SHARE YOUR THOUGHT

Complete Csharp Tut…

Like Page Share

Be the first of your friends to like this

Copyright © 2011-2022 Complete C# Tutorial (https://www.completecsharptutorial.com) | Copyright

S-ar putea să vă placă și