بلازور

ASP.NET تشغيل Blazor WebAssembly مع عرض MVC الأساسي

تحديث الصفحة :
تاريخ إنشاء الصفحة :

وسط

استوديو مرئي
  • فيسوال ستوديو 2019
.NET
  • .NET 5.0

في البداية

نظرا لأن Blazor WebAssembly هي تقنية عميل ، فلا يهم كيفية عمل خادم الويب. ومع ذلك ، من أجل خدمة WebAssembly للعملاء ، على الأقل ، يلزم التكوين من جانب الخادم. دعنا نقوم بتشغيل برنامج الخادم ASP.NET Core MVC في Blazor WebAssembly.

إنشاء تجميع ويب Blazor

الآن نحتاج فقط إلى التأكد من أن Blazor WebAssembly يعمل ، لذلك سنتركه كما كان عندما أنشأنا المشروع.

اسم المشروع أو اسم الحل تعسفي.

يمكن أن تعمل شاشة "ASP.NET المستضافة على Core" المعروضة في شاشة المعلومات الإضافية أيضا كملف MVC ، ولكن المشروع الناتج قريب من خادم واجهة برمجة التطبيقات ، لذلك لن نتحقق منه هنا.

نشر Blazor WebAssembly

نشر الملفات لنشر Blazor WebAssembly إلى مشروع MVC Core ASP.NET.

انقر بزر الماوس الأيمن فوق المشروع واختر نشر.

حدد المجلدات.

اترك وجهة النشر الافتراضية.

تظهر شاشة النشر. يمكنك تعيين إعدادات مختلفة ، ولكن في الوقت الحالي ، يتم ترك الزر "نشر" كزر افتراضي.

انتظر حتى يبدأ النشر ويكتمل بنجاح. لاحظ أن مسارات المجلدات الطويلة قد تفشل.

يمكنك التحقق من إنشاء الملف في المجلد المحدد. إذا تم تحديده كمسار نسبي ، فإن الوجهة مرتبطة بالمشروع.

إنشاء مشروع MVC أساسي ASP.NET

بعد ذلك ، قم بإنشاء مشروع MVC أساسي ASP.NET. قد يكون فتح Visual Studio بشكل منفصل أمرا مملا ، لذا قم بإنشائه داخل حل Blazor WebAssembly. نظرا لعدم ارتباط المشروعين هذه المرة ، فلا توجد مشكلة حتى لو تم إنشاؤهما بشكل منفصل.

اسم المشروع اختياري. يتم ترك الإعدادات الأخرى في الإعدادات الافتراضية الخاصة بها.

نظرا لأن جانب Blazor يفترض اكتمال التطوير ASP.NET فإن المشروع على جانب MVC الأساسي هو شركة ناشئة.

إنشاء طرق عرض لجمعية Blazor

ستتغير هذه المنطقة اعتمادا على المشروع الذي تقوم بإنشائه بالفعل ، لذا يرجى تعديله وفقا لهذا المشروع. هنا ، سنقوم بتعديله بناء على تكوين نموذج المشروع.

في الأساس ، يجب تعديله ليشبه الذي تم إنشاؤه عند نشر index.html جمعية Blazor.

إصلاح _Layout.cshtml

أريد أن أشير إلى CSS لجمعية Blazor ، حتى أتمكن من كتابتها مباشرة إلى . _Layout.cshtml نريد أن يتم تطبيقه فقط على الصفحة المستهدفة قدر الإمكان ، حتى نتمكن من توسيعه عن طريق الإضافة بحيث RenderSectionAsync يمكن كتابة الروابط إلى CSS في كل صفحة.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - AspNetCoreMvc</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  @* 追加 *@
  @await RenderSectionAsync("Styles", required: false)
</head>
<body>
  <!-- 以下同じなので省略 -->

إضافة صفحة لجمعية Blazor

