Skip to main content

Top 2 ways to pass parameters to a view component


View components is a feature of ASP.NET Core MVC, that’s similar to partial view and child actions, one cool thing about view component it allows you to create reusable components with or without logic.

The purpose of this post is to show you how to pass view component as a parameter when invoking it from view and controller.

Another  cool thing about View Components is that it separates the logic of which markup to display from the markup itself. It’s a class that inherits from View component and implements Invoke and InvokeAsync Methods, the return type can vary, and that depends on largely what you intend to render.

Example of Simple View Component

public class ItemViewComponent : ViewComponent
{
   public IViewComponentResult Invoke()
   {
       return View();
   }
}

To use the View Component, we have to invoke the Item View component from _Layout.cshtml and this will involve calling the components and awaiting its response.

@await Component.InvokeAsync("Item")

Preparing the view component to accept parameter

This example will show how to create view component that will display data obtained from a data source like database.

   public class  GroceryViewComponent : ViewComponent
   {
       private readonly groceryContext _context;

     public GroceryViewComponent(groceryContext
       context)
 
     {
           _context = context;
     }

       public async Task<IViewComponentResult>  
       InvokeAsync(int Id)
      {

           var items = await GetItemsById(Id);
           return View(items);
     }
      private Task<List<groceryitem>>
         GetItemsById(int Id)
      {
         return _context.Grocery.Where(x => x.Id ==
         Id).ToListAsync();
        }
   }


Then we update the default.cshtml template to reflect the changes.

@model IEnumerable<Models.GroceryItems>
<h3>List of grocery</h3>
<ul>
   @foreach (var items in Model)
   {
       <li>@items.Product - @items.Amount
  (@items.Amount.ToString("c"))</li>
   }
</ul>



Passing Parameter to View Component Using InvokeAsync

The component is set to display the grocery item from the database when the name of the component and the grocery id is passed a parameter to the view component either as a dictionary or anonymous type. The content is rendered as a result of call to InvokeAsync from within a view or layout.

@await Component.InvokeAsync("Grocery", new { Id = 4}

Passing Parameter to View Component When Invoked from a controller

It’s almost the same thing, just pass anonymous method with the right parameter when creating the controller.

public IActionResult ViewComponentIndex()  
{
   return ViewComponent("Grocery", new { Id = 4 })
}

Conclusion

With the introduction of View component, it’s now easy to write complex rendering logic that is independent of the UI, can accept parameter and gives you the ability to control how you want your view to behave.

Comments

Popular posts from this blog

How to implement RESTful API Versioning in ASP.NET Web API 2 using IHttpRouteConstraint

The only thing constant in life is change, and that is proved everyday in our industry, API’s are cool to extend the functionality of your application and expose it to other developers. The cool thing about IT and software, it’s that things changes quite rapidly and so it’s the technology, hence technology can change and the needs of your organisation can change, hence in order to keep serving this evolving needs and keep been relevant, your api might need to change also. Small changes can be accommodated within the initial version, but changes that will risked breaking the existing code, will required the need for versioning.

Implementing a custom IHttpRouteConstraint

According to msdn, a IHttpRouteConstraint simply Represents a base class route constraint. What then is a route constraint? A route constraint simply gets or sets a dictionary of expressions that specify valid values for a URL parameter.

publicclassApiVersionRouteConstraint : IHttpRouteConstraint
  {

publicApiVersionRouteCo…

How to implement multi-tenancy with subdomains using Route Constraint in ASP.NET MVC

According to Wikipedia, The term "software multitenancy" refers to a software architecture in which a single instance of software runs on a server and serves multiple tenants. A tenant is a group of users who share a common access with specific privileges to the software instance. With a multitenant architecture, a software application is designed to provide every tenant a dedicated share of the instance - including its data, configuration, user management, tenant individual functionality and non-functional properties. Multitenancy contrasts with multi-instance architectures, where separate software instances operate on behalf of different tenants. By giving companies, access to a tenant through a subdomain of choice, will help to personalise the experience more and gives a sense of ownership to each tenant. This will go along way to bring consistency in there branding.
Implementing Route Constraint
You use route constraints to restrict the browser requests that match a partic…

How to do partial update for HTTP APIs in ASP.NET CORE MVC with JSON Patch

JSON Patch is a format for describing changes to a JSON document. It can be used to avoid sending a whole document when only a part has changed. When used in combination with the HTTP PATCH method, it allows partial updates for HTTP APIs in a standards compliant way. A JSON Patch document is just a JSON file containing an array of patch operations. The patch operations supported by JSON Patch are “add”, “remove”, “replace”, “move”, “copy” and “test”. The operations are applied in order: if any of them fail then the whole patch operation should abort.
The JSON Patch supports the following operations:
Add - Adds a value to an object or inserts it into an array.Remove -  Removes a value from an object or array. Replace - Replaces a value. Equivalent to a “remove” followed by an “add”. Copy - Copy a value from one location to another within the JSON document. Both from and path are JSON Pointers. Move - Move a value from one location to the other. Both from and path are JSON Pointers. Test - Te…