Thursday, 26 December 2013

RenderPartial vs RenderAction vs Partial vs Action in MVC Razor

There are different ways for rendering a partial view in MVC Razor. Many developers got confused whether to use RenderPartial or RenderAction or Partial or Action helper methods for rendering a partial view. In this article, I would like to expose the difference among Html.RenderPartial, Html.RenderAction, Html.Partial & Html.Action.

Html.RenderPartial

  1. This method result will be directly written to the HTTP response stream means it used the same TextWriter object as used in the current webpage/template.
  2. This method returns void.
  3. Simple to use and no need to create any action.
  4. RenderPartial method is useful used when the displaying data in the partial view is already in the corresponding view model.For example : In a blog to show comments of an article, we would like to use RenderPartial method since an article information with comments are already populated in the view model.
    1. @{Html.RenderPartial("_Comments");}
  5. This method is faster than Partial method since its result is directly written to the response stream which makes it fast.

Html.RenderAction

  1. This method result will be directly written to the HTTP response stream means it used the same TextWriter object as used in the current webpage/template.
  2. For this method, we need to create a child action for the rendering the partial view.
  3. RenderAction method is useful when the displaying data in the partial view is independent from corresponding view model.For example : In a blog to show category list on each and every page, we would like to use RenderAction method since the list of category is populated by the different model.
    1. @{Html.RenderAction("Category","Home");}
  4. This method is the best choice when you want to cache a partial view.
  5. This method is faster than Action method since its result is directly written to the HTTP response stream which makes it fast.

Html.Partial

  1. Renders the partial view as an HTML-encoded string.
  2. This method result can be stored in a variable, since it returns string type value.
  3. Simple to use and no need to create any action.
  4. Partial method is useful used when the displaying data in the partial view is already in the corresponding view model.For example : In a blog to show comments of an article, we would like to use RenderPartial method since an article information with comments are already populated in the view model.
    1. @Html.Partial("_Comments")

Html.Action

  1. Renders the partial view as an HtmlString .
  2. For this method, we need to create a child action for the rendering the partial view.
  3. This method result can be stored in a variable, since it returns string type value.
  4. Action method is useful when the displaying data in the partial view is independent from corresponding view model.For example : In a blog to show category list on each and every page, we would like to use Action method since the list of category is populated by the different model.
    1. @{Html.Action("Category","Home");}
  5. This method is also the best choice when you want to cache a partial view.
What do you think?
I hope you will enjoy the tips and tricks while programming with MVC Razor. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Continue Reading →

Monday, 16 December 2013

RenderBody, RenderPage and RenderSection methods in MVC 3


In this article we will learn about the three methods of MVC 3 and those are RenderBodyRenderPage, andRenderSection. We will learn by the following topics:
  • RenderBody
    • What is RenderBody?
    • How RenderBodyworks?
    • RenderBody Example
  • RenderPage
    • What is RenderPage?
    • How RenderPageworks?
    • RenderPage example
  • RenderSection
    • What is RenderPage?
    • How RenderPageworks?
    • RenderPage Example
Now go to in detail…

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 Example
It’s simple. Just create a 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/Sharedfolder.  Basically this file will be used as a standard layout for all the page in project. Keep in mind that you can create more then one layout page in a application and to use layout page in other page is optional. The _layout.cshtml file consist the following code.

<!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:

@{
    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 tricks done at MVC3. You will get a file called _ViewStart.cshtml at views folder. This file consist of  following code.

@{
    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 the _layout.cshtml and index.cshtml page both, we will get the following code.

<!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 below code to your desired content page.

@{
  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.

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

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

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

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

@{
    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.

    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
public ActionResult AvailableUserList()
{
return View(MvcApplication1.Models.AvailableUser.AllUsers());
}

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

@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.

@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.

@RenderSection("Bottom",false)

and add the below code at Index page.

@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 page then must use the false as second parameter at RenderSection method. If you will mention it as false then it will be mandatory to put Botton section at every content page.
I will be happy, if you found anything wrong or know more please share it via comments.


Continue Reading →

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (10) Web Service (1) XMl (1)