使用Entity Framework和Web API的ASP.NET Core Blazor CRUD

目录

介绍

背景

先决条件

使用代码

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

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

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

客户端项目

服务端项目

共享项目

运行以测试应用程序

使用实体框架

安装包

为CRUD操作创建Web API

使用客户端项目

添加Razor视图

导入部分

HTML设计和数据绑定部分

Function部分

导航菜单

构建并运行应用程序


  • 下载源代码 - 1.7 MB

介绍

在本文中,我们将了解如何使用Entity FrameworkWeb APIASP.NET Core Blazor创建一个简单的CRUD应用程序。BlazorMicrosoft推出的新框架。我喜欢使用Blazor,因为这使我们的SPA全栈应用程序开发更简单,是的,现在我们只能使用一种语言如C#。在Blazor之前,我们一直在使用ASP.NET CoreAngularReactJs的组合,现在在Blazor支持的帮助下,我们可以直接用CCode创建我们自己的SPA应用程序。如果你使用Blazor开始你的SPA应用程序开发,肯定你会喜欢它,与Blazor一起工作更加简单有趣。我们现在唯一的缺点就是Blazor是新引入的框架,它仍处于试验阶段,一旦我们得到完整版本,使用应用程序开发会更有趣。

在本文中,我们将了解如何使用ASP.NET Core Blazor创建CRUD Web应用程序。

  • C :( Create):使用ASP.NET CoreBlazorEFWeb API将新的学生详细信息插入到数据库中。
  • R :( Read):使用ASP.NET CoreBlazorEFWeb API从数据库中选择学生详细信息。
  • U :( Update):使用ASP.NET CoreBlazorEFWeb API将学生详细信息更新到数据库
  • D :( Delete):使用ASP.NET CoreBlazorEFWeb API从数据库中删除学生详细信息。

