ASP.NET Blazor WebAssembly'yi Core MVC görünümüyle çalıştırma

Sayfa güncel : 17 Temmuz 2022 Pazar

Sayfa oluşturma tarihi : 30 Mart 2022 Çarşamba

çevre

Görsel Stüdyo

Visual Studio 2019 (İngilizce)

.NET (İngilizce)

.NET 5.0

İlk başta

Blazor WebAssembly bir istemci teknolojisi olduğundan, web sunucusunun nasıl çalıştığı önemli değildir. Ancak, WebAssembly'yi istemcilere sunmak için, en azından sunucu tarafı yapılandırması gereklidir. Sunucu programını Blazor WebAssembly'de ASP.NET Core MVC olarak çalıştıralım.

Blazor WebAssembly Oluşturma

Şimdi sadece Blazor WebAssembly'nin çalıştığından emin olmamız gerekiyor, bu yüzden projeyi yarattığımız zamanki gibi bırakacağız.

Proje adı veya çözüm adı rasgeledir.

Ek bilgi ekranında görüntülenen "Core'da barındırılan ASP.NET" ekranı MVC olarak da çalışabilir, ancak ortaya çıkan proje API sunucusuna yakındır, bu yüzden burada kontrol etmeyeceğiz.

Blazor WebAssembly'yi Yayımlama

Blazor WebAssembly'yi ASP.NET Core MVC projesine dağıtmak için dosyaları yayımlayın.

Projeye sağ tıklayın ve Yayımla'yı seçin.

Klasörler'i seçin.

Varsayılan yayınlama hedefini olduğu gibi bırakın.

Yayınla ekranı görüntülenir. Çeşitli ayarları yapabilirsiniz, ancak şimdilik "Yayınla" düğmesi varsayılan olarak bırakılmıştır.

Yayımlamanın başlamasını ve başarıyla tamamlanmasını bekleyin. Uzun klasör yollarının başarısız olabileceğini unutmayın.

Dosyanın belirtilen klasörde oluşturulduğunu doğrulayabilirsiniz. Göreli bir yol olarak belirtilirse, hedef projeye görelidir.

ASP.NET Core MVC projesi oluşturma

Ardından, bir ASP.NET Core MVC projesi oluşturun. Visual Studio'yu ayrı ayrı açmak sıkıcı olabilir, bu nedenle Blazor WebAssembly çözümünün içinde oluşturun. İki proje bu sefer birbirine bağlı olmadığı için ayrı ayrı oluşturulsalar bile sorun yaşanmıyor.

Proje adı isteğe bağlıdır. Diğer ayarlar varsayılan değerlerinde bırakılır.

Blazor tarafı geliştirmenin tamamlandığını varsaydığından ASP.NET çekirdek MVC tarafındaki proje bir başlangıçtır.

Blazor Assembly için Görünümler Oluşturma

Bu alan, gerçekten oluşturduğunuz projeye bağlı olarak değişecektir, bu nedenle lütfen o projeye göre değiştirin. Burada, örnek projenin yapılandırmasına göre değiştireceğiz.

Temel olarak, Blazor Meclisi'ni yayınladığınızda oluşturulana benzeyecek şekilde index.html değiştirilmelidir.

_Layout.cshtml Düzeltme

Blazor Meclisi'nin CSS'sine atıfta bulunmak istiyorum, böylece doğrudan yazabilirim. _Layout.cshtml Mümkün olduğunca yalnızca hedef sayfaya uygulanmasını istiyoruz, böylece CSS'ye bağlantılar her sayfaya yazılabilecek şekilde RenderSectionAsync ekleyerek genişletebiliriz.

<!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 Meclisi için bir sayfa ekleme

Blazor Meclisi'ni görüntülemek için ayrılmış bir sayfa ekleyin. ASP.NET Core MVC'deki normal sayfa ekleme ve prosedür aynıdır.

HomeController Aşağıdaki eylemleri . Sunucu tarafı özellikle hiçbir şey yapmaz, bu yüzden sadece görünümü döndürür.

Ev Kumandası.cs

// 省略

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

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

Görünüm eklemek için eylemi sağ tıklatın.

Bağlanacak bir şey yok, bu yüzden olduğu gibi ekleyin.

Görünüm oluşturulur.

Blazor Meclisi'nin yayınlandığı sırada üretilenleri index.html kullanarak, onu aşağıdaki gibi yeniden yapacağız.

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'daki sayfaya gidebilmek için bir bağlantı ekleyin.

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 başvurusu ekleme

Startup.cs Gerekli kodu kendiniz yazmanız gerekmez, ancak kolaylık için NuGet'ten Microsoft.AspNetCore.Components.WebAssembly.Server alırsınız.

Bağımlılıklar'a sağ tıklayın ve NuGet Paketlerini Yönet'i seçin.

Yönetim sekmesini seçin ve arama alanına Microsoft.AspNetCore.Components.WebAssembly.Server yazın.

Aynı ada sahip bir paket görüntülenir, bu yüzden yükleyin.

Paketin eklendiğini doğrulayın.

Başlangıçtaki Değişiklikler.cs

app.UseHttpsRedirection(); Satırı takip eden satıra aşağıdaki kodu ekleyin:

app.UseBlazorFrameworkFiles();

Blazor WebAssembly'yi Dağıtma

Temel olarak, yayınlanan Blazor WebAssembly wwwroot klasörünü ASP.NEt Core'un wwwroot klasöründe olduğu gibi koyabilirsiniz,index.html ancak artık gerekli olmayacağı için silmelisiniz. Ayrıca, dublajlı olduğundanfavicon.ico , hangi simgenin kullanılacağına karar verin.

PWA ile serbest bırakırken, wwwroot klasöründeki dosyaları (dizin.html gibi) dışladıysanız, Bir metin düzenleyicisinde, ayrıca wwwroot klasöründe açmanız ve hariç tutulan dosyadaki service-worker-assets.js kayıtları silmeniz gerekir. Aksi takdirde, bir web ekranını açtığınızda dahili bir hata alabilirsiniz.

Bir Blazor uygulaması yayımladığınızda, gereksiz dosyaları projenizden hariç tutarak bunu el ile yapmanız gerekmez.

PWA'lar söz konusu olduğunda, dahili hatalar bir https ortamında değilse oluşur. PWA olarak yüklenemez.

Yürütme Onayı

ASP.NET Hata Ayıklama çekirdek MVC projesini çalıştırın. Blazor sayfasını ziyaret edin ve Blazor Meclisi'nin düzeninin sayfada göründüğünü doğrulayın. Soldaki menüyü seçin ve her özelliğin çalıştığını doğrulayın.

URL'ler hakkında

Sayfada görüntülenen Blazor Assembly sol menüsüne tıklarsanız, URL'nin değiştiğini fark edeceksiniz. Bu davranış, ASP.NET Core MVC tarafından beklenen URL davranışını izlemez, bu nedenle mümkünse, Blazor Derlemesi tercihen URL'yi URL'nin değişmeyeceği şekilde oluşturmalıdır.

Blazor sayfasını açtığınızda

Sayaç menüsünü tıklattığınızda

Değişim günlüğü

2022/7/12

Yayınlanan Blazor uygulamasının dosya yerleşiminde gereksiz dosyaları hariç tutarken dikkat edilmesi gereken noktalar eklendi.

2022/3/30

ilk baskı

Blazor WebAssembly'de oluşturulan uygulamaları IIS'ye yerleştirme

ASP.NET Core MVC'de birden fazla Blazor WebAssemblys dağıtma