أضف صفحة مخصصة لعرض جمعية Blazor. ASP.NET إضافة الصفحة العادية والإجراءات في Core MVC هي نفسها.

HomeController أضف الإجراءات التالية إلى . لا يقوم جانب الخادم بأي شيء على وجه الخصوص ، لذلك يقوم فقط بإرجاع العرض.

هوم كونترولر.cs

// 省略

namespace AspNetCoreMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    // 追加
    public IActionResult Blazor()
    {
      return View();
    }
  }
}

انقر بزر الماوس الأيمن فوق الإجراء لإضافة طريقة عرض.

لا يوجد شيء للارتباط به ، لذا أضفه كما هو.

يتم إنشاء طريقة العرض.

باستخدام ما تم إنشاؤه في وقت نشر index.html جمعية Blazor ، سنقوم بإعادة تشكيله على النحو التالي.

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

أضف رابطا بحيث يمكنك الانتقال إلى الصفحة في Blazor.

index.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>

إضافة مرجع Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs لست بحاجة إلى كتابة الكود الضروري بنفسك ، ولكن للسهولة التي تحصل عليها من Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

انقر بزر الماوس الأيمن فوق التبعيات وحدد إدارة حزم NuGet.

حدد علامة التبويب الإدارة وأدخل Microsoft.AspNetCore.Components.WebAssembly.Server في حقل البحث.

يتم عرض حزمة تحمل نفس الاسم، لذا قم بتثبيتها.

تحقق من إضافة الحزمة.

التغييرات في بدء التشغيل.cs

app.UseHttpsRedirection(); أدخل التعليمة البرمجية التالية على السطر التالي السطر:

app.UseBlazorFrameworkFiles();

نشر Blazor WebAssembly

في الأساس ، يمكنك وضع مجلد Blazor WebAssembly wwwroot المنشور كما هو في مجلد wwwroot الخاص ب ASP.NEt Core ،index.html ولكن يجب عليك حذفه لأنه لن تكون هناك حاجة إليه بعد الآن. أيضا ، نظرا لأنه مدبلجfavicon.ico ، حدد الرمز الذي تريد استخدامه.

عند الإصدار باستخدام PWA، إذا قمت باستبعاد الملفات (مثل الفهرس.html) في المجلد wwwroot، ستحتاج إلى الفتح في محرر نصوص ، وكذلك في مجلد wwwroot ، وحذف السجلات الموجودة في service-worker-assets.js الملف المستبعد. وإلا، فقد تظهر لك رسالة خطأ داخلية عند فتح شاشة ويب.

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

في حالة PWAs ، تحدث أخطاء داخلية إذا لم تكن في بيئة https. لا يمكن تثبيته كPWA.

تأكيد التنفيذ

ASP.NET التصحيح تشغيل مشروع MVC الأساسية. قم بزيارة صفحة Blazor وتحقق من ظهور تخطيط مجموعة Blazor في الصفحة. حدد القائمة اليمنى وتحقق من عمل كل ميزة.

لمحة عن عناوين URL

إذا نقرت على القائمة اليمنى ل Blazor Assembly المعروضة في الصفحة، فستلاحظ أن عنوان URL يتغير. لا يتبع هذا السلوك سلوك عنوان URL المتوقع من قبل ASP.NET Core MVC، لذلك إذا أمكن، يفضل أن تقوم مجموعة Blazor بإنشاء عنوان URL بطريقة لا يتغير عنوان URL.

عند فتح صفحة Blazor

عند النقر فوق القائمة عداد

سجل التغيير

2022/7/12
  • تمت إضافة نقاط يجب ملاحظتها عند استبعاد الملفات غير الضرورية في موضع الملف الخاص بتطبيق Blazor المنشور.
2022/3/30
  • الطبعة الأولى
وضع التطبيقات التي تم إنشاؤها في Blazor WebAssembly في IIS
نشر العديد من تجميعات الويب Blazor في ASP.NET Core MVC