目录

介绍

背景

先决条件

使用代码

第1步——创建数据库和表

第2步——创建ASP.NET Core Blazor应用程序

ASP.NET Core Blazor解决方案的新增功能是什么？

客户端项目

服务端项目

共享项目

运行以测试应用程序

使用实体框架

安装包

为CRUD操作创建Web API

使用客户端项目

添加Razor视图

导入部分

HTML设计和数据绑定部分

Function部分

导航菜单

构建并运行应用程序

介绍

在本文中，我们将了解如何使用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应用程序。

Image 2 for ASP.NET Core Blazor CRUD using Entity Framework and Web API

  • 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）或更高版本的预览。

使用代码

第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','syedshanumcain@gmail.com','01030550007','Madurai,India')

INSERT INTO [StudentMasters]   ([StdName],[Email],[Phone],[Address])
     VALUES ('Afraz','Afraz@afrazmail.com','01030550006','Madurai,India')

INSERT INTO [StudentMasters]   ([StdName],[Email],[Phone],[Address])
     VALUES ('Afreen','Afreen@afreenmail.com','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" face="Calibri" 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

按回车键创建连接字符串，模型类和数据库上下文。

我们可以看到已在共享项目中创建了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">&nbsp;</td>
        <td>
            <h2> Add New Student Details</h2>
        </td>
        <td>&nbsp;</td>
        <td align="right">
            <button class="btn btn-info" onclick="@AddNewStudent">Add New Student</button>
        </td>
        <td width="10">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Students Details
            </NavLink>
        </li>

构建并运行应用程序

Image 31 for ASP.NET Core Blazor CRUD using Entity Framework and Web API

 

原文地址：https://www.codeproject.com/Articles/1244729/ASP-NET-Core-Blazor-CRUD-using-Entity-Framework-an

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

Kaldi之父，IEEE Fellow，小米首席语音科学家Daniel Povey将出席2024全球机器学习技术大会并发表演讲！

avatar CSDN学习社区
cover

探索神经网络在商品销售和图像识别中的应用

avatar CSDN学习社区
cover

基于stm32F103的座面声控台灯

avatar CSDN学习社区