Exploring features in Asp.net Core MVC – 1. View Components

View Components

Here I am sharing my understanding about View Components, a new feature in .Net core MVC –

View Components is a new feature in asp.net core MVC which was called MVC 6 earlier. So why this feature was needed?

In MVC 5 we were using Partial view or Html Helper for a reusable component. In these partial view or Html Helper most difficult part was to make it usable for every Model. To use model in these views we were passing Model through Action method of controller, so this was bound to the Model for view. So making a Partial view/Html Helper independent from a model was a challenging job. An easier solution is View Components.

To create a View Component, first create a derived from “ViewComponent” in ViewComponent folder. Optionally we can decorate class with [ViewComponent] attribute or ViewComponent suffix in the class name. This is a public & non-abstract class like controller. This view component class does interrupt in Controller execution and provide support for default supported dependency injection in asp.net core. View component class must be a public non abstract class.

To keep logic, create logic in InvokeAsync method with IViewComponentResult  as return type. View Component does not accept parameters from HTTP but from the calling method. It just initiallize a Model and return it to view of View Component.

Runtime find a view component’s view in following locations – “Views/controller_name/Components/view_component_name/view_name” or “Views/Shared/Components/view_component_name/view_name”. Default view name for view component is default.cshtml.

We can call a view component in view or invoke direct in Controller. In view view can call view component using –

@Component.InvokeAsync(“Name of view component”, <anonymous type containing parameters>)

or we can call directly in controller using –

ViewComponent(“Name of view component”, <parameters>)

A Simple Example:

1. ViewComponent class

public class ProductListViewComponent : ViewComponent
{
private readonly IProductService _productService;
//constructor to instanciate service
public ProductListViewComponent(IProductService productService)
{
_productService = productService;
}
//it could be Invoke or InvokeAsync
public IViewComponentResult InvokeAsync(int category)
{
var products = _productService.GetProducts(category);
return View(products);
}
}

2. View Component’s View

 @model IEnumerable<Product>
<h2>My Products</h2>
<ul>
@foreach (var product in Model)
{
<li>@product.Name</a></li>                                                                      }

  </ul>

3. Calling View Component

In View –                                                                                                        @await Component.InvokeAsync(“ProductList”, new { category = 3})

in Controller –
ViewComponent(“ProductList”, new { category = 3});

I will continue reading more features and sharing here :-) Thanks!

About

I am a Microsoft certifies software professional working exclusively in web application development. I have started Icanpost.net for informative articles and blog. I am learning writing as I like to read and write. Love to write on any subject of my knowledge when free.

View all posts by