Partial View in ASP.NET MVC

Partial View in ASP.NET MVC

26 Mar 2024
Intermediate
204K Views
8 min read

Partial View in ASP.NET MVC: An Overview

In this MVC Tutorial, we will explain the Partial View of ASP.NET MVC. A partial view is like a user control in Asp.Net Web forms used for code re-usability. Partial views help us to reduce code duplication. Hence partial views are reusable views like Header and Footer views.

We can use a partial view to display blog comments, product categories, social bookmark buttons, a dynamic ticker, a calendar, etc. For understanding the different rendering ways of partial view refer to the article RenderPartial vs RenderAction vs Partial vs Action in MVC Razor

Read More: MVC Interview Questions and Answers

What is a Partial View in ASP.NET MVC?

Partial View is a subpage of the Main View page that keeps reusable parts of web pages. Partial views in ASP.NET MVC allow you to reuse and customize components to act like user controls. They can consist of both Razor Code and CSS/Javascript. They can also be returned directly from controller methods. In this case, the browser still receives text/HTML content but not necessarily HTML content that makes up an entire page.

Types of Partial Views in ASP.NET MVC

1. Static Partial View: This view renders the static data.
  • @{Html.RenderPartial(“_PartialView”);} - It will return the void. Displays the output on your view page.
  • @Html.Partial(“_PartialView”); - It will return an MVC HTML string, you can store it in a particular variable.
2. Dynamic Partial View: This view implements the dynamic data.
  • @{Html.RenderAction(“_PartialView”);} - It will return the MVC HTML string.
  • @Html.Action(“_PartialView”);

How to Use the Partial Views in ASP.NET MVC Application?

  1. Create the Partial View

    Create a partial view (.cshtml file) containing the HTML markup and Razor code you want to reuse across multiple views.

    Example

    
    <!-- _PartialView.cshtml -->
    <div class="widget">
        <h2>Recent Posts</h2>
        <!-- Content of the partial view -->
    </div>
    
  2. Render the Partial View in a View

    Use the @Html.Partial or @Html.RenderPartial helper methods to render the partial view within other views where you want to reuse the content. Pass any necessary data to the partial view as a model.

    Example

    
    
    <div class="main-content">
        <h1>Welcome to ScholarHat</h1>
        @Html.Partial("_PartialView")
    </div>
    
  3. Pass Data to Partial View

    This is an optional step. If the partial view requires data, pass it as the second parameter to the @Html.Partial or @Html.RenderPartial method.

    Example

    
    <!-- SomeView.cshtml -->
    <div class="main-content">
        <h1>Welcome to ScholarHat</h1>
        @Html.Partial("_PartialView", model)
    </div>
    

Creating A Partial View

A partial view has the same file extension(.cshtml) as a regular view. To create a partial view, click on a shared folder (\Views\Shared) in Solution Explorer click on the "Add New View" option, and then give the name for the partial view and also check the Create a partial view option as shown in Fig.

Creating A Partial View Creating A Partial View

Note

  1. It is best practice to create a partial view in the shared folder and the partial view name is preceded by "_", but it is not mandatory. The "_" before the view name specifies that it is a reusable component i.e. partial view.

Rendering Partial View

A partial view is rendered by using the ViewUserControl class that is inherited/derived from the ASP.NET UserControl class. The Partial, RenderPartial, and RenderAction helper methods are used to render partial view in mvc3 razor.

 <div> @Html.Partial("_Comments") </div> 
<div> @{Html.RenderPartial("_Comments");} </div> 

The main difference between the above two methods is that the Partial helper method renders a partial view into a string while the RenderPartial method writes directly into the response stream instead of returning a string.

 <div> @{Html.RenderAction("_Category","Home");} </div> 

Note

  1. Partial or RenderPartial methods are used when a model for the page is already populated with all the information. For example in a blog to show an article comment we would like to use Partial or RenderPartial methods since article information is already populated in the model.

  2. The redirection method is used when some information is needed to show on multiple pages. Hence the partial view should have its model. For example, to categorize the list of articles on every page we would like to use the RenderAction method since the list of categories is populated by different models.

Render Partial View Using jQuery

Sometimes we need to load a partial view within a popup on run time like as a login box, then we can use jQuery to make an AJAX request and render a Partial View into the popup. To load a partial view within a div we need to do like this:

 <script type="text/jscript"> 
$('#divpopup').load('/shared/_ProductCategory’); 
</script> 
Summary

I hope you will enjoy these tips and tricks while programming with Asp.Net MVC. I would like to have feedback from my blog readers. Your valuable feedback, questions, or comments about this article are always welcome. Enjoy Coding..!

Unlock the Next level of MVC

FAQs

Q1. What is partial view?

Partial view is a Razor markup file ( . cshtml ) without a @page directive that renders HTML output within another markup file's rendered output.

Q2. What is the difference between view and Partialview?

The partial view is more lightweight than the view.

Q3. Can partial view have layout?

The Partial view is not the recommended approach to maintaining common layout elements
Share Article
Batches Schedule
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Self-paced Membership
  • 22+ Courses
  • 750+ Hands-On Labs
  • 300+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A
  • 10+ Real-world Projects
  • Career Coaching
  • Email Support
Upto 66% OFF
KNOW MORE..

To get full access to all courses

Accept cookies & close this