ASP.NET Jalankan Blazor WebAssembly dengan pandangan MVC Teras

Laman dikemaskini : Ahad, 17 Julai 2022

Tarikh penciptaan halaman : Rabu, 30 Mac 2022

Persekitaran

Visual Studio

Studio Visual 2019

.NET

.NET 5.0

Pada mulanya

Kerana Blazor WebAssembly adalah teknologi pelanggan, tidak kira bagaimana pelayan web berfungsi. Walau bagaimanapun, untuk berkhidmat WebAssembly kepada pelanggan, sekurang-kurangnya, konfigurasi bahagian pelayan diperlukan. Mari jalankan program server sebagai ASP.NET Core MVC di Blazor WebAssembly.

Mencipta Blazor WebAssembly

Sekarang kita hanya perlu memastikan bahawa Blazor WebAssembly berfungsi, jadi kita akan meninggalkannya seperti ketika kita membuat projek itu.

Nama projek atau nama penyelesaian adalah sewenang-wenangnya.

Skrin "ASP.NET dihoskan pada Core" yang dipaparkan di skrin maklumat tambahan juga boleh berfungsi sebagai MVC, tetapi projek yang dihasilkan hampir dengan pelayan API, jadi kami tidak akan menyemaknya di sini.

Penerbitan Blazor WebAssembly

Terbitkan fail untuk menggunakan Blazor WebAssembly ke projek MVC Teras ASP.NET.

Klik kanan projek dan pilih Terbitkan.

Pilih Folder.

Tinggalkan destinasi penerbitan lalai.

Skrin penerbitan muncul. Anda boleh menetapkan pelbagai tetapan, tetapi buat masa ini, butang "Terbitkan" dibiarkan sebagai lalai.

Tunggu penerbitan bermula dan selesai dengan jayanya. Ambil perhatian bahawa laluan folder panjang mungkin gagal.

Anda boleh mengesahkan bahawa fail telah dibuat dalam folder yang ditentukan. Jika ia ditentukan sebagai laluan relatif, destinasi adalah relatif kepada projek.

Buat projek MVC Teras ASP.NET

Seterusnya, buat projek MVC Teras ASP.NET. Membuka Visual Studio secara berasingan boleh membosankan, jadi buat di dalam penyelesaian Blazor WebAssembly. Oleh kerana kedua-dua projek tidak dihubungkan kali ini, tidak ada masalah walaupun ia dibuat secara berasingan.

Nama projek adalah pilihan. Seting lain ditinggalkan pada lalai mereka.

Oleh kerana pihak Blazor menganggap bahawa pembangunan selesai ASP.NET projek di bahagian MVC teras adalah permulaan.

Mencipta Pandangan untuk Perhimpunan Blazor

Kawasan ini akan berubah bergantung pada projek yang sebenarnya anda buat, jadi sila ubah suai mengikut projek tersebut. Di sini, kami akan mengubahnya berdasarkan konfigurasi projek sampel.

Pada asasnya, ia harus diubah suai untuk menyerupai yang dibuat apabila anda menerbitkan index.html Perhimpunan Blazor.

Memperbaiki _Layout.cshtml

Saya ingin merujuk CSS Perhimpunan Blazor, jadi saya boleh menulis terus kepada . _Layout.cshtml Kami mahu ia digunakan hanya pada halaman sasaran sebanyak mungkin, jadi kami boleh melanjutkannya dengan menambah supaya RenderSectionAsync pautan ke CSS boleh ditulis pada setiap halaman.

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

Tambah halaman untuk Perhimpunan Blazor

Tambah halaman khusus untuk memaparkan Perhimpunan Blazor. ASP.NET Tambahan dan prosedur halaman biasa dalam Core MVC adalah sama.

HomeController Tambah tindakan berikut ke . Bahagian pelayan tidak melakukan apa-apa khususnya, jadi ia hanya mengembalikan pandangan.

RumahPengawal.cs

// 省略

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

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

Klik kanan tindakan untuk menambah pandangan.

Tiada apa-apa untuk mengikat, jadi tambahkannya seperti sedia ada.

Pandangan dicipta.

Menggunakan yang dihasilkan pada masa penerbitan index.html Perhimpunan Blazor dirujuk, kami akan membuat semula seperti berikut.

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

Tambah pautan supaya anda boleh menavigasi ke halaman dalam 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>

Tambah rujukan Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs Anda tidak perlu menulis kod yang diperlukan sendiri, tetapi untuk kemudahan yang anda dapat dari Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Klik kanan Kebergantungan dan pilih Urus Pakej NuGet.

Pilih tab Pentadbiran dan masukkan Microsoft.AspNetCore.Components.WebAssembly.Server dalam medan carian.

Pakej dengan nama yang sama dipaparkan, jadi pasangkannya.

Sahkan bahawa pakej telah ditambah.

Perubahan kepada Permulaan.cs

app.UseHttpsRedirection(); Masukkan kod berikut pada baris mengikut baris:

app.UseBlazorFrameworkFiles();

Menggunakan Blazor WebAssembly

Pada asasnya, anda boleh meletakkan folder wwwroot Blazor WebAssembly yang diterbitkan seperti dalam folder wwwroot ASP.NEt Core,index.html tetapi anda harus memadamnya kerana ia tidak lagi diperlukan. Juga, keranafavicon.ico digelar, tentukan ikon mana yang hendak digunakan.

Apabila melepaskan dengan PWA, jika anda telah mengecualikan fail (seperti indeks.html) dalam folder wwwroot, Anda perlu membuka dalam editor teks, juga dalam folder wwwroot, dan memadam rekod dalam service-worker-assets.js fail yang dikecualikan. Jika tidak, anda mungkin mendapat ralat dalaman apabila anda membuka skrin web.

Apabila anda menerbitkan aplikasi Blazor, anda tidak perlu melakukan ini secara manual dengan mengecualikan fail yang tidak perlu daripada projek anda.

Dalam kes PWA, kesilapan dalaman berlaku jika mereka tidak berada dalam persekitaran https. Ia tidak boleh dipasang sebagai PWA.

Pengesahan Pelaksanaan

ASP.NET Nyahpepijat menjalankan projek MVC Teras. Lawati halaman Blazor dan sahkan bahawa susun atur Perhimpunan Blazor muncul di halaman. Pilih menu kiri dan sahkan bahawa setiap ciri berfungsi.

Perihal URL

Jika anda klik pada menu kiri Perhimpunan Blazor yang dipaparkan dalam halaman, anda akan melihat bahawa URL berubah. Tingkah laku ini tidak mengikuti tingkah laku URL yang dijangkakan oleh ASP.NET Core MVC, jadi jika boleh, Perhimpunan Blazor sebaiknya membuat URL sedemikian rupa sehingga URL tidak berubah.

Apabila anda membuka halaman Blazor

Apabila anda klik menu Kaunter

Tukarlog

2022/7/12

Menambah mata untuk diperhatikan apabila mengecualikan fail yang tidak perlu dalam peletakan fail aplikasi Blazor yang diterbitkan.

2022/3/30

edisi pertama

Letakkan aplikasi yang dicipta dalam Blazor WebAssembly dalam IIS

Gunakan berbilang Blazor WebAssemblys dalam MVC Teras ASP.NET