ASP.NET8 View Components postavlja novu tračnicu za ponovnu upotrebu veb korisničkog okvira

Kako da kreirate ASP.NET8 View-Components, koji su snažniji oblik arhitekture komponenti od popularnih Partial-Views. Kako da kreirate ASP.NET8 View-Components, koji su snažniji oblik arhitekture komponenti od popularnih Partial-Views. ASP.NET8 View-Components su snažniji od Partial-Views Jednostavno rečeno, ASP.NET8 View-Components su slični Partial-Views, ali omogućuju viši nivo komponentizacije i funkcionalnosti. ASP.NET8 View-Components su namenjeni za stvaranje ponovljivih komponenti koje imaju funkciju View/Render, a čija je složenost veća od normalnih Partial-Views. Кључна предност над Делимични прегледи су да прегледи-компоненте имају i može da pristupi svim mehanizmima arhitekture aplikacija, kao što je pristupni sloj baze podataka (npr. EF) nezavisno od host stranice na kojoj su hostovani. АСП.нет Компонента део који је сервер-страна извршена Компонента део који је сервер-страна извршена ASP.NET8 View-Components прима параметре из методе позивања (хост странице или чак контролера директно) а не ХТТП захтев. али, наравно, ништа не спречава стварање View-Components који примају HttpRequest као параметар који ће се експлицитно пренети на компоненту. Погледајте компоненте у Основи су добро дефинисани у чланку [1], и нећу их све поновити овде. План је да се обезбеди радни Ц# узорак кода (“Први”) о томе како се компоненте приказа обично могу користити. Поновљиви код са једноставним примјером приказан је испод. Додао сам пристојну количину коментара, тако да би требало да буде само-објашњавајући како они раде. АСП.нет 2. коначни резултат Овде показујемо коначни резултат. Постоји АСП.НЕТ8 домаћина има 2 компоненте и 4 позиве приказане на слици. Компоненте су намерно обојене да би показале где су. У стварној апликацији, наравно, бојење не би се користило. Ево шта овај пример показује: 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 Изворни код за овај пример Изворни код је добро коментарисан, и требало би да буде само-објашњавајући. 3.1 C# део //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); } } } 3.2 Разарач (.цсхтмл) део @using Example1.Models.Home; @using Example1.ViewComponents; @using Example1.ViewComponents.Models; @using Example1 @using Example1.Models @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, Example1 @addTagHelper *, Example1.TagHelpers

@model Test1_ViewModel

@{ ViewData["Title"] = "Test1";

@ViewData["Title"]

Div - 0 Customer Id

Submit Div1 - CustomersSearch, Async, invoked with method @{ CustomersSearchViewComponent_Model myModel1 = new CustomersSearchViewComponent_Model(); myModel1.Parameter1String = "Div1-Async, invoked with method"; myModel1.Parameter2Int = 11111; myModel1.IdOfTargetInputField = "ContractOwnerCustomerId";

//so, here we are using the ViewComponent @await Component.InvokeAsync("CustomersSearch", new { model = myModel1, }) ; } Div2 - CustomersSearch, Async, invoked with Tag Helper @{ CustomersSearchViewComponent_Model myModel2 = new CustomersSearchViewComponent_Model(); myModel2.Parameter1String = "Div2-Async, invoked with Tag Helper"; myModel2.Parameter2Int = 22222; myModel2.IdOfTargetInputField = "ContractOwnerCustomerId"; }

Div3 - CustomersSearch2, Sync, invoked with method @{ CustomersSearchViewComponent_Model myModel3 = new CustomersSearchViewComponent_Model(); myModel1.Parameter1String = "Div3-Sync, invoked with method"; myModel1.Parameter2Int = 33333; myModel1.IdOfTargetInputField = "ContractOwnerCustomerId";

//so, here we are using the ViewComponent //it looks strange, Sync component invoked with async method //but they want it this way @await Component.InvokeAsync("CustomersSearch2", new { model = myModel1, }) ; } Div4 - CustomersSearch2, Sync, invoked with Tag Helper @{ CustomersSearchViewComponent_Model myModel4 = new CustomersSearchViewComponent_Model(); myModel2.Parameter1String = "Div4- Sync, invoked with Tag Helper"; myModel2.Parameter2Int = 44444; myModel2.IdOfTargetInputField = "ContractOwnerCustomerId"; }

}

@using Example1.ViewComponents.Models

@model CustomersSearchViewComponent_ViewModel

CustomersSearch - Async ViewComponent

Proof-of-concept, parameter from Host Form Parameter1String: @Model.Parameter1String

Proof-of-concept, parameter from Host Form Parameter2Int: @Model.Parameter2Int

Proof-of-concept, list of customers from DB

Copy Selected Customer ID to Form

// This function will export selection value from the ViewComponent // to the main form and copy it to the input field function copyInputTextTo(anchor) { var root = anchor.closest('fieldset'); var target = document.getElementById("@Model.IdOfTargetInputField"); var source = root.querySelector('#customerSelect2') ;

if (source && target) { target.value = source.value; } return false; }

@using Example1.ViewComponents.Models

@model CustomersSearchViewComponent_ViewModel

CustomersSearch2 - Sync ViewComponent

Proof-of-concept, parameter from Host Form Parameter1String: @Model.Parameter1String

Proof-of-concept, parameter from Host Form Parameter2Int: @Model.Parameter2Int

Proof-of-concept, list of customers from DB

Copy Selected Customer ID to Form

// This function will export selection value from the ViewComponent // to the main form and copy it to the input field function copyInputTextTo(anchor) { var root = anchor.closest('fieldset'); var target = document.getElementById("@Model.IdOfTargetInputField"); var source = root.querySelector('#customerSelect2') ;

if (source && target) { target.value = source.value; } return false; } 3.3 Локација датотека у пројекту 4 Закључак Преглед компоненти у АСП.НЕТ8 је су виши облик архитектуре компоненти, и нашао сам да је практично. Потребно је неко време да се навикнете на њих и научите како да их креирате / користите, али они су дефинитивно корисни за било искусног Програмски програм . АСП.нет 5 Референце [1] Погледајте компоненте у ASP.NET Core https://learn.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-9.0 [2] Погледајте компоненте у ASP.NET Core MVC https://dotnettutorials.net/lesson/view-components-in-asp-net-core-mvc/