Advanced ASP.NET Core MVC Features

TL;DR

You'll explore advanced ASP.NET Core MVC concepts like custom tag helpers, view components, and filters to build more robust and maintainable applications. These features help you encapsulate UI logic, reuse code, and apply cross-cutting concerns effectively. Mastering them will elevate your MVC development skills beyond the basics.

1. The Mental Model

Think of advanced MVC features as specialized tools in your developer toolkit. Instead of building everything from scratch or repeating code, you use these tools to create reusable UI elements, encapsulate complex rendering logic, and intercept requests or responses. They make your code cleaner and your development faster.

2. The Core Material

Custom Tag Helpers

Photo by Arina Krasnikova on Pexels

Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. They look and feel like HTML, making them intuitive. You can create custom ones to simplify complex UI logic or introduce domain-specific tags.

Here's a simple example of a custom tag helper that displays a greeting:

// TagHelpers/GreetingTagHelper.cs
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Text;
using System.Threading.Tasks;

namespace MyWebApp.TagHelpers
{
    [HtmlTargetElement("greeting")] // Targets a <greeting> tag
    public class GreetingTagHelper : TagHelper
    {
        public string Name { get; set; } = "Guest"; // Property for attribute

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "span"; // Replaces <greeting> with <span>
            output.Attributes.SetAttribute("class", "greeting-message"); // Add a class
            output.Content.SetHtmlContent($"Hello, {Name}!"); // Set inner content
        }
    }
}

To use it, you need to register it in _ViewImports.cshtml:

```c// _ViewImports.cshtml
@using MyWebApp.TagHelpers // Register your namespace
@addTagHelper *, MyWebApp // Register all tag helpers from the assembly

Now, in your view:

```html
<greeting name="Alice"></greeting>
<greeting></greeting> <!-- Uses default "Guest" -->

This will render:

<span class="greeting-message">Hello, Alice!</span>
<span class="greeting-message">Hello, Guest!</span>

View Components

Photo by Pok Rie on Pexels

View Components are like mini-MVC actions. They're self-contained pieces of UI with their own logic (a class inheriting ViewComponent) and a view (.cshtml file). They're perfect for reusable, complex UI sections like shopping carts, navigation menus, or dynamic sidebars. Unlike partial views, they have their own model and don't rely on the parent view's model.

Here’s a basic view component:

// ViewComponents/RecentPostsViewComponent.cs
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace MyWebApp.ViewComponents
{
    public class RecentPostsViewComponent : ViewComponent
    {
        // Imagine a service injects blog posts
        private readonly IPostService _postService; 

        public RecentPostsViewComponent(IPostService postService) // Example dependency injection
        {
            _postService = postService;
        }

        public async Task<IViewComponentResult> InvokeAsync(int count)
        {
            // Get recent posts (e.g., from a database via _postService)
            var posts = await _postService.GetRecentPostsAsync(count);
            return View(posts); // Pass a model to its view
        }
    }

    // Example IPostService and Post model
    public interface IPostService
    {
        Task<List<string>> GetRecentPostsAsync(int count);
    }

    public class PostService : IPostService
    {
        public Task<List<string>> GetRecentPostsAsync(int count)
        {
            return Task.FromResult(Enumerable.Range(1, count)
                .Select(i => $"Post Title {i}").ToList());
        }
    }
}

You'd typically place the view for this component at /Views/Shared/Components/RecentPosts/Default.cshtml (or /Views/YourController/Components/RecentPosts/Default.cshtml).

@model List<string>

<h3>Recent Posts</h3>
<ul>
    @foreach (var post in Model)
    {
        <li>@post</li>
    }
</ul>

To use it in a view:

@await Component.InvokeAsync("RecentPosts", new { count = 5 })

Or, if you prefer the Tag Helper syntax:

<vc:recent-posts count="3"></vc:recent-posts>

(Remember to register view components in _ViewImports.cshtml for the tag helper syntax: @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers).

Filters

Filters allow you to run code before or after specific stages in the request processing pipeline. They are powerful for implementing cross-cutting concerns like logging, caching, authorization, and error handling without cluttering your action methods.

There are different types of filters:
* Authorization filters: Run first, determine if a user is authorized.
* Resource filters: Run after authorization, before model binding. Good for caching or short-circuiting.
* Action filters: Run before and after an action method. Ideal for logging, validation.
* Result filters: Run before and after a view result is executed. Useful for modifying the view or response.
* Exception filters: Run when an unhandled exception occurs. For logging or displaying error pages.

Here's an example of a simple custom action filter that logs before and after an action executes:

// Filters/LogActionFilter.cs
using Microsoft.AspNetCore.Mvc.Filters;
using Microsoft.Extensions.Logging;
using System;
using System.Threading.Tasks;

namespace MyWebApp.Filters
{
    public class LogActionFilter : IAsyncActionFilter
    {
        private readonly ILogger<LogActionFilter> _logger;

        public LogActionFilter(ILogger<LogActionFilter> logger)
        {
            _logger = logger;
        }

        public async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
        {
            _logger.LogInformation($"Executing action: {context.ActionDescriptor.DisplayName} at {DateTime.Now}");

            var result = await next(); // Calls the next filter or the action method

            _logger.LogInformation($"Finished executing action: {context.ActionDescriptor.DisplayName} at {DateTime.Now}. Result type: {result.Result?.GetType().Name}");
        }
    }
}

You can apply filters globally (in Program.cs), to a controller, or to an individual action:

// Program.cs - Global filter registration
builder.Services.AddControllersWithViews(options =>
{
    options.Filters.Add(typeof(LogActionFilter)); // Register the filter
});

// Or, on a Controller:
// [ServiceFilter(typeof(LogActionFilter))] // Uses DI to resolve the filter
// public class HomeController : Controller { ... }

// Or, on an Action:
// [ServiceFilter(typeof(LogActionFilter))]
// public IActionResult Index() { return View(); }

[ServiceFilter] is crucial when your filter has dependencies injected via its constructor.

graph TD
    A["Incoming Request"] --> B{"Authorization Filter"};
    B -->|Authorized| C{"Resource Filter"};
    C -->|Next| D["Model Binding"];
    D --> E{"Action Filter (Before Action)"};
    E -->|Next| F["Action Method Execution"];
    F --> G{"Action Filter (After Action)"};
    G -->|Next| H{"Result Filter (Before Result)"};
    H --> I["Result Execution (e.g., View rendering)"];
    I --> J{"Result Filter (After Result)"};
    J --> K["Outgoing Response"];
    F -- Exception --> L{"Exception Filter"};
    L --> K;

3. Worked Example

Let's combine a view component and a custom tag helper to create a reusable "Product Card" component that dynamically fetches product data.

First, define a simple Product model and a dummy service:

// Models/Product.cs
namespace MyWebApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public string ImageUrl { get; set; }
    }
}

// Services/ProductService.cs
using MyWebApp.Models;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace MyWebApp.Services
{
    public interface IProductService
    {
        Task<Product> GetProductByIdAsync(int productId);
    }

    public class ProductService : IProductService
    {
        public Task<Product> GetProductByIdAsync(int productId)
        {
            // Simulate fetching from a database
            return Task.FromResult(new Product
            {
                Id = productId,
                Name = $"Product {productId}",
                Price = 19.99m * productId,
                ImageUrl = $"/images/product{productId}.jpg"
            });
        }
    }
}

Register the service in Program.cs:

builder.Services.AddTransient<IProductService, ProductService>();

Next, create the ProductCardViewComponent:

// ViewComponents/ProductCardViewComponent.cs
using Microsoft.AspNetCore.Mvc;
using MyWebApp.Models;
using MyWebApp.Services;
using System.Threading.Tasks;

namespace MyWebApp.ViewComponents
{
    public class ProductCardViewComponent : ViewComponent
    {
        private readonly IProductService _productService;

        public ProductCardViewComponent(IProductService productService)
        {
            _productService = productService;
        }

        public async Task<IViewComponentResult> InvokeAsync(int productId)
        {
            var product = await _productService.GetProductByIdAsync(productId);
            return View(product);
        }
    }
}

Create its view at /Views/Shared/Components/ProductCard/Default.cshtml:

```html
@model MyWebApp.Models.Product

@Model.Name

Price: