從空白專案來建立 ASP.NET Core Blazor 應用程式 - 了解 Blazor 運作方式
在這篇文章所提到的專案原始碼，可以從 GitHub 下載
建立一個空白的 ASP.NET Core 空白專案
想要進行這樣的專案開發練習，可以參考底下的操作步驟
- 打開 Visual Studio 2019 開發工具
- 當 [Visual Studio 2019] 對話窗出現之後，點選右下方的 [建立新的專案] 按鈕
- 在 [建立新專案] 對話窗內，請找出 [ASP.NET Core Web 應用程式] 這個專案開發範本，並且點選這個專案開發範本
- 請點選右下角 [下一步] 按鈕
- 出現 [設定新的專案] 對話窗，輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]，完成後，請點選右下角 [建立] 按鈕在這個範例程式碼中，將會建立一個 BlazorFromeEmpty 專案名稱
- 此時將會看到 [建立新的 ASP.NET Core Web 應用程式] 對話窗，請在清單中選擇 [空白] 這個專案範本，在此將要建立一個空白的 ASP.NET Core 的專案，若無，請點選右下角的 [建立] 按鈕
- 此時，這個 空白 ASP.NET Core 專案已經建立完成
此時，這個專案的結構如下圖所示
這個專案內很簡單的僅有 Program.cs 與 Startup.cs 這兩個檔案
Programs.cs 的檔案內容如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
namespace BlazorFromeEmpty
{
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<Startup>();
});
}
}
對於
Program 這個類別，將會與所有其他 ASP.NET Core 專案相同，例如：MVC, Web API, Razor Page
Startup.cs 的檔案內容如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace BlazorFromeEmpty
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapGet("/", async context =>
{
await context.Response.WriteAsync("Hello World!");
});
});
}
}
}
在這個
Startup 類別內，可以看到在 ConfigureServices 方法內，沒有設計任何程式碼
現在，可以執行這個專案，看看會出現甚麼內容？
如同在
Configure 方法內的 app.UseEndpoints 敘述所定義的，這裡網站專案，僅能夠顯示 Hello World! 這樣的文字在瀏覽器上。開始重構，變成一個 Blazor 專案
對於
Program.cs 這個檔案，並不需要做任何的修正，而對於 Startup.cs 這個檔案，則需要加入一些程式碼public void ConfigureServices(IServiceCollection services)
{
#region 在這裡要宣告所要使用的服務
services.AddRazorPages();
services.AddServerSideBlazor();
// 設著將這行註解起來，並且執行，看看會發生甚麼問題？
services.Configure<RazorPagesOptions>(options => options.RootDirectory = "/");
#endregion
}
在
ConfigureServices 方法內，將會在這個 ASP.NET Core 專案內啟用 Blazor 會使用到的服務public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
#region 請加入這兩行敘述
app.UseHttpsRedirection();
app.UseStaticFiles();
#endregion
app.UseRouting();
app.UseEndpoints(endpoints =>
{
#region 將原先空白專案中的敘述，註解起來
//endpoints.MapGet("/", async context =>
//{
// await context.Response.WriteAsync("Hello World!");
//});
#endregion
#region 請在這裡加入 Blazor 會用到的路由設定功能
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
#endregion
});
}
在這裡要修改、調整、新增的程式碼，都特別有使用 #region ... #endregion 標示出來
加入 Blazor 會用到的檔案
現在要開始建立 Blazor 會用到的最少檔案，這裡僅需要三個檔案，就可以建立一個使用 HTML / C# 且具有互動效果的網頁，更美妙的是，整個過程，完全不需要呼叫呼叫 JavaScript。
首先，要建立兩個 Blazor 必備用到的檔案 _Host.cshtml App.razor
請先建立 _Host.cshtml
- 滑鼠右擊 專案 節點，選擇 [加入] > [新增項目] 功能項目
- 當 [新增項目] 對話窗顯示之後，請找到並且選擇 [Razor 頁面] 這個項目名稱
- 在左下方的名稱欄位中，輸入該 Razor 頁面 的名稱 :
_Host.cshtml - 最後，點選右下角的 [新增] 按鈕
請使用底下的 Razor 頁面的標記與程式碼寫入到這個檔案內
@page "/"
@namespace BlazorFromeEmpty
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor 從無到有</title>
<base href="~/" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
接著要建立 App.razor
- 滑鼠右擊 專案 節點，選擇 [加入] > [新增項目] 功能項目
- 當 [新增項目] 對話窗顯示之後，請找到並且選擇 [Razor 元件] 這個項目名稱
- 在左下方的名稱欄位中，輸入該 Razor 元件 的名稱 :
App.razor - 最後，點選右下角的 [新增] 按鈕
請使用底下的 Razor 元件的標記與程式碼寫入到這個檔案內
@using Microsoft.AspNetCore.Components.Routing
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" />
</Found>
<NotFound>
<p>Sorry, there's nothing at this address.</p>
</NotFound>
</Router>
最後要來建立第一個 Blazor 元件，也就是首頁頁面 Index.razor
- 滑鼠右擊 專案 節點，選擇 [加入] > [新增項目] 功能項目
- 當 [新增項目] 對話窗顯示之後，請找到並且選擇 [Razor 元件] 這個項目名稱
- 在左下方的名稱欄位中，輸入該 Razor 元件 的名稱 :
Index.razor - 最後，點選右下角的 [新增] 按鈕
請使用底下的 Razor 元件的標記與程式碼寫入到這個檔案內
@page "/"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
<h1>從空白 ASP.NET Core 來建立 Blazor 應用程式</h1>
<input @bind-value="Message" @bind-value:event="oninput" />
<p>@Message</p>
<button @onclick="clicked">OK</button>
@code{
string Message { get; set; } = "Hi 你好";
void clicked()
{
Message = "Click Button";
}
}
執行看結果
請執行這個專案
這裡將會看到如上圖的畫面，其中該網頁上會有一個文字輸入盒、一個標籤文字、一個按鈕
現在，請在文字輸入盒輸入任何文字，此時，將會看到底下的標籤文字將會出現剛剛顯示的文字內容，這就是使用到 Blazor 內的絕佳特色功能，雙向資料綁定
最後，請按下按鈕，此時，將會觸發該按鈕所綁定的 C# 委派事件方法，並且會重新設定文字輸入盒與標籤文字內容，如上圖所示。
好了，這裡就是 Blazor 應用程式所需要的最簡單的專案內容
更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。
想要了解 Blazor 專案是如何運作的，最佳的方式，就是從無到有，做出一個最為精簡的 Blazor 應用程式，在這篇文章中，將會說明如何進行這樣的設計工作，並且在不使用 JavaScript 程式語言的狀況下，便可以僅使用 HTML / C# 來設計出一個具有互動運作的網頁。