ASP.NET PartialView

last modified April 3, 2025

In this article, we explore PartialView in ASP.NET 8. PartialView is a powerful feature for creating reusable UI components in ASP.NET MVC applications.

ASP.NET is a cross-platform, high-performance framework for building modern web applications. PartialView helps organize complex views into smaller components.

Basic Definition

A PartialView in ASP.NET is a special view that renders a portion of HTML content. It's typically used to break up large views into smaller, reusable components.

PartialViews can be rendered inside other views using the Partial or PartialAsync HTML helper methods. They support the same Razor syntax as regular views but don't have a layout page.

PartialViews are commonly used for components like navigation menus, headers, footers, or any UI element that appears across multiple pages. They improve code maintainability and reduce duplication.

ASP.NET PartialView Example

The following example demonstrates creating and using a PartialView in ASP.NET 8.

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();

var app = builder.Build();

app.UseStaticFiles();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

This sets up a basic ASP.NET MVC application. The AddControllersWithViews method enables MVC with view support. Static files middleware is added for CSS/JS.

using Microsoft.AspNetCore.Mvc;

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var products = new List<Product>
        {
            new(1, "Laptop", 999.99m),
            new(2, "Mouse", 19.99m),
            new(3, "Keyboard", 49.99m)
        };
        
        return View(products);
    }

    public IActionResult ProductTable()
    {
        var products = new List<Product>
        {
            new(1, "Laptop", 999.99m),
            new(2, "Mouse", 19.99m),
            new(3, "Keyboard", 49.99m)
        };
        
        return PartialView("_ProductTable", products);
    }
}

public record Product(int Id, string Name, decimal Price);

The controller has two actions. Index returns the main view with all products. ProductTable returns a PartialView with just the product table component.

@model IEnumerable<Product>

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model)
        {
            <tr>
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td>@product.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</table>

This PartialView defines a reusable product table component. It follows the convention of starting with an underscore. The model is strongly typed to IEnumerable<Product>.

@model IEnumerable<Product>

<h1>Product Catalog</h1>

<div class="row">
    <div class="col-md-8">
        @await Html.PartialAsync("_ProductTable", Model)
    </div>
    <div class="col-md-4">
        <h3>Recently Viewed</h3>
        <!-- Other content -->
    </div>
</div>

<button id="refreshBtn" class="btn btn-primary">Refresh Table</button>

@section Scripts {
    <script>
        document.getElementById('refreshBtn').addEventListener('click', async () => {
            const response = await fetch('/Home/ProductTable');
            const html = await response.text();
            document.querySelector('.col-md-8').innerHTML = html;
        });
    </script>
}

The main view uses PartialAsync to render the product table. The JavaScript demonstrates refreshing just the table via AJAX, showing PartialView's power for partial page updates.

This example shows how PartialViews enable component-based UI development. The table can be reused across views and updated independently via AJAX calls.

Source

Microsoft ASP.NET PartialView Documentation

In this article, we have explored PartialView in ASP.NET 8. This powerful feature helps create modular, maintainable, and efficient web applications.

Author

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all ASP.NET tutorials.