Μπλάζορ

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

Ημερομηνία δημιουργίας σελίδας :

περιβάλλον

Οπτικό Στούντιο
  • Οπτικό Στούντιο 2019
.NET
  • .NET 5,0

Αρχικά

Αυτές οι συμβουλές προϋποθέτουν τις γνώσεις σας σχετικά με το "Running Blazor WebAssembly σε ASP.NET Core MVC View", οπότε αν δεν ξέρετε πώς να εκτελέσετε τη Συνέλευση Blazor στο ASP.NET Core MVC, δείτε αυτό το άρθρο.

Η προηγούμενη μέθοδος σας επιτρέπει να τοποθετήσετε μόνο μία συναρμολόγηση Blazor, οπότε αυτές οι Συμβουλές σας επιτρέπουν να τοποθετήσετε περισσότερες από μία.

Δημιουργία δύο συνελεύσεων Blazor

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

Δημοσιεύστε κάθε έργο και προετοιμάστε το αρχείο.

Δημιουργία ASP.NET έργου Core 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>
  <!-- 以下同じなので省略 -->

Προσθήκη σελίδων για δύο συγκροτήματα Blazor

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

HomeController Προσθέστε δύο ενέργειες στο . Και πάλι, η πλευρά του διακομιστή δεν κάνει τίποτα συγκεκριμένο, οπότε απλά επιστρέψτε την προβολή.

Κατ' οίκον έλεγχος.cs

// 省略

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

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

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

Κάντε δεξί κλικ στην ενέργεια για να προσθέσετε μια προβολή. Σε παρακαλώ, πήγαινε για δύο.

Η προβολή δημιουργείται.

Πρώτον, στήσε την πρώτη Συνέλευση του Μπλάζορ.

Μπλαζόρ1.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 Παρακαλείστε να σημειώσετε ότι είναι κάτι διαφορετικό από .

Μπλαζόρ2.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.

ευρετήριο.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");

Ανάπτυξη Πλακόρ WebΑρμολόγηση

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

Αντιγράψτε τα περιεχόμενα του wwwroot του δημοσιευμένου αρχείου σε κάθε φάκελο. Όπως index.html και πριν, δεν απαιτείται.

εκτέλεση

Εκτελέστε το για να βεβαιωθείτε ότι το Blazor WebAssembly σε κάθε σελίδα λειτουργεί σωστά.

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