بلازور

استقرار چند Blazor WebAssemblys در ASP.NET هسته MVC

تاریخ ایجاد صفحه :

محیط

ویژوال استودیو
  • ویژوال استودیو ۲۰۱۹
.NET
  • .NET 5.0

در ابتدا

این نکات فرض دانش خود را از "در حال اجرا Blazor WebAssembly در ASP.NET هسته MVC مشاهده", بنابراین اگر شما نمی دانید که چگونه برای اجرای Blazor مونتاژ در ASP.NET هسته MVC, مراجعه کنید که مقاله.

روش قبلی اجازه می دهد تا شما را به محل تنها یک مجمع Blazor, بنابراین این نکات اجازه می دهد تا شما را به جای بیش از یک.

ایجاد دو مجمع بلازور

شما می توانید مطمئن شوید که دو مجمع بلازور به ترتیب در حال اجرا هستند، بنابراین شما می توانید هر کاری که مجمع بلازور است انجام دهید. لطفا آن را به طوری که شما می توانید تفاوت برای زمان بودن را ببینید. در اینجا رنگ منوی سمت چپ برای حالت اولیه پروژه تغییر می کند.

هر پروژه را منتشر کنید و فایل را آماده کنید.

ایجاد یک ASP.NET هسته MVC

این نیز بر اساس راهنمایی قبل از ایجاد یک پروژه است. هنگامی که شما پروژه خود را ایجاد کرده اید، اضافه کردن 'در 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>
  <!-- 以下同じなので省略 -->

اضافه کردن صفحات برای دو مجمع بلازور

این بار دو دیدگاه خواهیم داشت تا هر مجمع بلازور را نشان دهیم.

HomeController اضافه کردن دو کار به . باز هم سمت سرور هیچ کاری به طور خاص انجام نمی دهد، بنابراین فقط نمایش را برگردانید.

HomeController.cs

// 省略

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

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

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

برای افزودن یک نمایش روی عمل کلیک راست کنید. خواهش ميکنم براي دو تا برو .

منظره ایجاد می شود.

ابتدا اولین مجمع بلازور را راه اندازی کرد.

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 Assembly مشخص می کند که کنترل کننده و عمل مسیر یکسانی دارند، زیرا اگر URL تعیین شده توسط عمل MVC با مسیر نسبی از میزبان این پایه مطابقت داشته باشد، مجمع بلازور هنگام بارگذاری شکست خواهد خورد.

به هر حال، مورد این مسیر تحت تأثیر قرار می گیرد، بنابراین اگر 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 هسته