ASP.NET Εκτελέστε το Blazor WebAssembly με προβολή MVC πυρήνα

Σελίδα ενημέρωση : Κυριακή, 17 Ιουλίου 2022

Ημερομηνία δημιουργίας σελίδας : Τετάρτη, 30 Μαρτίου 2022

περιβάλλον

Οπτικό στούντιο

Visual Studio 2019

.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 σε ένα ASP.NET έργο Core MVC.

Κάντε δεξί κλικ στο έργο και επιλέξτε Δημοσίευση.

Επιλέξτε Φάκελοι.

Αφήστε τον προεπιλεγμένο προορισμό δημοσίευσης.

Εμφανίζεται η οθόνη δημοσίευσης. Μπορείτε να ορίσετε διάφορες ρυθμίσεις, αλλά προς το παρόν, το κουμπί "Δημοσίευση" παραμένει ως προεπιλογή.

Περιμένετε να ξεκινήσει και να ολοκληρωθεί με επιτυχία η δημοσίευση. Σημειώστε ότι οι μεγάλες διαδρομές φακέλων ενδέχεται να αποτύχουν.

Μπορείτε να επαληθεύσετε ότι το αρχείο έχει δημιουργηθεί στον καθορισμένο φάκελο. Εάν έχει καθοριστεί ως σχετική διαδρομή, ο προορισμός είναι σχετικός με το έργο.

Δημιουργία ASP.NET έργου MVC πυρήνα

Στη συνέχεια, δημιουργήστε ένα ASP.NET έργο Core MVC. Το άνοιγμα του Visual Studio ξεχωριστά μπορεί να είναι κουραστικό, οπότε δημιουργήστε το μέσα στη λύση Blazor WebAssembly. Δεδομένου ότι τα δύο έργα δεν συνδέονται αυτή τη φορά, δεν υπάρχει κανένα πρόβλημα ακόμη και αν δημιουργηθούν ξεχωριστά.

Το όνομα του έργου είναι προαιρετικό. Οι άλλες ρυθμίσεις παραμένουν στις προεπιλογές τους.

Δεδομένου ότι η πλευρά Blazor υποθέτει ότι η ανάπτυξη ολοκληρώνεται ASP.NET το έργο στην κεντρική πλευρά του MVC είναι μια εκκίνηση.

Δημιουργία προβολών για τη συνέλευση Blazor

Αυτή η περιοχή θα αλλάξει ανάλογα με το έργο που πραγματικά δημιουργείτε, οπότε παρακαλούμε να το τροποποιήσετε σύμφωνα με αυτό το έργο. Εδώ, θα το τροποποιήσουμε με βάση τη διαμόρφωση του δείγματος έργου.

Βασικά, θα πρέπει να τροποποιηθεί ώστε να μοιάζει με αυτό που δημιουργείται όταν δημοσιεύετε τη 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

Προσθέστε μια ειδική σελίδα για να εμφανίσετε τη Συνέλευση Blazor. ASP.NET η κανονική προσθήκη σελίδας και η διαδικασία στο Core MVC είναι οι ίδιες.

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

Startup.cs Δεν χρειάζεται να γράψετε τον απαραίτητο κώδικα μόνοι σας, αλλά για ευκολία παίρνετε από Microsoft.AspNetCore.Components.WebAssembly.Server το NuGet.

Κάντε δεξί κλικ στην επιλογή Εξαρτήσεις και επιλέξτε Διαχείριση πακέτων NuGet.

Επιλέξτε την καρτέλα Διαχείριση και πληκτρολογήστε Microsoft.AspNetCore.Components.WebAssembly.Server στο πεδίο αναζήτησης.

Εμφανίζεται ένα πακέτο με το ίδιο όνομα, οπότε εγκαταστήστε το.

Βεβαιωθείτε ότι το πακέτο έχει προστεθεί.

Αλλαγές στην Εκκίνηση.cs

app.UseHttpsRedirection(); Εισαγάγετε τον ακόλουθο κώδικα στη γραμμή που ακολουθεί τη γραμμή:

app.UseBlazorFrameworkFiles();

Ανάπτυξη του Blazor WebAssembly

Βασικά, μπορείτε να βάλετε το δημοσιευμένο φάκελο Wwwroot Blazor WebAssembly όπως είναι στο φάκελο wwwroot του ASP.NEt Core,index.html αλλά θα πρέπει να το διαγράψετε επειδή δεν θα είναι πλέον απαραίτητο. Επίσης, δεδομένου ότι είναιfavicon.ico μεταγλωττισμένο, αποφασίστε ποιο εικονίδιο θα χρησιμοποιήσετε.

Κατά την κυκλοφορία με PWA, εάν έχετε εξαιρέσει αρχεία (όπως ευρετήριο.html) στο φάκελο wwwroot, Θα χρειαστεί να ανοίξετε σε ένα πρόγραμμα επεξεργασίας κειμένου, επίσης στο φάκελο wwwroot, και να διαγράψετε τις εγγραφές στο service-worker-assets.js εξαιρούμενο αρχείο. Διαφορετικά, ενδέχεται να λάβετε ένα εσωτερικό σφάλμα όταν ανοίγετε μια οθόνη web.

Όταν δημοσιεύετε μια εφαρμογή Blazor, δεν χρειάζεται να το κάνετε αυτό με μη αυτόματο τρόπο εξαιρώντας περιττά αρχεία από το έργο σας.

Στην περίπτωση των PWA, τα εσωτερικά σφάλματα προκύπτουν εάν δεν βρίσκονται σε περιβάλλον https. Δεν μπορεί να εγκατασταθεί ως PWA.

Επιβεβαίωση εκτέλεσης

ASP.NET εντοπισμός σφαλμάτων εκτελεί το έργο Core MVC. Επισκεφθείτε τη σελίδα Blazor και βεβαιωθείτε ότι η διάταξη της Συνέλευσης Blazor εμφανίζεται στη σελίδα. Επιλέξτε το αριστερό μενού και βεβαιωθείτε ότι κάθε δυνατότητα λειτουργεί.

Σχετικά με τις διευθύνσεις URL

Εάν κάνετε κλικ στο αριστερό μενού του Blazor Assembly που εμφανίζεται στη σελίδα, θα παρατηρήσετε ότι η διεύθυνση URL αλλάζει. Αυτή η συμπεριφορά δεν ακολουθεί τη συμπεριφορά url που αναμένεται από ASP.NET Core MVC, επομένως, εάν είναι δυνατόν, η συνέλευση Blazor θα πρέπει κατά προτίμηση να δημιουργήσει τη διεύθυνση URL με τέτοιο τρόπο ώστε η διεύθυνση URL να μην αλλάζει.

Όταν ανοίγετε μια σελίδα Blazor

Όταν κάνετε κλικ στο μενού Μετρητής

Αρχείο καταγραφής αλλαγών

2022/7/12

Προστέθηκαν σημεία που πρέπει να σημειωθούν κατά την εξαίρεση περιττών αρχείων στην τοποθέτηση αρχείων της δημοσιευμένης εφαρμογής Blazor.

2022/3/30

πρώτη έκδοση

Τοποθέτηση εφαρμογών που δημιουργήθηκαν στο Blazor WebAssembly στις IIS

Ανάπτυξη πολλαπλών πλακών Web Blazor σε ASP.NET πυρήνα MVC