Блазор

ASP.NET изпълни blazor уебсглобка с ядро MVC изглед

Страницата се актуализира :
Дата на създаване на страница :

околна среда

Визуално студио
  • Визуално студио 2019
.NET
  • .NET 5.0

Отначало

Тъй като Blazor WebAssembly е клиентска технология, няма значение как работи уеб сървърът. Въпреки това, за да обслужвате WebAssembly на клиенти, е необходима минимална конфигурация от страна на сървъра. Нека стартираме сървърната програма като ASP.NET Core MVC в Blazor WebAssembly.

Създаване на уеб събрание на blazor

Сега просто трябва да се уверим, че Blazor WebAssembly работи, така че ще го оставим както беше, когато създадохме проекта.

Името на проекта или името на решението е произволно.

Екранът "ASP.NET хостван на Core", показан в екрана с допълнителна информация, може да работи и като MVC, но полученият проект е близо до API сървъра, така че няма да го проверяваме тук.

Публикуване Блазор УебАсембло

Публикуване на файлове за разполагане на Blazor WebAssembly ASP.NET Core MVC проект.

Щракнете с десния бутон върху проекта и изберете Публикуване.

Изберете Папки.

Оставете местоназначението за публикуване по подразбиране.

Появява се екранът за публикуване. Можете да зададете различни настройки, но засега бутонът "Публикуване" е оставен като по подразбиране.

Изчакайте публикуването да започне и завърши успешно. Имайте предвид, че дългите пътища на папките може да са неуспешни.

Можете да проверите дали файлът е създаден в указаната папка. Ако е зададен като относителен път, местоназначението е спрямо проекта.

Създаване на проект за ASP.NET Core MVC

След това създайте проект за ASP.NET Core MVC. Отварянето на Visual Studio отделно може да бъде досадно, така че го създайте вътре в решението blazor WebAssembly. Тъй като двата проекта не са свързани този път, няма проблем дори и да са създадени отделно.

Името на проекта не е задължително. Другите настройки се оставят по подразбиране за тях.

Тъй като blazor страна предполага, че разработката е завършена ASP.NET проекта от страна на ядрото MVC е стартиране.

Създаване на изгледи за Събрание на блезорите

Тази област ще се промени в зависимост от проекта, който всъщност създавате, така че моля, модифицирайте го според този проект. Тук ще го модифицираме въз основа на конфигурацията на примерния проект.

По принцип тя трябва да бъде модифицирана, за да прилича на тази, създадена, когато публикувате Събранието blazor index.html .

Фиксиране _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. ASP.NET Нормално добавяне на страница и процедура в Core MVC са еднакви.

HomeController Добавете следните действия към . Сървърната страна не прави нищо по-специално, така че просто връща изгледа.

НачалоКонтролер.cs

// 省略

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

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

Щракнете с десния бутон върху действието, за да добавите изглед.

Няма с какво да се свързвате, така че го добавете както е.

Изгледът е създаден.

Използването на генерираните по време на публикуването на Събранието index.html на Блазор е посочено, ние ще го преправяме, както следва.

Блазор.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.

индекс.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.Сървър препратка

Startup.cs Не е нужно да пишете необходимия код сами, но за лекота получавате от Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.

Щракнете с десния бутон зависимости и изберете Управление на NuGet пакети.

Изберете раздела Администриране и въведете Microsoft.AspNetCore.Components.WebAssembly.Server в полето за търсене.

Показва се пакет със същото име, така че го инсталирайте.

Проверете дали пакетът е добавен.

Промени в стартиране.cs

app.UseHttpsRedirection(); Поставете следния код в реда, следващ реда:

app.UseBlazorFrameworkFiles();

Разполагане на уебсглобка "Блазор"

По принцип можете да поставите публикуваната папка Blazor WebAssembly wwwroot, както е в wwwroot папката на ASP.NEt Ядро, но трябва да я изтриете,index.html защото вече няма да е необходима. Също така, тъй като еfavicon.ico наричан, решете коя икона да използвате.

При освобождаване с PWA, ако сте изключили файлове (като индекс.html) в папката wwwroot, Ще трябва да отворите в текстов редактор, също в папката wwwroot и да изтриете записите в service-worker-assets.js изключения файл. В противен случай може да получите вътрешна грешка, когато отворите уеб екран.

Когато публикувате приложение blazor, не е необходимо да правите това ръчно, като изключите ненужните файлове от проекта си.

В случай на PWAs се появяват вътрешни грешки, ако не са в среда на HTTPS. Той не може да бъде инсталиран като PWA.

Потвърждение за изпълнение

ASP.NET Debug изпълни проекта Core MVC. Посетете страницата Блазор и проверете дали оформлението на Събранието на блазора се появява в страницата. Изберете лявото меню и проверете дали всяка функция работи.

Всичко за URL адресите

Ако кликнете върху лявото меню Blazor Assembly, показано в страницата, ще забележите, че URL адресът се променя. Това поведение не следва поведението на URL адреса, очаквано от ASP.NET Core MVC, така че ако е възможно, Събранието на Blazor трябва за предпочитане да създаде URL адреса по такъв начин, че URL адресът да не се променя.

Когато отворите blazor страница

Когато щракнете върху менюто Брояч

Changelog

2022/7/12
  • Добавени са точки за отбелязване при изключване на ненужни файлове в поставянето на файлове на публикуваното приложение Blazor.
2022/3/30
  • първо издание
Поставяне на приложения, създадени в Blazor WebAssembly в IIS
Разполагане на няколко blazor webAssemblys в ASP.NET Ядро MVC