الميزات الجديدة في Blazor 0.7.0

Blazor 0.7.0 متاح الآن! يركز هذا التحديث على ADRs (العلاقات بين الأجداد والسليل). بالإضافة إلى ذلك ، أضفنا بعض التحسينات على عملية التصحيح. مزيد من التفاصيل تحت الخفض!

نبذة عن Blazor: إطار عمل لتطبيقات المتصفح مكتوبة في .NET وتم إطلاقها باستخدام WebAssembly. يمنحك جميع مزايا التطبيقات الحديثة ذات الصفحة الواحدة (SPA) ، بينما يسمح لك باستخدام .NET من البداية إلى النهاية ، وصولاً إلى التعليمات البرمجية الشائعة على الخادم والعميل. [ 1 ]



مقدمة صغيرة أو "ما هو Blazor؟" .

إليك الميزات الجديدة في Blazor 0.7.0:

• القيم والمعلمات المتتالية
• تحسينات التصحيح

يمكن العثور على قائمة كاملة بالتغييرات في هذا الإصدار في ملاحظات الإصدار Blazor 0.7.0 .

احصل على Blazor 0.7.0

قم بتثبيت ما يلي:

1. .NET Core 2.1 SDK (2.1.500 أو أحدث).
2. Visual Studio 2017 (15.9 أو أحدث) مع ASP.NET.
3. أحدث ملحق Blazor Language Services من Visual Studio Marketplace.
4. قوالب Blazor في سطر الأوامر:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates 

يمكنك العثور على التعليمات والوثائق والأدلة الخاصة بـ Blazor على blazor.net .

ترقية مشروع موجود إلى Blazor 0.7.0

لترقية مشروع Blazor 0.6.0 إلى 0.7.0:

• قم بتعيين المتطلبات المذكورة أعلاه.
• قم بتحديث حزم Blazor ومراجع أداة .NET CLI إلى 0.7.0. يجب أن يبدو ملف مشروع Blazor المحدث كما يلي:

 <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> 

هذا هو! الآن يمكنك تقييم أحدث ميزات Blazor.

القيم والمعلمات المتتالية

يمكن لمكونات Blazor قبول المعلمات التي يمكن استخدامها لنقل البيانات إلى المكون والتأثير على عرض المكون. يتم توفير قيم المعلمات من المكون الأصلي إلى المكون الفرعي. ومع ذلك ، في بعض الأحيان ، يكون من غير المناسب نقل البيانات من مكون سلف إلى مكون سليل ، خاصة عندما يكون هناك العديد من الطبقات بينهما. تحل القيم والمعلمات المتتالية هذه المشكلة من خلال توفير طريقة مناسبة لمكون السلف لتقديم قيمة تكون متاحة بعد ذلك لجميع المكونات المتساقطة. كما أنها توفر طريقة رائعة لتنسيق المكونات.

على سبيل المثال ، إذا كنت ترغب في تقديم بعض المعلومات حول موضوع لجزء معين من التطبيق الخاص بك ، يمكنك تمرير الأنماط والفئات المناسبة من مكون إلى مكون ، ولكن هذا سيكون مملاً ويستغرق وقتًا طويلاً. بدلاً من ذلك ، يمكن أن يوفر المكون الرئيسي العام معلومات الموضوع كقيمة متتالية يمكن للأحفاد قبولها كمعلمة متتالية ثم استخدامها عند الحاجة.

افترض أن فئة 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" }; } 

لاستخدام القيم المتتالية ، يمكن للمكونات تعريف معلمات المتتالية باستخدام السمة [CascadingParameter]. ترتبط القيم المتتالية بمعلمات المتتالية حسب النوع. في المثال التالي ، تم تعديل مكون العداد ليكون له معلمة متتالية ترتبط بالقيمة المتتالية لـ ThemeInfo ، والتي يتم استخدامها بعد ذلك لتعيين فئة الزر.

 @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:

 <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> 

في هذا المثال ، لا يتم تمرير مكونات Tab الفرعية بشكل صريح كمعلمات إلى TabSet. بدلاً من ذلك ، فهي ببساطة جزء من محتوى تابع TabSet. ولكن لا تزال TabSet بحاجة إلى معرفة كل علامة تبويب حتى تتمكن من عرض الرؤوس وعلامة التبويب النشطة. لتمكين هذا التنسيق دون الحاجة إلى أي اتصال مستخدم محدد ، يمكن أن يمثل مكون TabSet نفسه كقيمة متتالية ، والتي يمكن أن تتطابق بعد ذلك مع مكونات مكون Tab:

في TabSet.cshtml:

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

يسمح هذا لمكونات Tab الأصلية بالتقاط TabSet المحتوية كمعلمة متتالية ، بحيث يمكنها إضافة نفسها إلى TabSet وتنسيق أي Tab نشط:

في Tab.cshtml:

 [CascadingParameter] TabSet ContainerTabSet { get; set; } 

تحقق من نموذج TabSet الكامل هنا .

تحسينات التصحيح

في Blazor 0.5.0 ، أضفنا دعمًا لتصحيح أخطاء تطبيقات عميل Blazor في المستعرض . على الرغم من أن هذه التجربة أظهرت أن تصحيح أخطاء تطبيقات .NET في المستعرض أمر ممكن ، فقد كانت تجربة خطيرة إلى حد ما. يمكنك الآن تثبيت نقاط التوقف وإزالتها بشكل أكثر موثوقية ، كما تم تحسين موثوقية التصحيح خطوة بخطوة.