ASP.NET8 View Components- ը ստեղծում է Web UI-ի նոր բեռը

Ինչպես ստեղծել ASP.NET8 View-Components- ը, որը ավելի հզոր ձեւը է գործառույթների դիզայնի, քան հայտնի Partial-Views. Ինչպես ստեղծել ASP.NET8 View-Components- ը, որը ավելի հզոր ձեւը է գործառույթների դիզայնի, քան հայտնի Partial-Views. ASP.NET8 View-Components- ը ավելի հզոր է, քան Partial-Views- ը Պարզապես, ASP.NET8 View-Components- ը նման է Partial-Views- ի հետ, բայց թույլ է տալիս ավելի բարձր մակարդակային սարքավորման եւ ֆունկցիոնալության ներարկման: Նրանք նախատեսված են ASP.NET8 MVC- ի կամ Razor Pages- ի դիզայնի համար: ASP.NET8 View-Components- ը օգտագործվում է վերականգնման համար, որոնք ունակ են View/Render- ի գործառույթների հետ, եւ որոնք ավելի հարմար են, քան սովորական Partial-Views- ը: Հիմնական Vorteil Over Տեսակներ, որոնք տեսնում են, որ View-Components- ը ունի եւ կարող է հասնել բոլոր ծրագրային դիզայնի մեխանիզմները, ինչպիսիք են Database Access Layer- ը (պիսով՝ EF- ը) անմիջապես այն Host էջից, որտեղ նրանք տեղադրվում են: Դա թույլ է տալիս շատ հարմարավետ եւ հարմարավետ բուժման, որը կարող է կատարվել եւ բաղադրվել մի վերականգնելի ձեւով: ASP.NET սարքավորումներ Արդյոք, ինչպիսիք են server-side executed Արդյոք, ինչպիսիք են server-side executed ASP.NET8 View-Components- ը ստանում է Parameters- ից Calling- ի մեթոդից (կամ Host page- ի կամ նույնիսկ Controller- ի ուղղությամբ) եւ ոչ թե HTTP- ի պահանջը: Բայց, իհարկե, ոչինչ չի խուսափում View-Components- ի ստեղծումը, որոնք ստանում են HttpRequest- ը որպես Parameters- ը, որը բացառապես կստացվում է գործառույթին: Տեսեք components Հիմնականները լավ նշված են հոդվածում [1], եւ ես չգիտեմ այն բոլորը այստեղ: Ծրագրում է ապահովել աշխատանքային C# նմուշային կոդը (“Primer”) այն մասին, թե ինչպես տեսանյութերի բաղադրիչները սովորաբար կարող են օգտագործվել: Նկարագրված է, որ մի պարզ օրինակով կարող է վերցնել կոդը: Ես ավելացել եմ մի ճշգրիտ քանակը մեկնաբանություններ, այնպես որ այն պետք է լինել հուսալի, թե ինչպես նրանք աշխատում են: ASP.NET սարքավորումներ 2. վերջնական արդյունքները Ահա ASP.NET8 տպագրական էջը ունի 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. Source Code- ը այս օրինակի համար Հեղինակային կոդը շատ լավ մեկնաբանվում է, եւ այն պետք է լինել ինտերնետային. 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); } } } 4.2 Սպիտակային (.cshtml) մասը @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 Հաջողություն ASP.NET8- ում բաղադրիչները բարձրագույն ձեւով են բաղադրիչների դիզայնի, եւ ես ստացել եմ, որ դա հարմարավետ է: Դա պետք է մի քիչ ժամանակ է սովորել նրանց եւ սովորել, թե ինչպես ստեղծել / օգտագործել նրանց, բայց նրանք definitively useful to any experienced Հիմնական ծրագրեր ASP.NET սարքավորումներ 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/