The document discusses how to create and use view components in ASP.NET Core. A view component is created to display an employee head count summary on multiple pages. It retrieves data independently and renders a view. The view component class implements the Invoke method which returns the view. The view component view is located using a default naming convention. The view component is invoked from a razor page to display the employee summary.
The document discusses how to create and use view components in ASP.NET Core. A view component is created to display an employee head count summary on multiple pages. It retrieves data independently and renders a view. The view component class implements the Invoke method which returns the view. The view component view is located using a default naming convention. The view component is invoked from a razor page to display the employee summary.
The document discusses how to create and use view components in ASP.NET Core. A view component is created to display an employee head count summary on multiple pages. It retrieves data independently and renders a view. The view component class implements the Invoke method which returns the view. The view component view is located using a default naming convention. The view component is invoked from a razor page to display the employee summary.
The document discusses how to create and use view components in ASP.NET Core. A view component is created to display an employee head count summary on multiple pages. It retrieves data independently and renders a view. The view component class implements the Invoke method which returns the view. The view component view is located using a default naming convention. The view component is invoked from a razor page to display the employee summary.
Download as TXT, PDF, TXT or read online from Scribd
Download as txt, pdf, or txt
You are on page 1/ 3
In this video we will discuss View Components in ASP.NET core with example.
View component example
In addition to page specific content, we want to display the following Employee
Head Count Summary on several pages in our application.
asp.net core view component example
Since, we want to display the Employee Head Count Summary on several pages, it makes sense to create a reusable component.
What we do not want to do is include the code on each page. This approach duplicates code.
We can't use a partial view either, because a partial view cannot have it's own data access logic. It depends on the data passed from the parent view or razor page. We do not want to include the code that retrieves data on each page. This is again code duplication. We want something that can retrieve data independently and render. View Component is a perfect choice for this.
View Components folder
Create View Components folder, in the root project directory. We will place all our view components in this folder. Add a new class file with name - HeadCountViewComponent.cs. Copy and paste the following code.
using Microsoft.AspNetCore.Mvc; using RazorPagesTutorial.Services;
namespace RazorPagesTutorial.ViewComponents { public class HeadCountViewComponent : ViewComponent { private readonly IEmployeeRepository employeeRepository;
public HeadCountViewComponent(IEmployeeRepository employeeRepository)
{ this.employeeRepository = employeeRepository; }
public IViewComponentResult Invoke()
{ var result = employeeRepository.EmployeeCountByDept(); return View(result); } } }
View component class
View component class name ends with the suffix ViewComponent It inherits from the ViewComponent base class It supports dependency injection, just like a razor page or an MVC controller A view component does not directly respond to an HTTP request. It is usually invoked and consumed by a razor page, layout view or an MVC view. When a view component is invoked, it calls the Invoke method. Inovke() method returns IViewComponentResult. Use InvokeAsync() method, if you want to call the View Component asynchronously. View Component follows the MVC design pattern. It initialises a model and passes it to a view by calling the View method. Though it follows the MVC approach, it can be used both in an MVC project and a razor pages project. View Component view discovery
ASP.NET Core looks for the view in the following locations
Razor pages project
/Pages/Shared/Components/{View Component Name}/{View Name} MVC project /Views/{Controller Name}/Components/{View Component Name}/{View Name} /Views/Shared/Components/{View Component Name}/{View Name} Create view component view file In the Shared folder, create Components folder. In the Components folder, create a folder with the same name as the View Component. Our view component name is HeadCountViewComponent. So create a folder with name HeadCount. The suffix ViewComponent is not required. In this folder create a file with name default.cshtml At this point, the folder structure should look as shown below.
viewcomponent folder structure
Copy and paste the following code in default.cshtml
Use Component.InvokeAsync to invoke the view component. We want to render it from
Details razor page. So include the following code on Details.cshtml page.
@await Component.InvokeAsync("HeadCount")
Supporting classes
DeptHeadCount.cs in Models project
namespace RazorPagesTutorial.Models { public class DeptHeadCount { public Dept Department { get; set; } public int Count { get; set; } } }
IEmployeeRepository.cs in Models project
namespace RazorPagesTutorial.Services { public interface IEmployeeRepository { // Other methods IEnumerable<DeptHeadCount> EmployeeCountByDept(); } }
MockEmployeeRepository.cs in Models project
namespace RazorPagesTutorial.Services { 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()
{ return _employeeList.GroupBy(e => e.Department) .Select(g => new DeptHeadCount() { Department = g.Key.Value, Count = g.Count() }).ToList(); } } }
