ASP.NET8 View Components Set New Bar for Web UI Reusability

How to create ASP.NET8 View-Components, which are a more powerful form of component architecture than popular Partial-Views. An example with reusable code is shown. How to create ASP.NET8 View-Components, which are a more powerful form of component architecture than popular Partial-Views. An example with reusable code is shown. How to create ASP.NET8 View-Components, which are a more powerful form of component architecture than popular Partial-Views. An example with reusable code is shown. 1. ASP.NET8 View-Components are more powerful than Partial-Views Simply speaking, ASP.NET8 View-Components are similar to Partial-Views, but enable a higher level of componentization and functionality encapsulation. They are intended for ASP.NET8 MVC or Razor Pages architecture. ASP.NET8 View-Components are intended for the creation of reusable components that have View/Render functionality, and whose complexity is greater than normal Partial-Views. Key advantage over ASP.NET Partial-Views is that View-Components have a component part that is server-side executed and can access all the application architecture mechanisms, like Database Access Layer (for example EF) independently from the Host page where they are hosted. That enables quite elaborate and complex processing that can be done and componentized into a reusable form. ASP.NET component part that is server-side executed component part that is server-side executed ASP.NET8 View-Components receive parameters from the calling method (host page or even controller directly) and not HTTP request. But, of course, nothing prevents the creation of View-Components that receive HttpRequest as a parameter that will be explicitly passed to the component. View components in ASP.NET Core are well defined in the article [1], and I will not repeat it all here. The plan is to provide working C# sample code (“Primer”) on how view components typically can be used. Reusable code with a simple example is shown below. I added a decent quantity of comments, so it should be self-explanatory how they work. ASP.NET 2. Final Result Here we show the final result. There is ASP.NET8 host page has 2 components and 4 invocations shown on the picture. Components are colored deliberately to show where they are. In a real app, of course, coloring would not be used. Here is what this example shows: Div-0. Control in Host ASP.NET8 page

Div-1. View-Component-1 CustomerSearch, which is Async component, invoked with a method

Div-2. View-Component-1 CustomerSearch, which is Async component, invoked with Tag Helper

Div-3. View-Component-2 CustomerSearch2, which is Sync component, invoked with a method

Div-4. View-Component-2 CustomerSearch2, which is Sync component, invoked with Tag Helper Div-0. Control in Host ASP.NET8 page Div-0. Control in Host ASP.NET8 page Div-1. View-Component-1 CustomerSearch, which is Async component, invoked with a method Div-1. View-Component-1 CustomerSearch, which is Async component, invoked with a method Div-2. View-Component-1 CustomerSearch, which is Async component, invoked with Tag Helper Div-2. View-Component-1 CustomerSearch, which is Async component, invoked with Tag Helper Div-3. View-Component-2 CustomerSearch2, which is Sync component, invoked with a method Div-3. View-Component-2 CustomerSearch2, which is Sync component, invoked with a method Div-4. View-Component-2 CustomerSearch2, which is Sync component, invoked with Tag Helper Div-4. View-Component-2 CustomerSearch2, which is Sync component, invoked with Tag Helper 3. Source Code for this Example The source code is well commented, and it should be self-explanatory. 3.1 C# part //HomeController.cs========================================= namespace Example1.Controllers { public class HomeController : Controller { private readonly ILogger _logger;

public HomeController(ILogger logger) { _logger = logger; }

public IActionResult Index() { return View(); }

//in this action we are testing the ViewComponent public IActionResult Test1(Test1_ViewModel model) { return View(model); }

[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] public IActionResult Error() { return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier }); } } }

// CustomersSearchViewComponent_Model.cs ========================== namespace Example1.ViewComponents.Models { public class CustomersSearchViewComponent_Model { public string? Parameter1String { get; set; } = null; public int? Parameter2Int { get; set; } = null; public string? IdOfTargetInputField { get; set; } = null; } }

