在 ASP.NET Core Blazor 專案內，加上 Web API 服務

更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。

若想在開發中的 Blazor 專案內，啟用 ASP.NET Core Web API 的服務時候，可以參考這篇文章來調整

在這篇文章所提到的專案原始碼，可以從 GitHub 下載

建立一個空白的 Blazor 專案

想要進行這樣的專案開發練習，可以參考底下的操作步驟

• 打開 Visual Studio 2019 開發工具
• 當 [Visual Studio 2019] 對話窗出現之後，點選右下方的 [建立新的專案] 按鈕
• 在 [建立新專案] 對話窗內，請找出 [Blazor 應用程式] 這個專案開發範本，並且點選這個專案開發範本
• 請點選右下角 [下一步] 按鈕
• 出現 [設定新的專案] 對話窗，輸入適當的 [專案名稱] 、 [位置] ，完成後，請點選右下角 [建立] 按鈕

  在這個範例程式碼中，將會建立一個 BlazorWithWebAPI 專案名稱

• 此時將會看到 [建立新的 Blazor 應用程式] 對話窗，這裡可以根據當時開發專案的需要，自行決定是否有調整 Blazor 專案的其他特性，若無，請點選右下角的 [建立] 按鈕
• 此時，這個 Blazor 專案已經建立完成

修正 Startup.cs

請打開 Startup.cs 這個檔案

// 新增控制器和 API 相關功能的支援，但不會加入 views 或 pages
services.AddControllers();

找到 ConfigureServics 方法，加入 services.AddControllers();

接著找到 Conigure 方法

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/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.UseEndpoints(endpoints =>
    {
        // 新增屬性路由控制器的支援
        endpoints.MapControllers();
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}

找到 app.UseEndpoints 這個呼叫方法，在 endpoints 委派方法內的最前面，加入這行敘述 endpoints.MapControllers();

建立 API 控制器

• 請在專案上加入一個新的資料夾 [Controllers]
• 滑鼠右擊 [Controllers] 資料夾，選擇 [加入] > [類別]
• 在名稱欄位輸入 [DefaultController]
• 點選 [新增] 按鈕

使用底下程式碼，替換掉 DefaultController 類別定義

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorWithWebAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class DefaultController : ControllerBase
    {
        [HttpGet]
        public string Get()
        {
            return "Hello~~";
        }
    }
}

開始測試

執行這個專案，將會看到底下畫面

接著，請在網址列輸入這個 URL ，直接呼叫 Web API，就會看到底下結果