👣 👮 🤙🏼 ब्लेज़र + एमवीवीएम = चांदी की रोशनी वापस आ जाती है क्योंकि प्राचीन बुराई अजेय है 🙆🏻 🎅🏻 👇🏼

नमस्कार, हेब्र!

तो हाँ, नेट कोर 3.0 जल्द ही आ रहा है और ब्लेज़र के साथ एक प्रोजेक्ट टेम्प्लेट होगा जो डिफ़ॉल्ट लोगों में से एक है। मेरी राय में, फ्रेमवर्क का नाम, कुछ Pokemon के नाम के समान है। ब्लेज़र लड़ाई में प्रवेश करता है! मैंने यह देखने का फैसला किया कि यह किस तरह का जानवर है और इसके साथ क्या खाया जाता है, इसलिए मैंने इस पर एक टोडो शीट बनाई। खैर, Vue.js पर भी, इस विषय के साथ तुलना करने के लिए क्योंकि मेरी राय में वे दोनों और प्रतिक्रियात्मकता में घटक प्रणाली के समान हैं, और यह सब। अधिक देवी देवता! वास्तव में, यह युवा के लिए एक गाइड है, न कि मजबूत दिमाग जो टाइपस्क्रिप्ट या जावास्क्रिप्ट सीखने के लिए बहुत आलसी हैं और साइट पर बटन और इनपुट बनाना चाहते हैं। उस मेम की तरह - "तकनीकी विशेषज्ञ एक किताब लिखना चाहते थे लेकिन निर्देश निकला।" सामने के छोर में मेरे कारनामों में कौन दिलचस्पी रखता है या आपको पता है कि बिल्ली के लिए आपका किस तरह का ब्लेज़र है।

परिचय

Microsoft ने एक बार एक ब्राउज़र में C # काम करने का विचार रखा और इस विचार को Silverlight कहा। यह बंद नहीं हुआ। ये आपके टायरनेट वास्तव में ब्राउज़रों के रूप में भिन्न थे। मुझे क्यों लगता है कि यह अब दूर हो रहा है? क्योंकि अब वेब असेंबली डिफ़ॉल्ट रूप से सभी आधुनिक ब्राउज़रों में हैं। अलग एक्सटेंशन स्थापित करने की कोई आवश्यकता नहीं है। एक और मुद्दा आवेदन आकार है। यदि Vue.js SPA का वजन 1.7 मेगाबाइट है, तो ब्लेज़र 21 मेगाबाइट पर बिल्कुल वैसा ही है। अब सिल्वरलाइट के दौरान इंटरनेट तेजी से और अधिक विश्वसनीय हो गया है और आपको एक बार एप्लिकेशन डाउनलोड करना होगा, और फिर कैश और सभी काम करना होगा। सामान्य तौर पर, Blazor Vue.js. के समान था। और इसलिए, सिल्वरलिग्ट, WPF और UWP के लिए एक श्रद्धांजलि के रूप में, और सिर्फ इसलिए कि यह शार्पर्स के बीच इतना आम था, मैंने अपनी परियोजना के लिए MVVM पैटर्न का उपयोग करने का फैसला किया। इसलिए संदर्भ के लिए - मैं आम तौर पर बैक-एंड हूं और मुझे ब्लेजर पसंद है। मैं दिल के बेहोश होने की चेतावनी देता हूं - मेरे उदाहरणों में डिज़ाइन और लेआउट भयानक हैं, और Vue.js के साथ एक अनुभवी फ्रंट-एंड में परियोजना में बहुत सारे गोवानोकॉड देखे जा सकते हैं। खैर, वर्तनी और विराम चिह्न के साथ, चीजें भी इतनी हैं।

संदर्भ

वूड + वुक्स पर टोडो उदाहरण
ब्लाज़ोर पर टोडो उदाहरण

प्लेसमेंट मॉडल

क्लाइंट की तरफ। एक मानक एसपीए जिसे विभिन्न तरीकों से वितरित किया जा सकता है। मेरे उदाहरण में, मैंने एक टेम्पलेट का उपयोग किया है जिसमें एप्लिकेशन फ़ाइलों को asp.net कोर पर ब्राउज़र सर्वर पर भेजा जाता है। इस दृष्टिकोण का नुकसान उन 21 मेगाबाइट में है जिन्हें आपको ब्राउज़र में डाउनलोड करना होगा।
सर्वर की तरफ। सब कुछ सर्वर पर होता है, और समाप्त डोम क्लाइंट को सॉकेट्स के माध्यम से पारित किया जाता है। ब्राउज़र को शुरुआत में कुछ भी डाउनलोड करने की आवश्यकता नहीं है, लेकिन इसके बजाय लगातार अपडेट किए गए DOM को टुकड़ों में डाउनलोड करें। खैर, क्लाइंट कोड पर पूरा लोड अचानक सर्वर पर पड़ता है।

मैं व्यक्तिगत रूप से पहले विकल्प को अधिक पसंद करता हूं और उन सभी मामलों में उपयोग किया जा सकता है जब आपको उपयोगकर्ता रूपांतरणों के बारे में चिंता करने की आवश्यकता नहीं होती है। उदाहरण के लिए, यह कंपनी की आंतरिक सूचना प्रणाली या एक विशेष बी 2 बी समाधान है, क्योंकि ब्लेज़र पहली बार लंबे समय से डाउनलोड कर रहा है। यदि आपके उपयोगकर्ता लगातार आपके आवेदन में लॉग इन करते हैं, तो उन्हें जेएस संस्करण के साथ कोई अंतर नहीं दिखाई देगा। यदि कोई उपयोगकर्ता किसी विज्ञापन लिंक पर क्लिक करता है, तो बस यह देखें कि किस प्रकार की साइट है, सबसे अधिक संभावना है कि वह साइट को लोड करने और बस छोड़ने के लिए लंबे समय तक इंतजार नहीं करेगा। इस मामले में, दूसरे प्लेसमेंट विकल्प का उपयोग करना बेहतर है यानी। सर्वर साइड ब्लेज़र

परियोजना निर्माण

नेट कोर 3.0 dotnet.microsoft.com/download/dotnet-core/3.0 डाउनलोड करें
टर्मिनल में कमांड चलाएं जो आपके लिए आवश्यक टेम्पलेट लोड करेगा।

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

एक सर्वर साइड बनाने के लिए

 dotnet new blazorserverside -o MyWebApp

क्लाइंट साइड के लिए जिनकी फाइलें asp.net कोर सर्वर द्वारा वितरित की जाएंगी

 dotnet new blazorhosted -o MyWebApp

यदि आप विदेशीवाद चाहते थे और अचानक एस्प्रेस कोर को सर्वर के रूप में उपयोग नहीं करने का फैसला किया, लेकिन कुछ और (क्या आपको इसकी आवश्यकता है?) आप इस आदेश के साथ सर्वर के बिना केवल एक ग्राहक बना सकते हैं।

 dotnet new blazor -o MyWebApp

बाइंडिंग

एक-तरफ़ा और दो-तरफ़ा बंधन का समर्थन करता है। तो हाँ, आपको WPF की तरह किसी भी OnPropertichanged की आवश्यकता नहीं है। दृश्य मॉडल बदलते समय, लेआउट स्वचालित रूप से बदल जाता है।

 <label>One way binding:</label> <br /> <input type="text" value=@Text /> <br /> <label>Two way binding:</label> <br /> <input type="text" @bind=@Text /> <br /> <label>Two way binding         Text   oninput:</label> <br /> <input type="text" @bind=@Text @bind:event="oninput" /> //ViewModel @code{ string Text; async Task InpuValueChanged() { Console.WriteLine("Input value changed"); } }

और इसलिए, यहां हमारे पास एक ViewModel (अनाम) है जिसमें एक टेक्स्ट फ़ील्ड है।

पहले इनपुट में, "value = @ Text" के माध्यम से हमने एक तरफ़ा बाध्यकारी बनाया। अब जब हम कोड में टेक्स्ट बदलते हैं, तो इनपुट के अंदर का टेक्स्ट तुरंत बदल जाएगा। केवल इतना है कि हम अपने इनपुट में प्रिंट नहीं करते हैं यह किसी भी तरह से हमारे वीएम को प्रभावित करता है। दूसरे इनपुट में, "@ बाइंड = @ टेक्स्ट" के माध्यम से हमने दो-तरफ़ा बाध्यकारी बनाया। अब अगर हम अपने इनपुट में कुछ नया लिखते हैं, तो हमारा VM तुरंत बदल जाएगा, और इसके विपरीत भी सही है अर्थात्। यदि हम कोड में टेक्स्ट फ़ील्ड बदलते हैं, तो हमारा इनपुट तुरंत नए मूल्य को प्रदर्शित करेगा। एक BUT है - डिफ़ॉल्ट रूप से, परिवर्तन हमारे इनपुट के ऑनकॉन्ग इवेंट से जुड़े होते हैं, इसलिए जब हम इनपुट को पूरा करेंगे तभी VM बदल जाएगा। तीसरे इनपुट "@bind: event =" oninput "" में हमने वीएम डेटा को ऑनिनपुट में स्थानांतरित करने के लिए घटना को बदल दिया है अब हर बार जब हम कुछ वर्ण प्रिंट करते हैं तो हमारे वीएम को तुरंत एक नया मूल्य हस्तांतरित होता है। आप उदाहरण के लिए, डेटटाइम के लिए एक प्रारूप भी निर्दिष्ट कर सकते हैं।

 <input @bind=@Today @bind:format="yyyy-MM-dd" />

मॉडल देखें

आप इसे अनाम बना सकते हैं, फिर आपको इसे "@code {}" ब्लॉक के अंदर रोकना होगा

 @page "/todo" <p>  @UserName </p> @code{ public string UserName{get; set;} }

या आप इसे एक अलग फ़ाइल में रख सकते हैं। तब इसे ComponentBase से विरासत में प्राप्त करना चाहिए और पृष्ठ के शीर्ष पर "@inits" का उपयोग करके हमारे VM के लिए एक लिंक निर्दिष्ट करें

उदाहरण के लिए

TodoViewModel.cs:

 public class TodoViewModel: ComponentBase{ public string UserName{get; set;} }

Todo.razor:

 @page "/todo" @inherits MyWebApp.ViewModels.TodoViewModel <p>  @UserName </p>

मार्ग

उन मार्गों के लिए जो पृष्ठ का जवाब देंगे, पृष्ठ की शुरुआत में "@ पृष्ठ" का उपयोग करके इंगित किए जाते हैं। इसके अलावा, कई हो सकते हैं। पहले वाले को ऊपर से नीचे तक के क्रम में बिल्कुल मेल खाते हुए चुना जाएगा। उदाहरण के लिए:

 @page "/todo" @page "/todo/delete" <h1> Hello!</h1>

यह पृष्ठ "/ todo" या "todo / delete" पर खुलेगा

Layauty

सामान्य तौर पर, कई पृष्ठों के लिए समान चीजें आमतौर पर यहां रखी जाती हैं। एक साइडबार की तरह, और अधिक।

पहली जगह में लेआउट का उपयोग करने के लिए, आपको इसे बनाने की आवश्यकता है। इसे "@inherits" का उपयोग करके LayotComponentBase से विरासत में मिला होना चाहिए। उदाहरण के लिए

 @inherits LayoutComponentBase <div class="sidebar"> <NavMenu /> </div> <div class="main"> <div class="top-row px-4"> <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a> </div> <div class="content px-4"> @Body </div> </div>

दूसरे, इसे आयात करने की आवश्यकता है। ऐसा करने के लिए, इसका उपयोग करने वाले पृष्ठों के साथ निर्देशिका में, आपको _imports.razor फ़ाइल बनाने की आवश्यकता है और फिर इस फ़ाइल में "@layout" पंक्ति जोड़ें

 @layout MainLayout @using System

तीसरा, आप उस पृष्ठ पर संकेत कर सकते हैं जिसका लेआउट सीधे उपयोग करता है

 @layout MainLayout @page "/todo" @inherits BlazorApp.Client.Presentation.TodoViewModel <h3>Todo</h3>

सामान्य तौर पर, _imports.razor और इसका उपयोग सभी पृष्ठों पर कार्य करता है जो इसके साथ एक ही फ़ोल्डर में हैं।

मार्ग विकल्प

सबसे पहले, हमारे मार्ग (केस असंवेदनशील) में घुंघराले कोष्ठक में पैरामीटर और उसके प्रकार को इंगित करें। मानक प्रकार समर्थित हैं। तो हां, कोई वैकल्पिक पैरामीटर नहीं हैं, अर्थात्। मान हमेशा पास होना चाहिए।

मान हमारे ViewModel में एक ही नाम के साथ एक पैरामीटर और [Parameter] BTB विशेषता के साथ एक संपत्ति बनाकर प्राप्त किया जा सकता है - पहले चल रहा है - मूल पैरामीटर में डेटा और ईवेंट्स भी Par Parameter [Parameter] विशेषता के साथ-साथ कैस्केडिंग मापदंडों का उपयोग करके प्रेषित किए जाते हैं। वे मूल घटक से उसके सभी बाल घटकों और उनके बाल घटकों में पारित हो जाते हैं। वे मुख्य रूप से शैलियों के लिए उपयोग किए जाते हैं, लेकिन यह सिर्फ CSS में शैलियों को करना बेहतर है, इसलिए परवाह नहीं है।

 @page "/todo/delete/{id:guid}" <h1> Hello!</h1> @code{ [Parameter] public Guid Id { get; set; } }

डि

सब कुछ Startup.cs में पंजीकृत है, जैसा कि एक नियमित asp.net कोर एप्लीकेशन में है। यहां कुछ भी नया नहीं है। लेकिन हमारे वीएम के लिए निर्भरता का कार्यान्वयन अभी भी सार्वजनिक गुणों के माध्यम से होता है न कि निर्माणकर्ता के माध्यम से। संपत्ति को केवल [Inject] विशेषता से सजाया जाना चाहिए

  public class DeleteTodoViewModel : ComponentBase { [Parameter] private Guid Id { get; set; } [Inject] public ICommandDispatcher CommandDispatcher { get; set; }

डिफ़ॉल्ट रूप से, 3 सेवाएं पहले से ही जुड़ी हुई हैं। HttpClient - ठीक है, आप जानते हैं कि क्यों। IJSRuntime - C # से JS कोड को कॉल करें। IUriHelper - इसका उपयोग अन्य पृष्ठों पर पुनर्निर्देशित करना संभव नहीं है।

आवेदन उदाहरण

टोडो स्प्रेडशीट

TodoTableComponent.razor:

 //1) <table class="table table-hover"> <thead> <th> </th> <th></th> <th> </th> <th></th> </thead> <tbody> //2) @foreach (var item in Items) { //3) <tr @onclick=@(()=>ClickRow(item.Id)) class="@(item.Id == Current?"table-primary":null)"> <td><input type="checkbox" checked="@item.IsComplite" disabled="disabled" /></td> <td>@item.Name</td> <td>@item.Created.ToString("dd.MM.yyyy HH:mm:ss")</td> <td><a href="/todo/delete/@item.Id" class="btn btn-danger"></a></td> </tr> } </tbody> </table> @code { //4) [Parameter] private List<BlazorApp.Client.Presentation.TodoDto> Items { get; set; } [Parameter] private EventCallback<UIMouseEventArgs> OnClick { get; set; } [Parameter] private Guid Current { get; set; } private async Task ClickRow(Guid id) { //5 await OnClick.InvokeAsync(CreateArgs(id)); } private ClickTodoEventArgs CreateArgs(Guid id) { return new ClickTodoEventArgs { Id = id }; } //6) public class ClickTodoEventArgs : UIMouseEventArgs { public Guid Id { get; set; } } }

इस घटक के बाद से हमें "@ पृष्ठ" और "@layout" की आवश्यकता नहीं है क्योंकि यह रूटिंग में भाग नहीं लेगा और यह मूल घटक से लेआउट का उपयोग करेगा
C # कोड की शुरुआत @ सिंबल से होती है। असल में रेजर में भी ऐसा ही है
```
 @onclick=@(()=>ClickRow(item.Id)) 
```
हमारे ViewModel के ClickRow विधि के लिए एक पंक्ति क्लिक घटना को बांधता है
निर्दिष्ट करें कि किन पैरामीटरों को मूल पैरामीटर या पृष्ठ से हमारे [पैरामीटर] विशेषता का उपयोग करके स्थानांतरित किया जाएगा
हम कॉलबैक फ़ंक्शन को कॉल करते हैं जो मूल घटक से प्राप्त हुआ था। तो माता-पिता घटक को पता चलता है कि बच्चे में कुछ घटना घटी है। फ़ंक्शंस को केवल EventCallback <> पैरामीटराइज़्ड EventArgs में लपेटा जा सकता है। EventArgs की संभावित सूची यहां देखी जा सकती है - docs.microsoft.com/ru-ru/aspnet/core/blazor/compenders?view=aspnetcore-3.0#event-handling
चूंकि EventArgs के संभावित प्रकारों की सूची सीमित है और हमें मूल घटक के किनारे ईवेंट हैंडलर के लिए एक अतिरिक्त Id गुण पास करने की आवश्यकता है, हम अपने स्वयं के पैरामीटर वर्ग को आधार से विरासत में प्राप्त करते हैं और इसे घटना में पास करते हैं। तो हाँ - मूल घटक में, नियमित UIMouseEventArgs ईवेंट हैंडलर के फ़ंक्शन में उड़ जाएगा और इसे हमारे प्रकार में परिवर्तित करना होगा, उदाहरण के लिए, ऑपरेटर के रूप में

उपयोग उदाहरण:

 <TodoTableComponent Items=@Items OnClick=@Select Current=@(Selected?.Id??Guid.Empty)></TodoTableComponent>

टोडो हटाना पृष्ठ

हमारा ViewModel उर्फ VM DeleteTodoViewModel.cs है:

 public class DeleteTodoViewModel : ComponentBase { //1) [Parameter] private Guid Id { get; set; } //2) [Inject] public ICommandDispatcher CommandDispatcher { get; set; } [Inject] public IQueryDispatcher QueryDispatcher { get; set; } [Inject] public IUriHelper UriHelper { get; set; } //3) public TodoDto Todo { get; set; } protected override async Task OnInitAsync() { var todo = await QueryDispatcher.Execute<GetById,TodoItem>(new GetById(Id)); if (todo != null) Todo = new TodoDto { Id = todo.Id, IsComplite = todo.IsComplite, Name = todo.Name, Created = todo.Created }; await base.OnInitAsync(); } //4) public async Task Delete() { if (Todo != null) await CommandDispatcher.Execute(new Remove(Todo.Id)); Todo = null; //5) UriHelper.NavigateTo("/todo"); } }

मार्ग पैरामीटर "/ टूडू / डिलीट / {आईडी: गाइड}" यहां से जाने के लिए निर्देशित किया जाता है यदि हम जाते हैं, उदाहरण के लिए, लोकलहोस्ट / टूडू / डिलीट / ae434aae44 ...
हमारे वीएम में डीआई कंटेनर से सेवाओं को इंजेक्ट करें।
बस हमारे वीएम की एक संपत्ति। हम इसका मूल्य स्वयं निर्धारित करते हैं, जैसा हम चाहते हैं।
पेज को इनिशियलाइज़ किए जाने पर यह विधि अपने आप कहलाती है। यहां हम अपने वीएम के गुणों के लिए आवश्यक मान निर्धारित करते हैं
हमारे वीएम की विधि। उदाहरण के लिए, हमारे दृश्य के किसी भी बटन को क्लिक करने की स्थिति में हम इसे बांध सकते हैं
"/ Todo" के पते पर स्थित दूसरे पृष्ठ पर जा रहे हैं वह शुरुआत में लाइन "@page" / todo "" है
हमारा दृश्य DeleteTodo.razor है:
```
 //1) @page "/todo/delete/{id:guid}" @using BlazorApp.Client.TodoModule.Presentation @using BlazorApp.Client.Shared; //2) @layout MainLayout //3) @inherits DeleteTodoViewModel <h3> Todo </h3> @if (Todo != null) { <div class="row"> <div class="col"> <input type="checkbox" checked=@Todo.IsComplite disabled="disabled" /> <br /> <label>@Todo.Name</label> <br /> //4) <button class="btn btn-danger" onclick=@Delete></button> </div> </div> } else { <p><em> Todo  </em></p> } 
```
1. हम संकेत देते हैं कि यह देश हमारी साइट के पते {रूट एड्रेस} + "/ टूडू / डिलीट /" + {किसी तरह का गाइड} पर उपलब्ध होगा। उदाहरण के लिए लोकलहोस्ट / टूडू / डिलीट / ae434aae44 ...
2. निर्दिष्ट करें कि हमारा पेज MainLayout.razor के अंदर प्रदान किया जाएगा
3. निर्दिष्ट करें कि हमारा पृष्ठ DeleteTodoViewModel वर्ग के गुणों और विधियों का उपयोग करेगा
4. हम संकीर्ण करते हैं कि जब आप इस बटन पर क्लिक करते हैं, तो हमारे VM का डिलीट () तरीका कहा जाएगा
टोडो होम

TodoViewModel.cs:
```
  public class TodoViewModel : ComponentBase { [Inject] public ICommandDispatcher CommandDispatcher { get; set; } [Inject] public IQueryDispatcher QueryDispatcher { get; set; } //1) [Required(ErrorMessage = "  Todo")] public string NewTodo { get; set; } public List<TodoDto> Items { get; set; } public TodoDto Selected { get; set; } protected override async Task OnInitAsync() { await LoadTodos(); await base.OnInitAsync(); } public async Task Create() { await CommandDispatcher.Execute(new Add(NewTodo)); await LoadTodos(); NewTodo = string.Empty; } //2) public async Task Select(UIMouseEventArgs args) { //3) var e = args as TodoTableComponent.ClickTodoEventArgs; if (e == null) return; var todo = await QueryDispatcher.Execute<GetById, TodoItem>(new GetById(e.Id)); if (todo == null) { Selected = null; return; } Selected = new TodoDto { Id = todo.Id, IsComplite = todo.IsComplite, Name = todo.Name, Created = todo.Created }; } public void CanselEdit() { Selected = null; } public async Task Update() { await CommandDispatcher.Execute(new Update(Selected.Id, Selected.Name, Selected.IsComplite)); Selected = null; await LoadTodos(); } private async Task LoadTodos() { var todos = await QueryDispatcher.Execute<GetAll, List<TodoItem>>(new GetAll()); Items = todos.Select(t => new TodoDto { Id = t.Id, IsComplite = t.IsComplite, Name = t.Name, Created = t.Created }) .ToList(); } } 
```
1. System.ComponentModel.DataAnnotations से मानक सत्यापन विशेषताएँ समर्थित हैं। विशेष रूप से, यहां हम इंगित करते हैं कि इस क्षेत्र की आवश्यकता है और पाठ को प्रदर्शित किया जाएगा यदि उपयोगकर्ता इनपुट में एक मूल्य निर्दिष्ट नहीं करता है जो इस क्षेत्र से जुड़ा होगा।
2. एक पैरामीटर के साथ एक घटना को संभालने के लिए विधि। यह विधि बच्चे के घटक से घटना को संभाल लेगी।
3. हम उस तर्क को टाइप करते हैं जो हमने चाइल्ड कंपोनेंट में बनाया था
Todo.razor:
```
 @layout MainLayout @page "/todo" @inherits BlazorApp.Client.Presentation.TodoViewModel <h3>Todo</h3> <h4></h4> <div class="row"> <div class="col"> @if (Items == null) { <p><em>...</em></p> } else if (Items.Count == 0) { <p><em>   .    .</em></p> } else { //1) <TodoTableComponent Items=@Items OnClick=@Select Current=@(Selected?.Id??Guid.Empty)></TodoTableComponent> } </div> </div> <br /> <h4> Todo</h4> <div class="row"> <div class="col"> @if (Items != null) { //2) <EditForm name="addForm" Model=@this OnValidSubmit=@Create> //3) <DataAnnotationsValidator /> //4) <ValidationSummary /> <div class="form-group"> //5) <InputText @bind-Value=@NewTodo /> //6) <ValidationMessage For="@(() => this. NewTodo)" /> //7) <button type="submit" class="btn btn-primary"></button> </div> </EditForm> } </div> </div> <br /> <h4> Todo</h4> <div class="row"> <div class="col"> @if (Items != null) { @if (Selected != null) { <EditForm name="editForm" Model=@Selected OnValidSubmit=@Update> <DataAnnotationsValidator /> <ValidationSummary /> <div class="form-group"> <InputCheckbox @bind-Value=@Selected.IsComplite /> <InputText @bind-Value=@Selected.Name /> <button type="submit" class="btn btn-primary"></button> <button type="reset" class="btn btn-warning" @onclick=@CanselEdit></button> </div> </EditForm> } else { <p><em>     </em></p> } } </div> </div> 
```
1. हम बच्चे के घटक को कॉल करते हैं और इसे हमारे वीएम के गुणों और तरीकों को मापदंडों के रूप में पास करते हैं।
2. अंतर्निहित डेटा सत्यापन के साथ घटक। हम इसमें संकेत देते हैं कि एक मॉडल के रूप में वह हमारे वीएम का उपयोग करेगा और वैध डेटा भेजते समय वह इसकी क्रिएट () विधि को कॉल करेगा
3. [आवश्यक] आदि जैसे मॉडल विशेषताओं का उपयोग करके सत्यापन किया जाएगा।
4. यहां मैं सत्यापन की सामान्य त्रुटियों को प्रदर्शित करूंगा
5. सत्यापन के साथ इनपुट बनाएंगे। संभावित टैग्स की सूची InputText, InputTextArea, InputSelect, InputNumber, InputCheckbox, InputTate
6. सार्वजनिक स्ट्रिंग प्रॉपर्टी NewTodo {get; सेट;} के लिए सत्यापन त्रुटियां यहां प्रदर्शित की जाएंगी
7. जब आप इस बटन पर क्लिक करते हैं, तो हमारे फॉर्म की OnValidSubmit घटना को उठाया जाएगा
Startup.cs फ़ाइल

यहां हम अपनी सेवाओं को पंजीकृत करते हैं
```
 public class Startup { public void ConfigureServices(IServiceCollection services) { // LocalStorage  SessionStorage       //    //     Nuget  Blazor.Extensions.Storage services.AddStorage(); services.AddSingleton<ITodoRepository, TodoRepository>(); services.AddSingleton<ICommandDispatcher, CommandDispatcher>(); services.AddSingleton<IQueryDispatcher, QueryDispatcher>(); services.AddSingleton<IQueryHandler<GetAll, List<TodoItem>>, GetAllHandler>(); services.AddSingleton<IQueryHandler<GetById, TodoItem>, GetByIdHandler>(); services.AddSingleton<ICommandHandler<Add>, AddHandler>(); services.AddSingleton<ICommandHandler<Remove>, RemoveHandler>(); services.AddSingleton<ICommandHandler<Update>, UpdateHandler>(); } public void Configure(IComponentsApplicationBuilder app) { //       App.razor //        <app></app> app.AddComponent<App>("app"); } } 
```
उपसंहार

यह लेख एक भूख खेलने और ब्लेज़र के आगे के अध्ययन को प्रोत्साहित करने के लिए लिखा गया था। मुझे उम्मीद है कि मैंने अपना लक्ष्य हासिल कर लिया है। खैर, इसका बेहतर अध्ययन करने के लिए, मैं Microsoft से आधिकारिक मैनुअल पढ़ने की सलाह देता हूं।

धन्यवाद

टेक्स्ट में मिली वर्तनी और व्याकरण संबंधी त्रुटियों के लिए एंड्रीनिकोलिन , win32nipuh , SemenPV का धन्यवाद।

ब्लेज़र + एमवीवीएम = चांदी की रोशनी वापस आ जाती है क्योंकि प्राचीन बुराई अजेय है