بلازور

نشر العديد من تجميعات الويب Blazor في ASP.NET Core MVC

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

وسط

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

في البداية

تفترض هذه النصائح معرفتك ب "تشغيل Blazor WebAssembly في ASP.NET Core MVC" ، لذلك إذا كنت لا تعرف كيفية تشغيل Blazor Assembly على ASP.NET Core MVC ، فراجع هذه المقالة.

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

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

يمكنك التأكد من أن مجموعتي Blazor تعملان على التوالي ، حتى تتمكن من القيام بكل ما هو عليه Blazor Assembly. يرجى جعله حتى تتمكن من رؤية الفرق في الوقت الحالي. هنا ، يتم تغيير لون القائمة اليسرى للحالة الأولية للمشروع.

نشر كل مشروع وإعداد الملف.

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

يعتمد هذا أيضا على النصائح السابقة لإنشاء مشروع. بمجرد إنشاء مشروعك ، أضف "في Microsoft.AspNetCore.Components.WebAssembly.Server NuGet".

إصلاح _Layout.cshtml

هذا هو نفسه في المرة السابقة.

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

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

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

// 省略

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

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

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

انقر بزر الماوس الأيمن فوق الإجراء لإضافة طريقة عرض. يرجى الذهاب لشخصين.

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

أولا ، قم بإنشاء أول جمعية Blazor.

Blazor1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.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>
}

ما يختلف عن السابق هو أن محتويات العلامة <base href="/" /> الأساسية مصنوعة من . <base href="/Home/Blazor1/" />

إذا قمت بتغيير هذا المسار، فسيتمكن Blazor Assembly من الرجوع إلى كل ملف، مثل dll، كجذر لهذا المسار في مسار نسبي.

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

بالمناسبة ، تتأثر حالة هذا المسار ، لذلك إذا كان عنوان URL صغيرا تلقائيا ، فيجب أن يكون بأحرف صغيرة.

Blazor2.cshtml تحرير كذلك. Blazor1.cshtml يرجى ملاحظة أنه يختلف بعض الشيء عن .

Blazor2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.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>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

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

يتغير مسار مسار Blazor WebAssembly، لذا قم بتمكينه لكل مسار.

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

نشر Blazor WebAssembly

في المرة الأخيرة ، وضعت الملف المنشور في wwwroot كما كان ، ولكن نظرا لأنني حددت مسارا للعلامة الأساسية في كل صفحة ، أقوم بإنشاء مجلد بمسار مماثل في wwwroot.

انسخ محتويات wwwroot للملف المنشور إلى كل مجلد. كما index.html كان من قبل ، فإنه غير مطلوب.

تنفيذ

قم بتشغيله للتأكد من أن blazor WebAssembly على كل صفحة يعمل بشكل صحيح.

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