目錄
介紹
背景
先決條件
使用代碼
第1步——建立資料庫和表
第2步——建立ASP.NET Core Blazor應用程式
ASP.NET Core Blazor解決方案的新增功能是什麼？
用戶端項目
服務端項目
共享項目
運作以測試應用程式
使用實體架構
安裝包
為CRUD操作建立Web API
使用用戶端項目
添加Razor視圖
導入部分
HTML設計和資料綁定部分
Function部分
導航菜單
建構并運作應用程式
- 下載下傳源代碼 - 1.7 MB
介紹
在本文中，我們将了解如何使用Entity Framework和Web API為ASP.NET Core Blazor建立一個簡單的CRUD應用程式。Blazor是Microsoft推出的新架構。我喜歡使用Blazor，因為這使我們的SPA全棧應用程式開發更簡單，是的，現在我們隻能使用一種語言如C＃。在Blazor之前，我們一直在使用ASP.NET Core和Angular或ReactJs的組合，現在在Blazor支援的幫助下，我們可以直接用C＃Code建立我們自己的SPA應用程式。如果你使用Blazor開始你的SPA應用程式開發，肯定你會喜歡它，與Blazor一起工作更加簡單有趣。我們現在唯一的缺點就是Blazor是新引入的架構，它仍處于試驗階段，一旦我們得到完整版本，使用應用程式開發會更有趣。
在本文中，我們将了解如何使用ASP.NET Core Blazor建立CRUD Web應用程式。
- C :( Create）：使用ASP.NET Core，Blazor，EF和Web API将新的學生詳細資訊插入到資料庫中。
- R :( Read）：使用ASP.NET Core，Blazor，EF和Web API從資料庫中選擇學生詳細資訊。
- U :( Update）：使用ASP.NET Core，Blazor，EF和Web API将學生詳細資訊更新到資料庫
- D :( Delete）：使用ASP.NET Core，Blazor，EF和Web API從資料庫中删除學生詳細資訊。
我們将使用Web API和EF來執行我們的CRUD操作。網絡API有以下四種方法為Get/ Post/ Put和Delete，其中：
- Get是請求資料（Select）
- Post是建立資料（Insert）
- Put是更新資料（Update）
- Delete是删除資料（Delete）
背景
先決條件
確定在您的計算機中已安裝了所有先決條件。如果沒有，則逐個下載下傳并安裝所有内容。請注意，由于Blazor是新架構，我們必須安裝Visual Studio 2017（15.7）或更高版本的預覽。
- 安裝.NET Core 2.1 Preview 2 SDK。（您可以從此連結中找到所有版本）
- 安裝Visual Studio 2017（15.7）的最新預覽。
- 為Blazor Extensions 安裝ASP.NET Core Blazor語言服務。
使用代碼
第1步——建立資料庫和表
我們将為我們的WEB API和EF使用SQL Server資料庫。首先，我們建立一個名為StudentsDB的資料庫和一個名為StudentMaster 的表 。這是在我們的表中建立資料庫表和示例記錄insert查詢的SQL腳本。在本地SQL Server中運作下面給出的查詢，以建立要在我們的項目中使用的資料庫和表。
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'StudentsDB' )
DROP DATABASE StudentsDB
GO
CREATE DATABASE StudentsDB
GO
USE StudentsDB
GO
-- 1) StudentMasters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'StudentMasters' )
DROP TABLE StudentMasters
GO
CREATE TABLE [dbo].[StudentMasters](
[StdID] INT IDENTITY PRIMARY KEY,
[StdName] [varchar](100) NOT NULL,
[Email] [varchar](100) NOT NULL,
[Phone] [varchar](20) NOT NULL,
[Address] [varchar](200) NOT NULL
)
-- insert sample data to Student Master table
INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address])
VALUES ('Shanu','[email protected]','01030550007','Madurai,India')
INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address])
VALUES ('Afraz','[email protected]','01030550006','Madurai,India')
INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address])
VALUES ('Afreen','[email protected]','01030550005','Madurai,India')
select * from [StudentMasters]
第2步——建立ASP.NET Core Blazor應用程式
安裝上面列出的所有先決條件和ASP.NET Core Blazor語言服務後，單擊桌面上的開始>>程式>> Visual Studio 2017 >> Visual Studio 2017。單擊建立>>項目。選擇Web >> ASP.NET Core Angular Web Application。輸入項目名稱，然後單擊“确定”。
選擇Blazor（ASP.NET Core托管），然後單擊“确定”。
建立ASP.NET Core Blazor應用程式後，請等待幾秒鐘。您将在解決方案資料總管中看到以下結構。
ASP.NET Core Blazor解決方案的新增功能是什麼？
當我們建立新的ASP.NET Core Blazor應用程式時，我們可以看到将在解決方案資料總管中自動建立3個項目。
用戶端項目
第一個項目是作為客戶項目建立的，它将像我們的Solutionname.Client一樣，在這裡我們可以看到我們的Solutionname是“ BlazorASPCORE”。由于項目被命名為用戶端，是以該項目将主要針對所有用戶端視圖。在這裡，我們将添加所有頁面視圖以在浏覽器中顯示在用戶端。
我們可以看到一些示例頁面已經被添加在這裡，我們還可以看到一個共享檔案夾，它與我們的MVC應用程式相同，其中的母版頁具有Sharedfolder與Layout頁面。在這裡，在Blazor中，我們有MainLayout，它将母版頁面和NavMenu左側菜單顯示。
服務端項目
顧名思義，該項目将用作服務端項目。該項目主要用于建立所有控制器和WEB API控制器，以執行所有業務邏輯并使用WEB API執行CRUD操作。在我們的示範應用程式中，我們将在此服務端項目中添加Web API，并在我們的用戶端應用程式中添加所有WEB API。此服務端項目的工作方式與從資料庫get/ set資料和從用戶端項目get/ set資料類似，我們将結果綁定或發送到此伺服器以在資料庫中執行CRUD操作。
共享項目
顧名思義，這個項目就像一個共享項目。該項目用作我們的服務端項目和用戶端項目的模型(Model)。在此共享項目中聲明的模型(Model)将在服務端項目和用戶端項目中使用。我們還在這裡安裝了項目所需的所有軟體包，例如，為了使用Entity Framework，我們在這個共享項目中安裝了所有軟體包。
運作以測試應用程式
當我們運作應用程式時，我們可以看到左側有導航，右側包含資料。我們可以看到預設的示例頁面和菜單将顯示在我們的Blazor網站上。我們可以使用這些頁面或将其删除，然後從我們自己的頁面開始。
現在讓我們看看如何添加新頁面執行CRUD操作以維護student細節。
使用實體架構
要在我們的Blazor應用程式中使用Entity Framework，我們需要安裝以下軟體包：
安裝包
轉到Tools，然後選擇 - > NuGet Package Manager - > Package Manager Console。
您可以在VS 2017 IDE的底部和控制台上的組合框的右側看到控制台，選擇預設項目作為共享項目“選擇共享 ”。
1、您可以看到PM>并複制和粘貼以下行以安裝資料庫提供程式包。此包用于将資料庫提供程式設定為SQL Server。
<font color="#000000" size="3">
Install-Package Microsoft.EntityFrameworkCore.SqlServer</font>
我們可以看到包已安裝在我們的共享檔案夾中。
安裝實體架構。
2、您可以看到PM>并複制和粘貼以下行以安裝EF包。
Install-Package Microsoft.EntityFrameworkCore.Tools
3、您可以看到PM>并複制和粘貼以下行設定連接配接字元串并建立資料庫上下文。這是一個重要的部分，因為我們提供SQL Server名稱，資料庫名稱和SQL伺服器UID和SQL伺服器密碼以連接配接到我們的資料庫以執行CRUD操作。我們還提供了SQL表名來在共享項目中建立Model類。
Scaffold-DbContext "Server= YourSqlServerName;Database=StudentsDB;
user id= YourSqlUID;password= YourSqlPassword;Trusted_Connection=True;
MultipleActiveResultSets=true" Microsoft.EntityFrameworkCore.SqlServer
-OutputDir Models -Tables StudentMasters
按Enter鍵建立連接配接字元串，模型類和資料庫上下文。
我們可以看到已在共享項目中建立了StudentMasters Model類和StudentsDBContext類。我們将在伺服器項目中使用此Model與DBContext來建立我們的Web API執行CRUD操作。
為CRUD操作建立Web API
要建立我們的WEB API控制器，請右鍵單擊Controllers檔案夾。單擊添加新控制器。
在這裡，我們将使用Scaffold方法來建立我們的WEB API。我們使用Entity Framework選擇帶有操作的API控制器。
從共享項目中選擇我們的Model和DatabaseContext。
從共享項目中選擇我們的StudentMasters模型以執行CRUD操作。
從共享項目中選擇資料上下文類作為我們的StudentsDBContext。我們的Controller名字将自動添加。如果需要，可以更改它并單擊ADD。
我們将被自動建立執行CRUD操作的Get/ Post/ Put和Delete方法的WEB API ，而我們現在不需要在WEB API中編寫任何代碼，因為我們已經為所有操作方法使用了Scaffold方法，并添加了代碼。
為了測試Get方法，我們可以運作我們的項目并複制GET方法API路徑。在這裡，我們可以看到擷取api / StudentMasters /的 API路徑。
運作程式并粘貼API路徑以測試輸出。
現在，我們将把所有這些WEB API Json結果綁定到我們Client項目的視圖頁面中。
使用用戶端項目
首先，我們需要添加新的Razor視圖頁面。
添加Razor視圖
要添加Razor視圖頁面，請右鍵單擊Client項目中的Pages檔案夾。單擊添加>>新項目。
選擇Razor View >>輸入您的頁面名稱。在這裡，我們将名稱命名為Students.chtml。
在Razor視圖頁面中，我們有3部分代碼，首先是導入部分，我們導入所有引用和模型，以便在視圖、HTML設計和資料綁定部分中使用，最後，我們有函數部分來調用HTML頁面中的所有Web API進行綁定，并執行用戶端業務邏輯，以便在視圖頁面中顯示。
導入部分
首先，我們在Razor視圖頁面中導入所有需要的支援檔案和引用。在這裡，我們首先導入了要在視圖中使用的Model類，并且還導入了用于調用Web API以執行CRUD操作的HTTPClient類。
@using BLAZORASPCORE.Shared
@using BLAZORASPCORE.Shared.Models
@page "/Students"
@using Microsoft.AspNetCore.Blazor.Browser.Interop
@inject HttpClient Http
HTML設計和資料綁定部分
接下來，我們設計我們的Student詳細資訊頁面顯示從資料庫中的student細節，并建立一個表單，Insert和update Student細節。我們還有從資料庫中删除student記錄的Delete按鈕。
對于Blazor中的綁定，我們使用bind="@stds.StdId"和onclick="@AddNewStudent"來調用方法。
<h1> ASP.NET Core BLAZOR CRUD demo for Studetns</h1>
<hr />
<table width="100%" style="background:#05163D;color:honeydew">
<tr>
<td width="20"> </td>
<td>
<h2> Add New Student Details</h2>
</td>
<td> </td>
<td align="right">
<button class="btn btn-info" onclick="@AddNewStudent">Add New Student</button>
</td>
<td width="10"> </td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
<hr />
<form>
<table class="form-group">
<tr>
<td>
<label for="Name" class="control-label">Student ID</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.StdId" readonly />
</td>
<td width="20"> </td>
<td>
<label for="Name" class="control-label">Student Name</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.StdName" />
</td>
</tr>
<tr>
<td>
<label for="Email" class="control-label">Email</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.Email" />
</td>
<td width="20"> </td>
<td>
<label for="Name" class="control-label">Phone</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.Phone" />
</td>
</tr>
<tr>
<td>
<label for="Name" class="control-label">Address</label>
</td>
<td>
<input type="text" class="form-control" bind="@stds.Address" />
</td>
<td width="20"> </td>
<td></td>
<td>
<button type="submit" class="btn btn-success"
onclick="@(async () => await AddStudent())" style="width:220px;">Save</button>
</td>
</tr>
</table>
</form>
<table width="100%" style="background:#0A2464;color:honeydew">
<tr>
<td width="20"> </td>
<td>
<h2>Student Details</h2>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
@if (student == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
@foreach (var std in student)
{
<tr>
<td>@std.StdId</td>
<td>@std.StdName</td>
<td>@std.Email</td>
<td>@std.Phone</td>
<td>@std.Address</td>
<td><button class="btn btn-primary"
onclick="@(async () => await EditStudent(@std.StdId))"
style="width:110px;">Edit</button></td>
<td><button class="btn btn-danger"
onclick="@(async () => await DeleteStudent(@std.StdId))">Delete</button></td>
</tr>
}
</tbody>
</table>
}
Function部分
function部分調用所有Web API以在我們的HTML頁面中綁定，并執行用戶端業務邏輯以在View頁面中顯示。在此Function中，我們建立了一個獨立的function來Add、Edit和Delete student的詳細資訊，并調用Web API Get，Post，Put和Delete方法來執行CRUD操作，在HTML中，我們調用所有function并綁定結果。
@functions {
StudentMasters[] student;
StudentMasters stds = new StudentMasters();
string ids = "0";
bool showAddrow = false;
protected override async Task OnInitAsync()
{
student = await Http.GetJsonAsync<StudentMasters[]>("/api/StudentMasters/");
}
void AddNewStudent()
{
stds = new StudentMasters();
}
// Add New Student Details Method
protected async Task AddStudent()
{
if (stds.StdId == 0)
{
await Http.SendJsonAsync(HttpMethod.Post, "/api/StudentMasters/", stds);
}
else
{
await Http.SendJsonAsync(HttpMethod.Put, "/api/StudentMasters/" + stds.StdId, stds);
}
stds = new StudentMasters();
student = await Http.GetJsonAsync<StudentMasters[]>("/api/StudentMasters/");
}
// Edit Method
protected async Task EditStudent(int studentID)
{
ids = studentID.ToString();
stds = await Http.GetJsonAsync<StudentMasters>
("/api/StudentMasters/" + Convert.ToInt32(studentID));
}
// Delte Method
protected async Task DeleteStudent(int studentID)
{
ids = studentID.ToString();
await Http.DeleteAsync("/api/StudentMasters/" + Convert.ToInt32(studentID));
// await Http.DeleteAsync("/api/StudentMasters/Delete/" + Convert.ToInt32(studentID));
student = await Http.GetJsonAsync<StudentMasters[]>("/api/StudentMasters/");
}
}
導航菜單
現在我們需要将這個新添加的Students Razor頁面添加到我們的左側導航中。要添加此項，請打開共享檔案夾，然後打開NavMenu.cshtml頁面并添加菜單。
<li class="nav-item px-3">
<NavLink class="nav-link" href="/Students" target="_blank" rel="external nofollow" >
<span class="oi oi-list-rich" aria-hidden="true"></span> Students Details
</NavLink>
</li>
建構并運作應用程式
原文位址：https://www.codeproject.com/Articles/1244729/ASP-NET-Core-Blazor-CRUD-using-Entity-Framework-an