בלזור

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

עודכן דף :
תאריך יצירת דף :

סביבה

סטודיו חזותי
  • Visual Studio 2019
.NET
  • .NET 5.0

בהתחלה

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

יצירת Blazor WebAssembly

עכשיו אנחנו רק צריכים לוודא ש-Blazor WebAssembly עובד, אז נשאיר את זה כפי שהיה כשיצרנו את הפרויקט.

שם הפרויקט או שם הפתרון הוא שרירותי.

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

הוצאה לאור של Blazor WebAssembly

פרסם קבצים לפריסת Blazor WebAssembly לפרויקט MVC ליבה ASP.NET.

לחץ באמצעות לחצן העכבר הימני על הפרוייקט ובחר פרסם.

בחר תיקיות.

השאר את יעד הפרסום המוגדר כברירת מחדל.

מסך הפרסום מופיע. אתה יכול להגדיר הגדרות שונות, אבל לעת עתה, כפתור "פרסם" נשאר כברירת המחדל.

המתן לתחילת הפרסום ולהשלמתו בהצלחה. שים לב שנתיבי תיקיות ארוכים עלולים להיכשל.

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

יצירת פרויקט MVC ASP.NET Core

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

שם הפרוייקט הוא אופציונלי. ההגדרות האחרות נשארות בברירות המחדל שלהן.

מכיוון שהצד של Blazor מניח שהפיתוח הושלם ASP.NET הפרויקט בצד הליבה של MVC הוא סטארט-אפ.

יצירת תצוגות עבור הרכבה של בלזור

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

בעיקרון, זה צריך להיות שונה כדי להידמות לזה שנוצר כאשר אתה מפרסם את 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. ASP.NET הוספת דף רגילה ופרוצדורה ב- Core MVC זהים.

HomeController הוסף את הפעולות הבאות ל- . צד השרת לא עושה שום דבר באופן ספציפי, אז זה פשוט מחזיר את התצוגה.

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 reference

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, אינך צריך לעשות זאת באופן ידני על-ידי אי הכללת קבצים מיותרים מהפרויקט שלך.

במקרה של PWA, שגיאות פנימיות מתרחשות אם הן אינן נמצאות בסביבת https. לא ניתן להתקין אותו כ- PWA.

אישור ביצוע

ASP.NET ניפוי באגים מפעילים את פרויקט הליבה MVC. בקר בדף Blazor וודא שהפריסה של מכלול Blazor מופיעה בדף. בחר את התפריט הימני וודא שכל תכונה פועלת.

אודות כתובות URL

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

בעת פתיחת דף Blazor

בעת לחיצה על תפריט מונה

יומן שינויים

2022/7/12
  • נקודות נוספות שיש לשים לב אליהן בעת אי הכללת קבצים מיותרים במיקום הקובץ של אפליקציית Blazor שפורסמה.
2022/3/30
  • מהדורה ראשונה
מקם אפליקציות שנוצרו ב- Blazor WebAssembly ב- IIS
פריסת הרכבות אינטרנט מרובות של Blazor ב- MVC הליבה ASP.NET