Pass parameters to view component in asp.net core

Suggested Videos
Part 22 - Delete operation in asp.net core razor pages | Text | Slides
Part 23 - Partial views in asp.net core | Text | Slides
Part 24 - ASP.NET Core view components | Text | Slides

In this video we will discuss how to pass parameters to a view component with an example.


This is continuation to previous video - Part 24. Please watch Part 24 from razor pages tutorial before proceeding.


ASP.NET Core view component parameter example

In our previous video we discussed creating the following view component that displays the employee head count summary by department.



At the moment all the departments head count is displayed. We want to be able to filter by department name. For example, if IT is passed as the department name, only IT department headcount should be displayed. If I do not pass any department name, then all the departments must be displayed.

In other words, we want to include a parameter which we can use to filter the view component results. Also, we want to be able to make it optional

IEmployeeRepository.cs

It is the EmployeeCountByDept method that retrieves the data for the view component. Include Dept parameter. The parameter is made nullable, so we can pass null if we want all the departments.

public interface IEmployeeRepository
{
    IEnumerable<DeptHeadCount> EmployeeCountByDept(Dept? dept);
    // Other methods
}

MockEmployeeRepository.cs

public class MockEmployeeRepository : IEmployeeRepository

{

    private List<Employee> _employeeList;

    public MockEmployeeRepository()

    {

        _employeeList = new List<Employee>()

        {

            new Employee() { Id = 1, Name = "Mary", Department = Dept.HR,

                Email = "mary@pragimtech.com", PhotoPath="mary.png" },

            new Employee() { Id = 2, Name = "John", Department = Dept.IT,

                Email = "john@pragimtech.com", PhotoPath="john.png" },

            new Employee() { Id = 3, Name = "Sara", Department = Dept.IT,

                Email = "sara@pragimtech.com", PhotoPath="sara.png" },

            new Employee() { Id = 4, Name = "David", Department = Dept.Payroll,

                Email = "david@pragimtech.com" },

        };

    }

    public IEnumerable<DeptHeadCount> EmployeeCountByDept(Dept? dept)

    {

        IEnumerable<Employee> query = _employeeList;

        if (dept.HasValue)

        {

            query = query.Where(e => e.Department == dept.Value);

        }

        return query.GroupBy(e => e.Department)

                            .Select(g => new DeptHeadCount()

                            {

                                Department = g.Key.Value,

                                Count = g.Count()

                            }).ToList();

    }

    // Other methods

}

HeadCountViewComponent.cs

Include department parameter on the Invoke method of the view component. Specify a default value of null. This makes this parameter optional. If no value is specified when the view component is invoked, the default value null is used and we get to see all the departments.

public class HeadCountViewComponent : ViewComponent
{
    private readonly IEmployeeRepository employeeRepository;

    public HeadCountViewComponent(IEmployeeRepository employeeRepository)
    {
        this.employeeRepository = employeeRepository;
    }

    public IViewComponentResult Invoke(Dept? department = null)
    {
        var result = employeeRepository.EmployeeCountByDept(department);
        return View(result);
    }
}

Invoke view component with parameters

To invoke a view component with parameters, pass an anonymous object to the InvokeAsync() method. The name of the property in the anonymous object must match the name of the parameter on the Invoke (InvokeAsync) method of the view component class. You can pass as many parameters as you want using this technique.

@await Component.InvokeAsync("HeadCount", new
{
    department = Dept.IT
})

To display all the departments, do not include the department parameter or pass null

@await Component.InvokeAsync("HeadCount")

or 

@await Component.InvokeAsync("HeadCount", null)

Details.cshtml

To filter departments based on the Model class department

@await Component.InvokeAsync("HeadCount", new
{
    department = Model.Employee.Department
})