使用Blazor構建CRUD計畫

隨著Web技術的不斷發展，前端框架層出不窮，為開發者提供了更多的選擇。其中，Blazor作為一個使用C#代替JavaScript來建立互動式Web UI的框架，受到了許多.NET開發者的喜愛。本文將介紹如何使用Blazor構建一個基本的CRUD（建立、讀取、更新、刪除）計畫，以展示Blazor在Web開發中的強大功能。

一、計畫準備

在開始構建計畫之前，確保你已經安裝了以下工具：

1. .NET Core SDK：用於開發和執行Blazor應用程式。

2. Visual Studio或Visual Studio Code：作為開發工具，提供程式碼編輯、偵錯和構建功能。

二、建立Blazor計畫

使用命令列或開發工具建立一個新的Blazor Server應用程式。以命令列為例，執行以下命令：

dotnet new blazorserver -o BlazorCrudApp
cd BlazorCrudApp


這將建立一個名為 BlazorCrudApp 的新Blazor Server計畫。

三、構建CRUD功能

1. 模型定義

首先，定義一個用於數據操作的模型。例如，建立一個簡單的 Item 類來表示我們要進行CRUD操作的數據實體。

public classItem
{
publicint Id { get; set; }
publicstring Name { get; set; }
publicstring Description { get; set; }
}


2. 數據服務

接下來，建立一個數據服務來模擬數據的CRUD操作。在實際計畫中，你可能會使用資料庫來儲存數據，但在這裏我們使用記憶體列表來簡化範例。

public classItemService
{
privatestatic List<Item> items = new List<Item>();
public List<Item> GetAllItems()
{
return items;
}
publicvoidAddItem(Item item)
{
item.Id = items.Count + 1; // 簡化範例，使用列表長度作為ID
items.Add(item);
}
publicvoidUpdateItem(Item item)
{
var index = items.FindIndex(i => i.Id == item.Id);
if (index != -1)
{
items[index] = item;
}
}
publicvoidDeleteItem(int id)
{
items.RemoveAll(i => i.Id == id);
}
}




3. Blazor元件

在Blazor中，UI是透過元件構建的。我們將建立幾個元件來實作CRUD功能：

以 ItemList.razor 為例：

@page "/items"
@inject ItemService ItemService
<h1>Item List</h<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var item in ItemService.GetAllItems())
{
<tr>
<td>@item.Id</td>
<td>@item.Name</td>
<td>@item.Description</td>
<td>
<button @onclick="@(() => EditItem(item.Id))">Edit</button>
<button @onclick="@(() => DeleteItem(item.Id))">Delete</button>
</td>
</tr>
}
</tbody>
</table>
<button @onclick="AddNewItem">Add New Item</button>
@code {
private void AddNewItem()
{
// 導航到添加新計畫頁面或彈出添加表單等邏輯
}
private void EditItem(int id)
{
// 導航到編輯計畫頁面或彈出編輯表單等邏輯，並傳遞計畫ID
}
private void DeleteItem(int id)
{
ItemService.DeleteItem(id);
}
}





類似地，你可以建立 AddItem.razor 和 EditItem.razor 元件來完成添加和編輯功能的UI部份。這些元件將與 ItemService 互動，以執行實際的數據操作。

四、測試與執行

完成上述步驟後，你可以在本地執行計畫來測試CRUD功能。使用命令列或開發工具啟動計畫，並在瀏覽器中存取應用程式。你應該能夠看到計畫列表，以及添加、編輯和刪除計畫的功能。

五、總結

透過使用Blazor框架和C#語言，我們可以輕松地構建具有CRUD功能的Web應用程式。Blazor提供了豐富的元件和事件處理機制，使得開發者能夠高效地建立互動式Web UI。此外，由於Blazor使用C#作為開發語言，因此.NET開發者可以充分利用現有的知識和技能來快速開發Web應用程式。