Asp.Net Core Viewcomponents And Partial Views Complete Guide

ASP.NET Core View Components and Partial Views: A Detailed Guide

What are Partial Views?

Partial views are reusable components in Razor views that are intended for smaller snippets of UI code. They can be embedded within other views to minimize code duplication. Partial views are useful for creating modular UI elements like headers, footers, navigation bars, and other recurring UI elements.

Key Features of Partial Views:

• Reusability: A partial view can be reused across multiple different views.
• Simplicity: They are straightforward to implement and do not require a separate view model.
• Statelessness: Partial views do not maintain any state; they are pure UI components.

Creating a Partial View: To create a partial view, you follow a similar process to creating a normal Razor view:

1. Create the Partial View File:

   • Create a .cshtml file in the Views/Shared folder or a specific view folder.
   • Prefix the file name with an underscore (e.g., _HeaderPartial.cshtml). This prefix is a convention that signals to the framework that this view is intended to be a partial view.

2. Render the Partial View:

   • Use @await Html.PartialAsync("_HeaderPartial") or @await Html.RenderPartialAsync("_HeaderPartial") to render the partial view within a different view.

Example:

<!-- _HeaderPartial.cshtml -->
<nav>
  <ul>
    <li><a href="/Home">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
  </ul>
</nav>

Using the Partial View in a Main View:

<!-- Index.cshtml -->
@await Html.PartialAsync("_HeaderPartial")

<h1>Welcome to Our Website!</h1>
<p>This is the main content area.</p>

What are View Components?

View components are a combination of both a small piece of UI logic and a template that renders some UI based on that logic. Unlike partial views, view components are backed by a C# class that typically contains business logic and maintains state. This makes view components more suitable for complex and dynamic UI elements like product listings, blog feeds, or personalized user interfaces.

Key Features of View Components:

• Business Logic: View components can encapsulate business logic and contain associated view data.
• State Management: State can be maintained across requests using the ViewComponent class.
• Modular: They can be composed of multiple smaller components and are reusable.
• Inheritance: View components support inheritance, allowing for code reuse across different components.

Creating a View Component: To create a view component, you need to define a class that inherits from ViewComponent and specify the template to use for rendering.

1. Create the View Component Class:

   • Create a class that inherits from ViewComponent.
   • Annotate the class with [ViewComponent] or name it with the ViewComponent suffix (e.g., BlogFeedViewComponent).

2. Implement the Invoke or InvokeAsync Method:

   • The Invoke or InvokeAsync method is the entry point for view components. It specifies the data and logic needed for rendering the component.

Example:

// BlogFeedViewComponent.cs
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Threading.Tasks;

public class BlogFeedViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(int numberOfPosts)
    {
        var posts = await GetPostsAsync(numberOfPosts); // Assume this method retrieves posts from a database.
        return View(posts);
    }

    private Task<List<BlogPost>> GetPostsAsync(int numberOfPosts)
    {
        // Simulate database retrieval.
        var posts = new List<BlogPost>
        {
            new BlogPost { Title = "First Post", Content = "This is the first blog post." },
            new BlogPost { Title = "Second Post", Content = "This is the second blog post." }
            // ...
        };

        return Task.FromResult(posts);
    }
}

public class BlogPost
{
    public string Title { get; set; }
    public string Content { get; set; }
}

3. Create the View Component Template:
   • Create a corresponding view file for the view component. This file should be located in the Views/Shared/Components/{ComponentName}/{ViewName}.cshtml directory.
   • The default view name is Default, so if you don't specify a different view name, use _Default.cshtml.

Example:

<!-- Views/Shared/Components/BlogFeed/Default.cshtml -->
<ul>
  @foreach (var post in Model)
  {
    <li>
      <h2>@post.Title</h2>
      <p>@post.Content</p>
    </li>
  }
</ul>

Using the View Component in a Main View:

<!-- Index.cshtml -->
@await Component.InvokeAsync("BlogFeed", new { numberOfPosts = 3 })

Short-Hand Syntax: Alternatively, you can use the short-hand syntax to invoke view components: