What's New in ब्लेज़र 0.7.0

ब्लेज़र 0.7.0 अब उपलब्ध है! यह अपडेट ADRs (पूर्वज-वंशज रिश्तों) पर केंद्रित है। इसके अतिरिक्त, हमने डिबगिंग प्रक्रिया में कुछ सुधार जोड़े हैं। कटौती के तहत अधिक जानकारी!

Blazor के बारे में थोड़ा: .NET में लिखे गए ब्राउज़र अनुप्रयोगों के लिए एक फ्रेमवर्क और WebAssembly का उपयोग करके लॉन्च किया गया। यह आपको आधुनिक सिंगल-पेज एप्लिकेशन (एसपीए) के सभी फायदे देता है, जबकि आपको सर्वर और क्लाइंट पर कॉमन कोड तक शुरुआत से अंत तक .NET का उपयोग करने की अनुमति देता है। [ १ ]



एक छोटा सा परिचय या "ब्लेज़र क्या है?" ।

यहाँ नया क्या है ब्लेज़र 0.7.0:

• कैस्केडिंग मान और पैरामीटर
• डिबगिंग एन्हांसमेंट

इस संस्करण में परिवर्तनों की एक पूरी सूची Blazor 0.7.0 रिलीज नोट्स में पाई जा सकती है।

ब्लेज़र 0.7.0 प्राप्त करें

निम्नलिखित स्थापित करें:

1. .NET कोर 2.1 एसडीके (2.1.500 या बाद में)।
2. दृश्य स्टूडियो 2017 (15.9 या बाद में) ASP.NET के साथ।
3. विजुअल स्टूडियो मार्केटप्लेस से नवीनतम ब्लेज़र भाषा सेवा विस्तार ।
4. कमांड लाइन पर रंगीन टेम्पलेट:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates 

आप Blazor के लिए निर्देश, दस्तावेज़ और मैनुअल blazor.net पर प्राप्त कर सकते हैं।

ब्लेजर के लिए एक मौजूदा प्रोजेक्ट को अपग्रेड करें 0.7.0

ब्लेज़र 0.6.0 परियोजना को 0.7.0 में अपग्रेड करने के लिए:

• ऊपर सूचीबद्ध पूर्वापेक्षाएँ सेट करें।
• अपने Blazor पैकेज और .NET CLI टूल संदर्भ को 0.7.0 में अपडेट करें। अद्यतन ब्लेज़र परियोजना फ़ाइल इस तरह दिखनी चाहिए:

 <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netstandard2.0</TargetFramework> <RunCommand>dotnet</RunCommand> <RunArguments>blazor serve</RunArguments> <LangVersion>7.3</LangVersion> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.7.0" /> <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.7.0" /> <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.7.0" /> </ItemGroup> </Project> 

यह बात है! अब आप ब्लेज़र की नवीनतम विशेषताओं का मूल्यांकन कर सकते हैं।

कैस्केडिंग मान और पैरामीटर

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

उदाहरण के लिए, यदि आप अपने आवेदन के विशिष्ट भाग के लिए किसी विषय के बारे में कुछ जानकारी प्रदान करना चाहते हैं, तो आप घटक से घटक तक उपयुक्त शैली और कक्षाएं पास कर सकते हैं, लेकिन यह थकाऊ और समय लेने वाला होगा। इसके बजाय, एक सामान्य माता-पिता घटक एक कैस्केडिंग मान के रूप में विषय जानकारी प्रदान कर सकता है जो कि वंशज कैस्केडिंग पैरामीटर के रूप में स्वीकार कर सकते हैं और फिर आवश्यकतानुसार उपयोग कर सकते हैं।

मान लीजिए कि ThemeInfo वर्ग उस विषय के बारे में सभी जानकारी बताता है, जिसे आप घटक पदानुक्रम के माध्यम से व्यक्त करना चाहते हैं ताकि आपके आवेदन के इस हिस्से में सभी बटन समान दिखें:

 public class ThemeInfo { public string ButtonClass { get; set; } } 

