Recently before sometime, I have written a blog post about What's new in View Component : ASP.NET MVC 6. I have got lots of page view for that blog post and I am thank full to my readers for that. I got email from one of the readers that how we can pass arguments in View Component or how we can filter data in view component? I'm sure lots of people will have same question. So I thought it will a good idea to write a blog post about it.
I'm going to use same application which we have used for previous blog post. In previous application we created Product Categories View Component in this blog post I'm going to create a method in same view component which will display data based on category id passed.
So now code for the view component will look like following.
If you see above code then you will realize that I have made category list read-only and used in both invoke methods. And created a new Invoke method that expects a category id as parameter and based on category id it will filter categories list with linq and return a view.
Now I have putted same thing in about view like following.
Now when you run this application it load home page with both categories like following.
Now when you click on about and see same view filtration it will look like following.
That's it. Hope you like it. You can see how its easy to pass argument and override invoke method in ASP.NET MVC 6. Stay tuned for more!.
I'm going to use same application which we have used for previous blog post. In previous application we created Product Categories View Component in this blog post I'm going to create a method in same view component which will display data based on category id passed.
So now code for the view component will look like following.
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;
using ViewComponentMVC.Models;
namespace ViewComponentMVC
{
[ViewComponent(Name = "ProductCategoriesComponent")]
public class CategoryViewComponent : ViewComponent
{
private readonly List<Category> _categories;
private CategoryViewComponent()
{
_categories = new List<Category>()
{
new Category {CategoryId = 1, Name = "Clothes",Description = "Men and women's clothes"},
new Category {CategoryId = 2, Name = "Elentronics", Description = "Eletronics"}
};
}
public IViewComponentResult Invoke()
{
return View(_categories);
}
public IViewComponentResult Invoke(int categoryId)
{
var category = _categories.FindAll(c => c.CategoryId == categoryId).ToList();
return View(category);
}
}
}
If you see above code then you will realize that I have made category list read-only and used in both invoke methods. And created a new Invoke method that expects a category id as parameter and based on category id it will filter categories list with linq and return a view.
Now I have putted same thing in about view like following.
@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>
<p><div>
@Component.Invoke("ProductCategoriesComponent",1)
</div></p>
Now when you run this application it load home page with both categories like following.
Now when you click on about and see same view filtration it will look like following.
That's it. Hope you like it. You can see how its easy to pass argument and override invoke method in ASP.NET MVC 6. Stay tuned for more!.
You can find complete source code of this and earlier blog post at following location on github-https://github.com/dotnetjalps/ViewComponentMVC6
