بلازور

ASP.NET اجرای Blazor WebAssembly با نمایش MVC هسته

صفحه به روز شده :
تاریخ ایجاد صفحه :

محیط

ویژوال استودیو
  • ویژوال استودیو ۲۰۱۹
.NET
  • .NET 5.0

در ابتدا

از آنجا که Blazor WebAssembly فن آوری مشتری است ، مهم نیست که چگونه وب سرور کار می کند. با این حال ، به منظور خدمت WebAssembly به مشتریان ، در حداقل ، سرور سمت پیکربندی مورد نیاز است. بیایید اجرای برنامه سرور به عنوان ASP.NET MVC در Blazor WebAssembly.

ایجاد یک Blazor WebAssembly

حالا ما فقط باید مطمئن شویم که Blazor WebAssembly کار می کند، بنابراین ما آن را به عنوان آن را ترک زمانی که ما ایجاد پروژه بود.

نام پروژه یا نام راه حل خودسرانه است.

"ASP.NET میزبانی شده بر روی هسته" صفحه نمایش داده شده در صفحه نمایش اطلاعات اضافی نیز می تواند به عنوان MVC کار می کنند، اما پروژه حاصل نزدیک به سرور API است، بنابراین ما آن را در اینجا بررسی نمی کند.

انتشار Blazor WebAssembly

انتشار فایل ها برای استقرار Blazor WebAssembly به ASP.NET هسته MVC پروژه.

روی پروژه کلیک راست کنید و Publish را انتخاب کنید.

پوشه ها را انتخاب کنید.

مقصد انتشار پیش فرض را ترک کنید.

صفحه انتشار ظاهر می شود. شما می توانید تنظیمات مختلفی را تنظیم کنید، اما در حال حاضر، دکمه "Publish" به عنوان پیش فرض باقی مانده است.

منتظر باشید تا انتشار با موفقیت آغاز و کامل شود. توجه داشته باشید که مسیرهای طولانی پوشه ممکن است شکست بخورد.

می توانید تأیید کنید که پرونده در پوشه مشخص شده ایجاد شده است. اگر به عنوان یک مسیر نسبی مشخص شود مقصد نسبت به پروژه است.

ایجاد یک ASP.NET هسته MVC

بعد, ایجاد یک ASP.NET هسته MVC پروژه. باز کردن ویژوال استودیو به طور جداگانه می تواند خسته کننده باشد، بنابراین آن را در داخل راه حل Blazor WebAssembly ایجاد کنید. از آنجا که این دو پروژه این بار به هم مرتبط نیستند، حتی اگر به صورت جداگانه ایجاد شوند، مشکلی وجود ندارد.

نام پروژه اختیاری است. تنظیمات دیگر در پیش فرض های خود باقی مانده اند.

از آنجا که سمت Blazor فرض می کند که توسعه ASP.NET پروژه در سمت هسته MVC راه اندازی است.

ایجاد دیدگاه برای مجمع بلازور

این منطقه بسته به پروژه شما در واقع ایجاد تغییر خواهد کرد، بنابراین لطفا آن را با توجه به آن پروژه تغییر دهید. در اینجا، ما آن را بر اساس پیکربندی پروژه نمونه تغییر دهید.

اساسا ً باید اصلاح شود تا شبیه 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>
  <!-- 以下同じなので省略 -->

اضافه کردن یک صفحه برای مجمع بلازور

یک صفحه اختصاصی برای نمایش مجمع بلازور اضافه کنید. ASP.NET اضافه کردن صفحه عادی و روش در هسته MVC یکسان است.

HomeController اعمال زیر را به اضافه کنید. سمت سرور هیچ کاری به طور خاص انجام نمی دهد، بنابراین فقط منظره را برمیگرداند.

HomeController.cs

// 省略

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

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

برای افزودن یک نمایش روی عمل کلیک راست کنید.

چیزی برای اتصال وجود دارد، بنابراین آن را به عنوان اضافه کنید.

منظره ایجاد می شود.

با استفاده از تولید شده در زمان انتشار index.html مجمع بلازور ارجاع داده می شود، ما آن را به صورت زیر بازسازی خواهیم کرد.

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 حرکت.

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 مرجع

Startup.cs لازم نیست خودتان کد لازم را بنویسید، اما برای سهولت از NuGet دریافت Microsoft.AspNetCore.Components.WebAssembly.Server می کنید.

وابستگی ها را کلیک راست کنید و مدیریت بسته های NuGet را انتخاب کنید.

زبانه Administration را انتخاب کرده و Microsoft.AspNetCore.Components.WebAssembly.Server را در زمینه جستجو وارد کنید.

بسته ای با همین نام نمایش داده می شود، پس آن را نصب کنید.

بررسی کنید که بسته اضافه شده است.

تغییرات در راه اندازی.cs

app.UseHttpsRedirection(); کد زیر را روی خط زیر خط قرار دهید:

app.UseBlazorFrameworkFiles();

استقرار Blazor WebAssembly

اساسا، شما می توانید منتشر شده Blazor WebAssembly wwwroot پوشه آن را به عنوان آن را در پوشه wwwroot از هسته ASP.NEtindex.html قرار داده است، اما شما باید آن را حذف کنید چرا که دیگر مورد نیاز نخواهد بود. همچنین، از آنجا که دوبلهfavicon.ico شده است، تصمیم بگیرید که از کدام آیکون استفاده کنید.

در هنگام انتشار با PWA، اگر پرونده ها (مانند شاخص.html) را در پوشه wwwroot کنار گذاشته اید، شما نیاز به باز کردن در ویرایشگر متن، همچنین در پوشه wwwroot، و حذف سوابق در service-worker-assets.js فایل حذف شده است. در غیر این صورت، ممکن است زمانی که یک صفحه وب را باز می کنید، خطای داخلی دریافت کنید.

هنگامی که یک برنامه Blazor را منتشر می کنید، لازم نیست این کار را به صورت دستی با کنار گذاشتن فایل های غیرضروری از پروژه خود انجام دهید.

در مورد PWAs، خطاهای داخلی در صورتی رخ می دهند که در یک محیط https ن باشند. نمی توان آن را به عنوان PWA نصب کرد.

تایید اعدام

ASP.NET Debug پروژه Core MVC را اجرا می کند. به صفحه بلازور مراجعه کنید و بررسی کنید که چیدمان مجمع بلازور در صفحه ظاهر می شود. منوی سمت چپ را انتخاب کنید و تأیید کنید که هر ویژگی کار می کند.

درباره URLs

اگر روی منوی سمت چپ Blazor Assembly که در صفحه نمایش داده می شود کلیک کنید، متوجه می شوید که URL تغییر می کند. این رفتار رفتار URL مورد انتظار ASP.NET Core MVC را دنبال نمی کند، بنابراین در صورت امکان، مجمع بلازور ترجیحاً باید URL را به گونه ای ایجاد کند که URL تغییری ایجاد کند.

وقتی یک صفحه بلازور را باز می کنید

هنگامی که روی منوی شمارنده کلیک می کنید

تغییرات

2022/7/12
  • نقاط اضافه شده به توجه داشته باشید هنگامی که به استثنای فایل های غیر ضروری در قرار دادن فایل از برنامه Blazor منتشر شده است.
2022/3/30
  • چاپ اول
مکان برنامه های ایجاد شده در Blazor WebAssembly در IIS
استقرار چند Blazor WebAssemblys در ASP.NET هسته MVC