मूल घटक CascadingValue घटक का उपयोग करके एक कैस्केडिंग मान प्रदान कर सकता है। CascadingValue घटक घटक पदानुक्रम की एक सबट्री लपेटता है और एक एकल मान सेट करता है जो इस सबट्री के भीतर सभी घटकों के लिए उपलब्ध होगा। उदाहरण के लिए, हम लेआउट बॉडी बनाने वाले सभी घटकों के लिए विषय सूचना को कैस्केडिंग पैरामीटर के रूप में निर्दिष्ट कर सकते हैं:

 @inherits BlazorLayoutComponent <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> <CascadingValue Value="@theme"> <div class="content px-4"> @Body </div> </CascadingValue> </div> @functions { ThemeInfo theme = new ThemeInfo { ButtonClass = "btn-success" }; } 

कैस्केडिंग मानों का उपयोग करने के लिए, घटक [कैस्केडिंगपैरेट] विशेषता का उपयोग करके कैस्केडिंग मापदंडों की घोषणा कर सकते हैं। कैस्केडिंग मान प्रकार से कैस्केडिंग मापदंडों से बंधे हैं। निम्नलिखित उदाहरण में, काउंटर घटक को एक कैस्केडिंग पैरामीटर के लिए संशोधित किया गया है जो थीमइन्फो के कैस्केडिंग मान से बांधता है, जो तब बटन के लिए वर्ग सेट करने के लिए उपयोग किया जाता है।

 @page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn @ThemeInfo.ButtonClass" onclick="@IncrementCount">Click me</button> @functions { int currentCount = 0; [CascadingParameter] protected ThemeInfo ThemeInfo { get; set; } void IncrementCount() { currentCount++; } } 

जब हम एप्लिकेशन लॉन्च करते हैं, तो हम देखते हैं कि एक नई शैली लागू की जा रही है:



कैस्केडिंग विकल्प भी घटक पदानुक्रम में बातचीत करने की अनुमति देते हैं। उदाहरण के लिए, मान लें कि आपके पास एक टैबसेट घटक है जिसमें कई टैब घटक हैं:

 <TabSet> <Tab Title="First tab"> <h4>First tab</h4> This is the first tab. </Tab> @if (showSecondTab) { <Tab Title="Second"> <h4>Second tab</h4> You can toggle me. </Tab> } <Tab Title="Third"> <h4>Third tab</h4> <label> <input type="checkbox" bind=@showSecondTab /> Toggle second tab </label> </Tab> </TabSet> 

इस उदाहरण में, टैब चाइल्ड घटकों को स्पष्ट रूप से टैबसेट के मापदंडों के रूप में पारित नहीं किया गया है। इसके बजाय, वे बस टैबसेट चाइल्ड कंटेंट का हिस्सा हैं। लेकिन टैबसेट को अभी भी प्रत्येक टैब के बारे में जानने की आवश्यकता है ताकि यह हेडर और सक्रिय टैब को प्रदर्शित कर सके। इस समन्वय को सक्षम करने के लिए, किसी विशिष्ट उपयोगकर्ता कनेक्शन की आवश्यकता के बिना, TabSet घटक खुद को एक कैस्केडिंग मान के रूप में प्रस्तुत कर सकता है, जिसे तब टैब घटक के घटकों द्वारा मिलान किया जा सकता है:

TabSet.cshtml में:

 <!-- Display the tab headers --> <CascadingValue Value=this> <ul class="nav nav-tabs"> @ChildContent </ul> </CascadingValue> 

यह पैरेंट टैब घटकों को टैब्सेट को कैस्केडिंग पैरामीटर के रूप में कैप्चर करने की अनुमति देता है, इसलिए वे खुद को टैबसेट में जोड़ सकते हैं और समन्वय कर सकते हैं जिस पर टैब सक्रिय है:

Tab.cshtml में:

 [CascadingParameter] TabSet ContainerTabSet { get; set; } 

यहां पूरा टैबसेट नमूना देखें।

डिबगिंग एन्हांसमेंट

Blazor 0.5.0 में, हमने Blazor क्लाइंट अनुप्रयोगों को ब्राउज़र में डीबग करने के लिए समर्थन जोड़ा। हालाँकि इस प्रयोग ने प्रदर्शित किया कि ब्राउज़र में .NET अनुप्रयोग डीबग करना संभव है, यह एक खतरनाक अनुभव था। अब आप ब्रेकपॉइंट्स को अधिक विश्वसनीय रूप से स्थापित और निकाल सकते हैं, और चरण-दर-चरण डीबगिंग की विश्वसनीयता में सुधार किया गया है।