// CustomersSearchViewComponent_ViewModel.cs ========================== namespace Example1.ViewComponents.Models { public class CustomersSearchViewComponent_ViewModel { public string? Parameter1String { get; set; } = null; public int? Parameter2Int { get; set; } = null; public string? IdOfTargetInputField { get; set; } = null;

//this should come from DB in real application public SelectList? ListOfCustomers { get; set; } } }

//CustomersSearch2ViewComponent.cs=================================================== namespace Example1.ViewComponents { //it should inherit from ViewComponent class //this is Sync version of ViewComponent public class CustomersSearch2ViewComponent : ViewComponent { private readonly ILogger ? _logger;

// We are testing Dependency Injection (DI) to inject the logger public CustomersSearch2ViewComponent(ILogger logger) { //note how useful is this, we are passing in this constructor //into view-component objects that are part of app DI container //you can pass here any form of reference to DataBase, for example //like EF DbContext or similar _logger = logger; }

//The Invoke method for the View component public IViewComponentResult Invoke( CustomersSearchViewComponent_Model? model = null ) { //this is neat, this parameters in CustomersSearchViewComponent_Model //are passed to the view-component from host form { //testing that DI worked - logger string methodName = $"Type: {System.Reflection.MethodBase.GetCurrentMethod()?.DeclaringType?.FullName}, " + $"Method: InvokeAsync; "; _logger?.LogWarning(methodName); }

//preparing view-model CustomersSearchViewComponent_ViewModel viewModel = new(); viewModel.Parameter1String = model?.Parameter1String; viewModel.Parameter2Int = model?.Parameter2Int; viewModel.IdOfTargetInputField = model?.IdOfTargetInputField;

{ //this should come from DB in real application SelectList list1 = new SelectList (new List { new SelectListItem { Text = "John - 111", Value = "111" },

new SelectListItem { Text = "Mark - 222", Value = "222" }, new SelectListItem { Text = "Novak - 333", Value = "333" }, }, "Value", "Text");

viewModel.ListOfCustomers = list1; }

//now render component view return View("Default", viewModel); } } }

//CustomersSearchViewComponent.cs=================================================== namespace Example1.ViewComponents { //it should inherit from ViewComponent class //this is Async version of ViewComponent public class CustomersSearchViewComponent : ViewComponent { private readonly ILogger ? _logger;

// We are testing Dependency Injection (DI) to inject the logger public CustomersSearchViewComponent(ILogger logger) { //note how useful is this, we are passing in this constructor //into view-component objects that are part of app DI container //you can pass here any form of reference to DataBase, for example //like EF DbContext or similar _logger = logger; }

//The Invoke method for the View component public async Task InvokeAsync( CustomersSearchViewComponent_Model? model=null ) { //this is neat, this parameters in CustomersSearchViewComponent_Model //are passed to the view-component from host form { //testing that DI worked - logger string methodName = $"Type: {System.Reflection.MethodBase.GetCurrentMethod()?.DeclaringType?.FullName}, " + $"Method: InvokeAsync; "; _logger?.LogWarning(methodName); }

await Task.Delay(0); // Simulate some async work

//preparing view-model CustomersSearchViewComponent_ViewModel viewModel = new(); viewModel.Parameter1String = model?.Parameter1String; viewModel.Parameter2Int = model?.Parameter2Int; viewModel.IdOfTargetInputField = model?.IdOfTargetInputField;

{ //this should come from DB in real application SelectList list1 = new SelectList (new List { new SelectListItem { Text = "John - 111", Value = "111" },

new SelectListItem { Text = "Mark - 222", Value = "222" }, new SelectListItem { Text = "Novak - 333", Value = "333" }, }, "Value", "Text");

viewModel.ListOfCustomers= list1; }

//now render component view return View("Default",viewModel); } } } //HomeController.cs========================================= namespace Example1.Controllers { public class HomeController : Controller { private readonly ILogger _logger;