我们将使用Web APIEF来执行我们的CRUD操作。网络API有以下四种方法为GetPostPutDelete,其中:

  • Get是请求数据(Select
  • Post是创建数据(Insert
  • Put是更新数据(Update
  • Delete是删除数据(Delete

背景

先决条件

确保在您的计算机中已安装了所有先决条件。如果没有,则逐个下载并安装所有内容。请注意,由于Blazor是新框架,我们必须安装Visual Studio 201715.7)或更高版本的预览。

  • 安装.NET Core 2.1 Preview 2 SDK。(您可以从此链接中找到所有版本)

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第1张图片

  • 安装Visual Studio 201715.7的最新预览。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第2张图片

  • Blazor Extensions 安装ASP.NET Core Blazor语言服务

使用代码

1步——创建数据库和表

我们将为我们的WEB APIEF使用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。输入项目名称,然后单击确定

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第3张图片

选择BlazorASP.NET Core托管),然后单击确定

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第4张图片

创建ASP.NET Core Blazor应用程序后,请等待几秒钟。您将在解决方案资源管理器中看到以下结构。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第5张图片

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

当我们创建新的ASP.NET Core Blazor应用程序时,我们可以看到将在解决方案资源管理器中自动创建3个项目。

客户端项目

第一个项目是作为客户项目创建的,它将像我们的Solutionname.Client一样,在这里我们可以看到我们的Solutionname“ BlazorASPCORE。由于项目被命名为客户端,因此该项目将主要针对所有客户端视图。在这里,我们将添加所有页面视图以在浏览器中显示在客户端。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第6张图片

我们可以看到一些示例页面已经被添加在这里,我们还可以看到一个共享文件夹,它与我们的MVC应用程序相同,其中的母版页具有SharedfolderLayout页面。在这里,在Blazor中,我们有MainLayout,它将母版页面和NavMenu左侧菜单显示。

服务端项目

顾名思义,该项目将用作服务端项目。该项目主要用于创建所有控制器和WEB API控制器,以执行所有业务逻辑并使用WEB API执行CRUD操作。在我们的演示应用程序中,我们将在此服务端项目中添加Web API,并在我们的客户端应用程序中添加所有WEB API。此服务端项目的工作方式与从数据库getset数据和从客户端项目getset数据类似,我们将结果绑定或发送到此服务器以在数据库中执行CRUD操作。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第7张图片

共享项目

顾名思义,这个项目就像一个共享项目。该项目用作我们的服务端项目和客户端项目的模型(Model)。在此共享项目中声明的模型(Model)将在服务端项目和客户端项目中使用。我们还在这里安装了项目所需的所有软件包,例如,为了使用Entity Framework,我们在这个共享项目中安装了所有软件包。

运行以测试应用程序

当我们运行应用程序时,我们可以看到左侧有导航,右侧包含数据。我们可以看到默认的示例页面和菜单将显示在我们的Blazor网站上。我们可以使用这些页面或将其删除,然后从我们自己的页面开始。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第8张图片

现在让我们看看如何添加新页面执行CRUD操作以维护student细节。

使用实体框架

要在我们的Blazor应用程序中使用Entity Framework,我们需要安装以下软件包:

安装包

转到Tools,然后选择 - > NuGet Package Manager - > Package Manager Console

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第9张图片

您可以在VS 2017 IDE的底部和控制台上的组合框的右侧看到控制台,选择默认项目作为共享项目选择共享 ”

1、您可以看到PM>并复制和粘贴以下行以安装数据库提供程序包。此包用于将数据库提供程序设置为SQL Server


Install-Package Microsoft.EntityFrameworkCore.SqlServer

我们可以看到包已安装在我们的共享文件夹中。

安装实体框架。

2、您可以看到PM>并复制和粘贴以下行以安装EF包。

Install-Package Microsoft.EntityFrameworkCore.Tools

3、您可以看到PM>并复制和粘贴以下行设置连接字符串并创建数据库上下文。这是一个重要的部分,因为我们提供SQL Server名称,数据库名称和SQL服务器UIDSQL服务器密码以连接到我们的数据库以执行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

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

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第10张图片

我们可以看到已在共享项目中创建了StudentMasters Model类和StudentsDBContext类。我们将在服务器项目中使用此ModelDBContext来创建我们的Web API执行CRUD操作。

CRUD操作创建Web API

要创建我们的WEB API控制器,请右键单击Controllers文件夹。单击添加新控制器。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第11张图片

在这里,我们将使用Scaffold方法来创建我们的WEB API。我们使用Entity Framework选择带有操作的API控制器。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第12张图片

从共享项目中选择我们的ModelDatabaseContext

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第13张图片

从共享项目中选择我们的StudentMasters模型以执行CRUD操作。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第14张图片

从共享项目中选择数据上下文类作为我们的StudentsDBContext。我们的Controller名字将自动添加。如果需要,可以更改它并单击ADD

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第15张图片

我们将被自动创建执行CRUD操作的GetPostPutDelete方法的WEB API ,而我们现在不需要在WEB API中编写任何代码,因为我们已经为所有操作方法使用了Scaffold方法,并添加了代码。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第16张图片

为了测试Get方法,我们可以运行我们的项目并复制GET方法API路径。在这里,我们可以看到获取api / StudentMasters / API路径。

运行程序并粘贴API路径以测试输出。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第17张图片

现在,我们将把所有这些WEB API Json结果绑定到我们Client项目的视图页面中。

使用客户端项目

首先,我们需要添加新的Razor视图页面。

添加Razor视图

要添加Razor视图页面,请右键单击Client项目中的Pages文件夹。单击添加>>新项目。

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第18张图片

选择Razor View >>输入您的页面名称。在这里,我们将名称命名为Students.chtml

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第19张图片

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

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD_第20张图片

HTML设计和数据绑定部分

接下来,我们设计我们的Student详细信息页面显示从数据库中的student细节,并创建一个表单,Insertupdate Student细节。我们还有从数据库中删除student记录的Delete按钮。

对于Blazor中的绑定,我们使用bind="@stds.StdId"onclick="@AddNewStudent"来调用方法。

ASP.NET Core BLAZOR CRUD demo for Studetns


 

Add New Student Details

   

 
 
 
 

Student Details

@if (student == null) {

Loading...

} else { @foreach (var std in student) { }
Student ID Student Name Email Phone Address
@std.StdId @std.StdName @std.Email @std.Phone @std.Address
}

Function部分

function部分调用所有Web API以在我们的HTML页面中绑定,并执行客户端业务逻辑以在View页面中显示。在此Function中,我们创建了一个独立的functionAddEditDelete student的详细信息,并调用Web API GetPostPutDelete方法来执行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("/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("/api/StudentMasters/");
    }
    // Edit Method
    protected async Task EditStudent(int studentID)
    {
        ids = studentID.ToString();
        stds = await Http.GetJsonAsync
               ("/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("/api/StudentMasters/");
    }
}

导航菜单

现在我们需要将这个新添加的Students Razor页面添加到我们的左侧导航中。要添加此项,请打开共享文件夹,然后打开NavMenu.cshtml页面并添加菜单。

构建并运行应用程序

 

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

你可能感兴趣的:(ASP.NET,CORE,CSharp.NET,MVC,架构及框架)