Why Partial View In ASP.NET MVC

Partial Views are a type of view which can be reused across the ASP.NET MVC application. It is same as User Control in ASP.NET which can reuse multiple times inside the different views. It is not bound to any particular action method.

When to create Partial View

When you think that the particular data is required again and again in different places it can be single view or different view. In that scenario, we need to create the Partial View. The main purpose of creating the Partial View, writing the code again and again for same output or same piece of information we can create a Partial View and place the data inside it. This can be used anywhere inside the View.

So, basically Partial View is used to reduce the duplication of the same type of data. We can know it as reusable view.

There are different places where we can use Partial View like website header and footer, menu bar, category list, comment section, etc.



How to create Partial View

Partial View exists inside the \Views\Shared folder. Because it is accessible to all controller. To add new Partial View, Right Click on Shared folder and choose Add and then choose View;



It will open a Add View window, where you can define the name of the Partial View and check the checkbox “Create as a Partial View” for making the view as partial view.



But in ASP.NET MVC 5, you can create different type of view directly as in the following image,



See the following code, which is used for menu bar. If I am going to create multiple view with menu bar then I need to write it multiple times but I can use Partial View here to make my view clear and understandable.

Menu bar HTML code

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <div class="navbar-brand">
                <div class="logoimage">
                    <a href="@Url.Action(" Index ", "Home ")"> <img src="~/Content/Images/logo.png" width="30" height="30" alt="D" /> </a>
                </div>
                <div class="logotitle"> <a href="@Url.Action(" Index ", "Home ")"><span style="padding-top: 0px; color: white;">Dotnet Tutorial</span></a> </div>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"> <a href="@Url.Action(" Index ", "Home ")">Home</a> </li>
                <li> <a href="@Url.Action(" Index ", "Tutorials ")">Tutorials</a> </li>
                <li> <a href="@Url.Action(" Index ", "Articles ")">Articles</a> </li>
                <li> <a href="@Url.Action(" Index ", "interview ")">Interviews</a> </li>
                <li> <a href="@Url.Action(" AboutUs ", "Home ")">About</a> </li>
                <li> <a href="@Url.Action(" contactus ", "Home ")">Contact</a> </li>
            </ul> } </li>
            </ul>
        </div>
    </div>
</nav>

To manage it, we can create a _headerPartialView.cshtml partial view inside the Shared folder and place this code inside it and reuse it anywhere we ant as in then following,

@Html.Partial("_headerPartialView ")

Partial View inside Partial View

We can also use a Partial View inside a Partial View. See the following example, here I created a SideBar.cshtml Partial View, which will show all the shortcut menu items on the website. But to show the items I have again created more partial views.

Index.cshtml

@Html.Partial("SideBar")

SideBar.cshtml

<div>
    <div class="panel panel-default text-left">
        <div class="panelheaderOrange"> Search </div>
        <div class="panel-body">
            <div class="input-group"> @Html.Partial("SearchBar") </div>
        </div>
    </div>
</div>
<div>
    <div class="panel panel-default text-left">
        <div class="panelheaderblue"> Categories </div>
        <div class="panel-body">
            <div id="dvHomeCategoriesBind">
                <div class="loaderCenter"> @*<img src="~/Content/img/loader.gif" />*@<span class="loadingText">Category Loading....</span> </div>
            </div>
        </div>
    </div>
</div>
<div>
    <div class="panel panel-default text-left">
        <div class="panelheaderRed"> Recent Articles </div>
        <div class="panel-body">
            <div id="dvHomeRecentPostBind">
                <div class="loaderCenter"> <span class="loadingText">Recent Articles Loading....</span> </div>
            </div>
        </div>
    </div>
</div>
<div>
    <div class="panel panel-default text-left">
        <div class="panelheaderGreen"> Popular Articles </div>
        <div class="panel-body">
            <div id="dvHomePopularPostBind">
                <div class="loaderCenter"> <span class="loadingText">Popular Articles Loading....</span> </div>
            </div>
        </div>
    </div>
</div> @Html.Partial("FollowUs") @Html.Partial("FindUsOnFacebook") @Html.Partial("FindUsOfGoogle")

See above, we are using the Partial View with different ways. Actually Partial View is nothing but only a DIV. So, we can bind it directly from jQuery.



How to bind Partial View with Data

There are various ways to bind the data of Partial View, but according to me, you should always prefer to bind the data using JQuery or Ajax calling. See the following code how I am going to bind the SideBar.cshtml Partial View data.

function LoadHomeCategory()
{
    $.ajax(
    {
        url: "/Categories/BlogCategories",
        contentType: "application/html; charset=utf-8",
        type: "GET",
        cache: !0,
        datatype: "html",
        success: function (t)
        {
            $("#dvHomeCategoriesBind")
                .html(t)
        },
        error: function ()
        {
            $("#dvHomeCategoriesBind")
                .html("Category Not Found")
        }
    })
}

function LoadHomeRecentPost()
{
    $.ajax(
    {
        url: "/Recents/RecentPosts",
        contentType: "application/html; charset=utf-8",
        type: "GET",
        cache: !0,
        datatype: "html",
        success: function (t)
        {
            $("#dvHomeRecentPostBind")
                .html(t)
        },
        error: function ()
        {
            $("#dvHomeRecentPostBind")
                .html("Post Not Found")
        }
    })
}

function LoadHomePopularPost()
{
    $.ajax(
    {
        url: "/Recents/PopularPosts",
        contentType: "application/html; charset=utf-8",
        type: "GET",
        cache: !0,
        datatype: "html",
        success: function (t)
        {
            $("#dvHomePopularPostBind")
                .html(t)
        },
        error: function ()
        {
            $("#dvHomePopularPostBind")
                .html("Post Not Found")
        }
    })
}

function LoadRelatedPost()
{
    $.ajax(
    {
        url: "/Recents/RelatedPosts",
        contentType: "application/html; charset=utf-8",
        type: "GET",
        cache: !0,
        datatype: "html",
        success: function (t)
        {
            $("#dvRelatedPostBind")
                .html(t)
        },
        error: function ()
        {
            $("#dvRelatedPostBind")
                .html("Post Not Found")
        }
    })
}
$(document)
    .ready(function ()
    {
        LoadHomeCategory(), LoadHomeRecentPost(), LoadHomePopularPost()
    });

Thanks for reading the article, hope you enjoyed it.