MSDN Documentation

Using Partial Views in ASP.NET Core MVC

Partial views are a powerful feature in ASP.NET Core MVC that allow you to break down your views into smaller, reusable components. This promotes code organization, maintainability, and enables efficient rendering of frequently used UI elements.

What are Partial Views?

A partial view is essentially a view without a layout. It can be rendered independently or embedded within another view. They are particularly useful for:

• Rendering common UI elements like headers, footers, navigation bars, or product summaries.
• Displaying dynamic content that might be loaded asynchronously.
• Simplifying complex parent views.

Creating a Partial View

To create a partial view, you can create a new Razor view file (.cshtml) and place it in the Views/Shared folder or within a specific controller's view folder (e.g., Views/Home). The key difference from a regular view is that it won't typically have a layout associated with it unless explicitly specified.

For example, let's create a simple partial view named _ProductInfo.cshtml:

<div class="product-card">
    <h4>@Model.Name</h4>
    <p>Price: $@Model.Price.ToString("N2")</p>
    <p>@Model.Description</p>
</div>

This partial view expects a model of type Product, which might look like this:

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
    public string Description { get; set; }
}

Rendering a Partial View

You can render a partial view from a controller action or from another view using the @await Html.PartialAsync() helper method.

From a Controller Action:

In your controller, you can pass data to the partial view.

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var product = new Product
        {
            Name = "Awesome Gadget",
            Price = 99.99m,
            Description = "This gadget will change your life!"
        };
        return View(product); // Assuming Index.cshtml uses the partial view
    }
}

From a Parent View (e.g., Index.cshtml):

Inside your main view, you can call the partial view helper.

<h2>Featured Product</h2>

@await Html.PartialAsync("_ProductInfo", Model)

<!-- Or if the partial view is in a controller-specific folder -->
@* @await Html.PartialAsync("ControllerSpecific/_ProductInfo", Model) *@

Advantages of Using Partial Views

• Reusability: Write UI components once and use them across multiple views.
• Modularity: Break down complex views into manageable parts.
• Maintainability: Easier to update and manage smaller, focused view components.
• Performance: Can be used for asynchronous loading of content, improving perceived page load times.

Partial View Best Practices

• Prefix partial view names with an underscore (_) to distinguish them from regular views.
• Keep partial views focused on a single UI responsibility.
• Consider using PartialAsync for better performance, especially if the partial view involves I/O operations or complex rendering.