ASP.NET Jalankan Blazor WebAssembly dengan tampilan Core MVC

Halaman Diperbarui : Minggu, 17 Juli 2022

Tanggal pembuatan halaman : Rabu, 30 Maret 2022

lingkungan

Visual Studio

Visual Studio 2019

.NET (dalam bahasa Inggris)

.NET 5.0

Pada awalnya

Karena Blazor WebAssembly adalah teknologi klien, tidak masalah bagaimana server web bekerja. Namun, untuk melayani WebAssembly kepada klien, minimal, konfigurasi sisi server diperlukan. Mari kita jalankan program server sebagai ASP.NET Core MVC di Blazor WebAssembly.

Membuat Blazor WebAssembly

Sekarang kita hanya perlu memastikan bahwa Blazor WebAssembly berfungsi, jadi kita akan membiarkannya seperti ketika kita membuat proyek.

Nama proyek atau nama solusi sewenang-wenang.

Layar "ASP.NET yang dihosting di Core" yang ditampilkan di layar informasi tambahan juga dapat berfungsi sebagai MVC, tetapi proyek yang dihasilkan dekat dengan server API, jadi kami tidak akan memeriksanya di sini.

Menerbitkan Blazor WebAssembly

Publikasikan file untuk menyebarkan Blazor WebAssembly ke proyek ASP.NET Core MVC.

Klik kanan proyek dan pilih Terbitkan.

Pilih Folder.

Tinggalkan tujuan penerbitan default.

Layar publikasikan muncul. Anda dapat mengatur berbagai pengaturan, tetapi untuk saat ini, tombol "Terbitkan" dibiarkan sebagai default.

Tunggu hingga penerbitan dimulai dan diselesaikan dengan sukses. Perhatikan bahwa jalur folder yang panjang mungkin gagal.

Anda dapat memverifikasi bahwa file telah dibuat di folder yang ditentukan. Jika ditentukan sebagai jalur relatif, tujuan relatif terhadap proyek.

Membuat proyek ASP.NET Core MVC

Selanjutnya, buat proyek ASP.NET Core MVC. Membuka Visual Studio secara terpisah bisa membosankan, jadi buatlah di dalam solusi Blazor WebAssembly. Karena kedua proyek tidak terhubung kali ini, tidak ada masalah bahkan jika mereka dibuat secara terpisah.

Nama proyek bersifat opsional. Pengaturan lainnya dibiarkan pada defaultnya.

Karena pihak Blazor mengasumsikan bahwa pengembangan selesai ASP.NET proyek di sisi MVC inti adalah startup.

Membuat Tampilan untuk Perakitan Blazor

Area ini akan berubah tergantung pada proyek yang sebenarnya Anda buat, jadi harap ubah sesuai dengan proyek itu. Di sini, kami akan memodifikasinya berdasarkan konfigurasi proyek sampel.

Pada dasarnya, itu harus dimodifikasi agar menyerupai yang dibuat ketika Anda menerbitkan index.html Majelis Api.

Memperbaiki _Layout.cshtml

Saya ingin mereferensikan CSS dari Majelis Blazor, sehingga saya dapat menulisnya langsung ke . _Layout.cshtml Kami ingin itu diterapkan hanya ke halaman target sebanyak mungkin, sehingga kami dapat memperluasnya dengan menambahkan sehingga RenderSectionAsync tautan ke CSS dapat ditulis di 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>
  <!-- 以下同じなので省略 -->

Menambahkan halaman untuk Majelis Api

Tambahkan halaman khusus untuk menampilkan Majelis Api. ASP.NET Penambahan dan prosedur halaman normal di Core MVC adalah sama.

HomeController Tambahkan tindakan berikut ke . Sisi server tidak melakukan apa pun secara khusus, jadi itu hanya mengembalikan tampilan.

RumahController.cs

// 省略

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

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

Klik kanan tindakan untuk menambahkan tampilan.

Tidak ada yang perlu diikat, jadi tambahkan apa adanya.

Tampilan dibuat.

Menggunakan yang dihasilkan pada saat publikasi Majelis Blazor dirujuk index.html , kami akan membuatnya kembali sebagai 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>
}

Tambahkan tautan sehingga Anda dapat menavigasi ke halaman di 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>

Tambahkan referensi Microsoft.AspNetCore.Components.WebAssembly.Server

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

Klik kanan Dependensi dan pilih Kelola Paket NuGet.

Pilih tab Administrasi dan masukkan Microsoft.AspNetCore.Components.WebAssembly.Server di bidang pencarian.

Paket dengan nama yang sama ditampilkan, jadi instal.

Verifikasi bahwa paket telah ditambahkan.

Perubahan pada Startup.cs

app.UseHttpsRedirection(); Sisipkan kode berikut pada baris mengikuti baris:

app.UseBlazorFrameworkFiles();

Menyebarkan Blazor WebAssembly

Pada dasarnya, Anda dapat meletakkan folder wwwroot Blazor WebAssembly yang diterbitkan seperti di folder wwwroot ASP.NEt Core,index.html tetapi Anda harus menghapusnya karena tidak lagi diperlukan. Juga, karenafavicon.ico dijuluki, putuskan ikon mana yang akan digunakan.

Saat merilis dengan PWA, jika Anda telah mengecualikan file (seperti index.html) di folder wwwroot, Anda harus membuka di editor teks, juga di folder wwwroot, dan menghapus catatan dalam service-worker-assets.js file yang dikecualikan. Jika tidak, Anda mungkin mendapatkan kesalahan internal saat membuka layar web.

Saat memublikasikan aplikasi Blazor, Anda tidak perlu melakukan ini secara manual dengan mengecualikan file yang tidak perlu dari proyek Anda.

Dalam kasus PWA, kesalahan internal terjadi jika tidak berada di lingkungan https. Itu tidak dapat diinstal sebagai PWA.

Konfirmasi Eksekusi

ASP.NET Debug jalankan proyek Core MVC. Kunjungi halaman Blazor dan verifikasi bahwa tata letak Majelis Api muncul di halaman. Pilih menu sebelah kiri dan verifikasi bahwa setiap fitur berfungsi.

Tentang URL

Jika Anda mengklik menu kiri Blazor Assembly yang ditampilkan di halaman, Anda akan melihat bahwa URL berubah. Perilaku ini tidak mengikuti perilaku URL yang diharapkan oleh ASP.NET Core MVC, jadi jika memungkinkan, Blazor Assembly sebaiknya membuat URL sedemikian rupa sehingga URL tidak berubah.

Saat Anda membuka halaman Blazor

Ketika Anda mengklik menu Penghitung

Changelog

2022/7/12

Menambahkan poin yang perlu diperhatikan saat mengecualikan file yang tidak perlu dalam penempatan file aplikasi Blazor yang dipublikasikan.

2022/3/30

edisi pertama

Tempatkan aplikasi yang dibuat di Blazor WebAssembly di IIS

Menyebarkan beberapa Blazor WebAssemblys di ASP.NET Core MVC