在 ASP.NET MVC 專案內使用 Blazor 元件
在這篇文章所提到的專案原始碼，可以從 GitHub 下載
建立一個空白的 ASP.NET Core MVC 專案
想要進行這樣的專案開發練習，可以參考底下的操作步驟
- 打開 Visual Studio 2019 開發工具
- 當 [Visual Studio 2019] 對話窗出現之後，點選右下方的 [建立新的專案] 按鈕
- 在 [建立新專案] 對話窗內，請找出 [ASP.NET Core Web 應用程式] 這個專案開發範本，並且點選這個專案開發範本
- 請點選右下角 [下一步] 按鈕
- 出現 [設定新的專案] 對話窗，輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]，完成後，請點選右下角 [建立] 按鈕在這個範例程式碼中，將會建立一個 AspNETMVCwithBlazor 專案名稱
- 此時將會看到 [建立新的 ASP.NET Core Web 應用程式] 對話窗，請在清單中選擇 [Web 應用程式 (模型-檢視-控制器)] 這個專案範本，在此將要建立一個空白的 ASP.NET Core 的專案，若無，請點選右下角的 [建立] 按鈕
- 此時，這個 ASP.NET Core MVC 專案已經建立完成
修正 Startup.cs
請打開 Startup.cs 這個檔案
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
// 加入底下這行，宣告要使用 伺服器端的 Blazor 功能
services.AddServerSideBlazor();
}
找到 ConfigureServics 方法，在
services.AddControllersWithViews(); 敘述之後加入 services.AddServerSideBlazor();
接著找到 Conigure 方法
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
// 加入底下這行，啟用 Blazor 路由
endpoints.MapBlazorHub();
});
}
找到 app.UseEndpoints 這個呼叫方法，在 endpoints 委派方法內的最後一行，加入這行敘述
endpoints.MapBlazorHub();修改 _Layout.cshtml
在 [Views] > [Share] 資料夾下，找到 _Layout.cshtml 檔案
@*這裡將會啟用 Blazor SingleR 所需的 JavaScript*@
<script src="_framework/blazor.server.js"></script>
在該檔案的
</body> 前面，找到 @RenderSection("Scripts", required: false) 敘述，在這行敘述前加入上面的程式碼。
找到
<head> 標籤@*指定的應用程式基底路徑的 <base> 標記*@
<base href="/">
在 head 標籤內加入上述的 base 宣告
建立 Blazor 專案
- 滑鼠右擊方案節點，點選 [加入] > [新增專案]
- 當 [新增專案] 對話窗出現之後，點選右下方的 [建立新的專案] 按鈕
- 在 [新增專案] 對話窗內，請找出 [Blazor 應用程式] 這個專案開發範本，並且點選這個專案開發範本
- 請點選右下角 [下一步] 按鈕
- 出現 [設定新的專案] 對話窗，輸入適當的 [專案名稱] 、 [位置] ，完成後，請點選右下角 [建立] 按鈕在這個範例程式碼中，將會建立一個 MyBlazor 專案名稱
- 此時將會看到 [建立新的 Blazor 應用程式] 對話窗，這裡可以根據當時開發專案的需要，自行決定是否有調整 Blazor 專案的其他特性，若無，請點選右下角的 [建立] 按鈕
- 此時，這個 Blazor 專案已經建立完成
讓 MVC 專案參考 Blazor 專案
- 滑鼠右擊 MVC 專案內的 [相依性] 節點，選擇 [加入參考]
- 在 [參考管理員] 對話窗內，勾選剛剛建立的 Blazor 專案，也就是 [MyBlazor]
- 點選 [確定] 按鈕
在 MVC View 內，使用 Blazor Component 元件
在 [Views] > [Home] 資料夾內，打開 [Index.cshtml] 檔案
@using MyBlazor.Pages
@using System.Threading.Tasks
@using System.Threading
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
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 id="MyComponent">
<component type="typeof(Counter)" render-mode="ServerPrerendered" />
</div>
</div>
使用上面的 Razor 頁面標記宣告，替換掉原先的標記宣告
執行 ASP.NET Core MVC 專案
請開始執行 MVC 專案，瀏覽器上就會顯示 Index 這個首頁頁面，如下圖
在網頁的最下方，會看到一個按鈕 [Click me]，這個就是 Blazor Component
請點選這個按鈕，就會看到具有互動效果的網頁設計
在 ASP.NET Core 3.0 開發框架下，是可以讓 MVC 類型的專案，直接使用 Blazor 內的元件 Component。