Blazor

ASP.NET Core MVC'de birden fazla Blazor WebAssemblys dağıtma

Sayfa oluşturma tarihi :

çevre

Visual Studio
  • Visual Studio 2019
.NET
  • .NET 5.0

İlk başta

Bu İpuçları, "ASP.NET Çekirdek MVC Görünümünde Blazor WebAssembly'yi Çalıştırma" bilginizi varsayar, bu nedenle ASP.NET Core MVC'de Blazor Assembly'i nasıl çalıştırabileceğinizi bilmiyorsanız, bu makaleye bakın.

Önceki yöntem yalnızca bir Blazor Derlemesi yerleştirmenize izin verir, bu nedenle bu İpuçları birden fazla yerleştirmenize izin verir.

İki Blazor Derlemesi Oluştur

İki Blazor Meclisi'nin sırasıyla çalıştığından emin olabilirsiniz, böylece Blazor Meclisi ne ise onu yapabilirsiniz. Lütfen şimdilik farkı görebilmeniz için yapın. Burada, projenin başlangıç durumu için sol menünün rengi değiştirilir.

Her projeyi yayımlayın ve dosyayı hazırlayın.

ASP.NET Core MVC projesi oluşturma

Bu, bir proje oluşturmadan önceki ipuçlarına da dayanır. Projenizi oluşturduktan sonra 'NuGet'te Microsoft.AspNetCore.Components.WebAssembly.Server ' ekleyin.

_Layout.cshtml dosyasını düzeltme

Geçen seferkiyle aynı.

<!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>
  <!-- 以下同じなので省略 -->

İki Blazor Derlemesi için sayfa ekleme

Bu sefer, her Blazor Meclisi'ne göstermek için iki görüşe sahip olacağız.

HomeController 'ye iki eylem ekleyin. Yine, sunucu tarafı özellikle hiçbir şey yapmaz, bu yüzden görünümü döndürmek yeterlidir.

Ev Kontrol.cs

// 省略

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

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

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

Görünüm eklemek için eylemi sağ tıklatın. Lütfen iki tane.

Görünüm oluşturulur.

İlk olarak, ilk Blazor Meclisi'ni kurun.

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

Öncekinden farklı olan şey, temel etiketin <base href="/" /> içeriğinin . <base href="/Home/Blazor1/" />

Bu yolu değiştirirseniz, Blazor Assembly, dll gibi her dosyaya göreli bir yolda bu yolun kökü olarak başvurulabilir.

Ancak, geçerli Blazor Derleme belirtimi denetleyici ve eylemin aynı yola sahip olduğunu belirtir, çünkü MVC eylemi tarafından belirlenen URL bu tabanın ana bilgisayarından göreli yol ile eşleşmiyorsa, Blazor Derlemesi yüklenirken başarısız olur.

Bu arada, bu yolun durumu etkilenir, bu nedenle URL otomatik olarak küçükse, küçük olmalıdır.

Blazor2.cshtml düzenleme de yapın. Blazor1.cshtml 'den biraz farklı olduğunu lütfen unutmayın.

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'un sayfasına gidebilmek için bir bağlantı ekleyin.

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>

Başlangıç.cs Değişiklikler

Blazor WebAssembly'nin yol yolu değişir, bu nedenle her yol için etkinleştirin.

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

Blazor WebAssembly Dağıtımı

Son kez, yayımlanan dosyayı olduğu gibi wwwroot'a yerleştirdim, ancak her sayfada temel etiket için bir yol belirttiğimden, wwwroot'ta benzer bir yola sahip bir klasör oluşturuyorum.

Yayımlanan dosyanın wwwroot içeriğini her klasöre kopyalayın. Daha önce olduğu gibi index.html , gerekli değildir.

idam

Her sayfadaki blazor WebAssembly'nin düzgün çalıştığından emin olmak için çalıştırın.

ASP.NET Blazor WebAssembly'yi Core MVC görünümüyle çalıştırma