בלזור

פריסת הרכבות אינטרנט מרובות של Blazor ב- MVC הליבה ASP.NET

תאריך יצירת דף :

סביבה

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

בהתחלה

טיפים אלה מניחים את הידע שלך של "הפעלת Blazor WebAssembly בתצוגת MVC הליבה ASP.NET", כך שאם אינך יודע כיצד להפעיל את הרכבת Blazor ב- ASP.NET Core MVC, עיין במאמר זה.

השיטה הקודמת מאפשרת לך למקם רק הרכבה אחת Blazor, כך טיפים אלה מאפשרים לך למקם יותר מאחד.

צור שני הרכבות בלזור

אתה יכול לוודא כי שני אסיפה Blazor פועלים בהתאמה, כך שאתה יכול לעשות מה האסיפה Blazor הוא. אנא עשה זאת כך שתוכל לראות את ההבדל לעת עתה. כאן, צבע התפריט הימני משתנה עבור המצב ההתחלתי של הפרוייקט.

פרסם כל פרוייקט והכן את הקובץ.

יצירת פרויקט MVC ליבה ASP.NET

הדבר מבוסס גם על העצות שלפני יצירת פרוייקט. לאחר שיצרת את הפרוייקט, הוסף את 'ב- Microsoft.AspNetCore.Components.WebAssembly.Server NuGet'.

Fix _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 הוסף שתי פעולות ל- . שוב, הצד של השרת לא עושה שום דבר מסוים, אז פשוט להחזיר את התצוגה.

שליטה ביתית.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 תוכל להפנות לכל קובץ, כגון 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

בפעם האחרונה, הנחתי את הקובץ שפורסם ב wwwroot כפי שהיה, אבל מאז שציינתי נתיב עבור תג הבסיס בכל עמוד, אני יוצר תיקיה עם נתיב דומה wwwroot.

העתק את תוכן ה- wwwroot של הקובץ שפורסם לכל תיקיה. כמו index.html קודם, זה לא נדרש.

הוצאה להורג

הפעל אותו כדי לוודא ש-WebAssembly של blazor בכל דף פועל כראוי.

ASP.NET הפעל את Blazor WebAssembly עם תצוגת MVC ליבה