使用 Blazor 專案與 Entity Freamework Core 讀取已經存在的 Contoso University 資料庫

在上一篇文章 使用 Console 專案與 Entity Freamework Core 讀取已經存在的 Contoso University 資料庫 中，說明如何透過 C# 程式碼來讀取 Entity Framework 資料庫內的資料表紀錄，在這篇文章中，將會建立一個 Blazor 專案，在此專案內的 Blazor 元件 Component 來存取資料庫到的資料。

這個說明專案的原始碼位於 bzEntityFrameworkCore

建立 .NET Core 之 Console 專案

• 打開 Visual Studio 2019
• 點選右下方的 [建立新的專案] 按鈕
• [建立新專案] 對話窗將會顯示在螢幕上
• 從[建立新專案] 對話窗的中間區域，找到 [Blazor 應用程式] 這個專案樣板選項，並且選擇這個項目
• 點選右下角的 [下一步] 按鈕
• 現在 [設定新的專案] 對話窗將會出現
• 請在這個對話窗內，輸入適當的 [專案名稱] 、 [位置] 、 [解決方案名稱]
  在這裡請輸入 [專案名稱] 為 bzEntityFrameworkCore
• 完成後，請點選 [建立] 按鈕
• 當出現 [建立新的 Blazor 應用程式] 對話窗的時候
• 請選擇最新版本的 .NET Core 與 [Blazor 伺服器應用程式]
• 完成後，請點選 [建立] 按鈕
• 稍微等會一段時間，專案將會建立起來

安裝需要用到的套件

• 滑鼠右擊專案 [相依性] > [管理 NuGet 套件]
• 搜尋 [Microsoft.EntityFrameworkCore.SqlServer] 套件，安裝到專案內
• 搜尋 [Microsoft.EntityFrameworkCore.Design] 套件，安裝到專案內
• 搜尋 [Microsoft.EntityFrameworkCore.Tools] 套件，安裝到專案內

  關於 Entity Framework Core 可以使用的指令，可以參考 Entity Framework Core 工具參考-Visual Studio 中的套件管理員主控台 或者 Entity Framework Core 工具參考-.NET CLI

建立資料庫模型

• 點選功能表 [工具] > [NuGet 套件管理員] > [套件管理器主控台]
• 在 [套件管理器主控台] 內輸入底下指令

Scaffold-DbContext "Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=ContosoUniversity;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

其中關於上述指定中雙引號內的內容，請打開 [SQL Server 物件總管] ，點選到 資料庫伺服器的節點，接著，查看 [屬性] 視窗內的 [連接字串]，將其屬性值複製起來，貼上到雙引號內

• 完成後，按下 [Enter] 按鍵，執行這個命令
  
• 此時便可以在 Visual Studio 檔案總館內，看到有 Models 資料夾產生，而在該資料夾內也產生了許多檔案出來
  

建立 資料庫連接字串

• 打開 專案根目錄下的 [appsettings.json] 檔案
• 在該檔案內加入 [ConnectionStrings] 屬性值的宣告，如同底下內容

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "ContosoUniversityContext": "Data Source=(localdb)\\MSSQLLocalDB;Initial Catalog=ContosoUniversity;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False"
  }
}

註冊要使用的 Entity Framework Core 的相關服務

• 打開 專案根目錄下的 [Startup.cs] 檔案
• 在 [ConfigureServices] 方法內，加入這行敘述 services.AddDbContext<ContosoUniversityContext>(options => options.UseSqlServer(Configuration.GetConnectionString("ContosoUniversityContext"))); ，完成後的 [ConfigureServices] 方法如下：

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
    services.AddDbContext<ContosoUniversityContext>(options =>
    options.UseSqlServer(Configuration.GetConnectionString("ContosoUniversityContext")));
}

開始使用 Entity Framework Core 來讀取資料庫

• 打開 [Pages] 資料夾內的 [index.razor] 檔案，輸入底下 HTML 標記與程式碼

@page "/"
@using bzEntityFrameworkCore.Models
@using Microsoft.EntityFrameworkCore
@inject ContosoUniversityContext Context

<h1>Hello, Entity Framework Core</h1>

<button class="btn btn-primary" @onclick="LoadData">讀取資料庫</button>
@foreach (var item in records)
{
    <div>@item</div>
}
@code{
    List<string> records = new List<string>();
    async void LoadData(MouseEventArgs e)
    {
       var allCourse = await Context.Course.ToListAsync();
        foreach (var item in allCourse)
        {
            records.Add(item.Title);
        }
    }
}

• 執行這個專案，將會看到底下的輸出內容，若有看到，就代表已經成功讀取資料庫紀錄了。