💴 ⛄️ 📘 الجمع بين Blazor و Razor Pages في تطبيق ASP.NET Core 3 واحد ♥️ 🧙🏾 🚴🏿

تم إعداد ترجمة المقال استعدادًا لبدء الدورة التدريبية "C # ASP.NET Core developer" .

في هذه المقالة ، سوف أطلعك على كيفية إضافة الصفحات المستندة إلى Blazor إلى تطبيق Razor Pages الحالي.

مقدمة

سيذهب Blazor إلى الذهب في غضون أسبوعين . لا تزال العديد من الأشياء في المشروع تخضع لتغييرات جذرية إلى حد ما ، وقد أدى أحدث Preview 9 إلى تعقيد التفاعل بشكل كبير بين مكونات Razor Pages و Blazor: لم يعد من الممكن تمرير المعلمات من صفحة Razor إلى مكون Blazor باستخدام Html.RenderComponentAsync. قد يتغير هذا في المستقبل ، ولكن من المحتمل أن يظهر في .NET Core 3.0 مع هذا القيد.

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

الخطوة الأولى: دعم Blazor

لذلك ، لدينا تطبيق Razor Pages الحالي الذي تم تحويله إلى .NET Core 3.

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

Startup.cs:

نحن بحاجة إلى إضافة Services.AddServerSideBlazorإلى ConfigureServicesو endpoints.MapBlazorHubفي Configure:

_Layout.cshtml : إن Blazor

هناك حاجة إلى مكتبة JS للاتصال Blazor على جانب الملقم. ويمكن أن نضيف إلى _Layout.cshtml:

<script src="_framework/blazor.server.js"></script>

_Imports.razor:

نحتاج أيضًا إلى ملف جديد باسم _Imports.razor. يجب إضافته إلى مجلد Pages:

_Imports.razorيستخدم لتعيين عبارات الاستخدام لمكونات Blazor الخاصة بك. يمكنك أن تبدأ بما يلي

:؟

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components.Web

وهذا كل شيء . يدعم تطبيقنا الآن Blazor. هل يمكننا التحقق من ذلك عن طريق نسخ مكون Counter الكلاسيكي في تطبيقنا

@page "/counter"
 
<h1>Counter</h1>

<p>Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
}

وتحرير Privacy.cshtmlلتضمين مكون العداد:

<a href="https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application#">?</a>
@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
 
<p>Use this page to detail your site's privacy policy.</p>
 
<component>@(await Html.RenderComponentAsync<Counter>(RenderMode.Server))</component>

الآن ، عندما نقوم بتشغيل التطبيق ، يجب أن يظهر عداد العمل على صفحتنا:

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

الخطوة الثانية: دعم صفحات Blazor

يحدد مكون Blazor الخاص بنا المسار “/counter”:

ولكن اتباعه لا يعمل:

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

App.razor:

أنشئ ملفًا جديدًا App.razorفي المجلد

Pages

تم تعريف عنصر التوجيه في App.razor:

؟

@using Microsoft.AspNetCore.Components.Routing
 
<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData"/>
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

يقوم جهاز التوجيه تلقائيًا بمسح جميع مكونات Blazor باستخدام توجيه الصفحة ويضيف مسارات إليها.

_Host.cshtml:

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

_Host.cshtmlيحتوي على الدعوة Html.RenderComponentAsync:

؟

@page "/blazor"
 
@{
    Layout = "_Layout";
}
 
<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>

Startup.cs:

وأخيرًا ، إضافة صغيرة إلى الطريقة Configure Startup.cs. أضفنا سابقًا MapBlazorHub، والآن نحتاج إلى إضافة مكالمة MapFallbackToPageتشير إلى المكالمة الجديدة _Host.cshtml:

وهذا كل شيء! الآن نحن فقط بحاجة إلى اختبار الإعداد. أضف عداد صفحات Blazor (عداد) إلى التخطيط الخاص بك عن طريق التحرير Pages/Shared/_Layout.cshtml:

عندما نقوم بتشغيل التطبيق ، نرى صفحة Blazor تعمل في تطبيق Razor Pages الخاص بنا:

ولم نكسر الدعم لإضافة مكونات Blazor إلى صفحات Razor:

ملاحظات

زوجان من الأشياء ملاحظة:

تعمل مسارات Blazor فقط عندما تشير إلى الجذر. إذا تم تغيير "/ العداد" ، على سبيل المثال ، “/products/counter”فلن تتمكن الصفحة من تحميل الصفحة المطلوبة blazor.server.js. سنحصل على 404 بدلاً من ذلك. يجب أن يكون من الممكن تغيير علامة البرنامج النصي بحيث يمكن تحميل النص المطلوب بغض النظر عن الموقع ، ولكن يبدو أن هذا تغير من ما قبل 8 إلى ما قبل 9 ولم أستطع تشغيله. هذه لقطة شاشة 404 توضح المشكلة:
إذا تمكنت من تحميل البرنامج النصي ، فمن المحتمل أن تواجه نفس المشكلات مع Blazor hub: تحاول البرامج النصية العثور على hub in / products / blazor بدلاً من blazor. للتغلب على ذلك ، يمكنك بدء اتصال يدويًا بين الخادم والمتصفح:

<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.withUrl('/_blazor');
    }
  });
</script>

عينة من الرموز

نموذج التعليمات البرمجية لهذا المشروع متاح على GitHub .

هل تريد معرفة المزيد عن دورتنا؟ هنا لك .

اقرأ أكثر:

Battle of C # JSON المسلسلات لـ .NET Core 3

الجمع بين Blazor و Razor Pages في تطبيق ASP.NET Core 3 واحد