ASP。NET Core Blazor CRUD使用实体框架和Web API

• 下载source code - 1.7 MB

介绍 *请查看我的Youtube视频链接来学习ASP。NET Core Blazor CRUD使用实体框架和Web API。 在本文中，我们将了解如何为ASP创建一个简单的CRUD应用程序。NET Core Blazor使用实体框架和Web API。Blazor是微软引入的一个新框架。我喜欢使用Blazor，因为它使我们的SPA全栈应用程序开发更加简单，而且现在我们只能使用一种语言，比如c#。在Blazor之前，我们一直使用ASP。结合Angular和ReactJs，现在在Blazor的帮助下，我们可以直接用c#代码创建自己的SPA应用程序。如果您使用Blazor开始您的SPA应用程序开发，您肯定会喜欢它，而且使用Blazor工作更加简单和有趣。现在我们唯一的缺点是Blazor是一个新引入的框架，它还处于试验阶段，一旦我们得到了完整的版本，在应用开发中工作会更加有趣。 在本文中，我们将了解如何使用ASP创建CRUD web应用程序。净Blazor核心。 C:(创建):使用ASP将新的学生详细信息插入数据库中。NET Core, Blazor, EF和Web API。R:(读):使用ASP从数据库中选择学生详细信息。NET Core, Blazor, EF和Web API。U:(更新):使用ASP将学生的详细信息更新到数据库。d:(删除):使用ASP从数据库中删除学生的详细信息。NET Core, Blazor, EF和Web API。 我们将使用Web API和EF来执行CRUD操作。Web API有以下四种方法:Get/Post/Put和Delete，其中: Get是请求数据(选择)，post是创建数据(插入)，put是更新数据(更新)，delete是删除数据(删除) 背景 先决条件 请确保已在计算机中安装了所有先决条件。如果没有，那么下载并安装所有，一个一个。注意，由于Blazor是新的框架，我们必须安装Visual Studio 2017(15.7)或以上的预览版。 安装。net Core 2.1 Preview 2 SDK。(你可以在此链接找到所有版本) 安装最新的Visual Studio 2017预览版(15.7)。 安装ASP。NET Core Blazor语言服务用于Blazor扩展。 使用的代码 步骤1 -创建一个数据库和一个表 我们将使用我们的SQL Server数据库为我们的WEB API和EF。首先，我们创建一个名为StudentsDB的数据库和一个名为StudentMaster的表。下面是用于在表中创建数据库表和示例记录插入查询的SQL脚本。在您的本地SQL服务器中运行下面给出的查询，以创建一个数据库和一个表，用于我们的项目。 隐藏,收缩,复制Code

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在你的桌面上。单击New祝辞祝辞项目。选择Web祝辞祝辞ASP。NET Core Angular Web应用。输入项目名称并单击OK。 选择Blazor (ASP。)并单击ok。 在创建ASP。NET Core Blazor应用，等待几秒钟。您将在解决方案资源管理器中看到以下结构。 什么是新的ASP。NET Core Blazor解决方案? 当我们创建新的ASP时。NET Core Blazor应用，我们可以看到在解决方案资源管理器中会自动创建3个项目。 客户端项目 第一个项目作为客户端项目创建，它将作为我们的Solutionname。在这里我们可以看到我们的解决方案名称为“BlazorASPCORE”。由于该项目被命名为client，因此该项目将主要针对所有客户端视图。在这里，我们将添加所有要在浏览器客户端显示的页面视图。 我们可以看到在这里已经添加了一些样例页面，我们还可以看到一个共享文件夹，就像我们的MVC应用程序一样，其中有共享文件夹和主页的布局页面。在这里，在Blazor，我们有主布局，它将工作像主页和导航菜单为左侧菜单显示。 服务器项目 如名称所示，此项目将用作服务器项目。这个项目主要用于创建我们所有的控制器和WEB API控制器来执行所有的业务逻辑和使用WEB API执行CRUD操作。在我们的演示应用程序中，我们将在这个服务器项目中添加一个Web API，并在我们的客户机应用程序中添加所有Web API。这个服务器项目的工作方式类似于从数据库中获取/设置数据，从我们的客户端项目中，我们绑定或发送结果到这个服务器来执行数据库中的CRUD操作。 共享项目 正如名称所示，此项目类似于共享项目。这个项目作为我们的服务器项目和客户端项目的模型。在这个共享项目中声明的模型将在服务器和客户端项目中使用。我们还ins所有我们项目需要的包，例如使用实体框架，我们在这个共享的项目中安装所有的包。 运行以测试应用程序 当我们运行应用程序时，我们可以看到左边有导航，右边包含数据。我们可以看到，作为默认示例页面和菜单将显示在我们的Blazor网站。我们可以使用或删除页面，然后从自己的页面开始。 现在，让我们看看如何添加新页面来执行CRUD操作以维护学生细节。 使用实体框架 为了在我们的Blazor应用程序中使用实体框架，我们需要安装以下软件包: 安装包 选择工具，然后选择->NuGet包管理器->包管理器控制台。 你可以看到VS 2017 IDE底部的控制台，在控制台的组合框的右边，选择默认项目作为你的共享项目“select shared”。 你可以看到PM>然后复制并粘贴下面的行来安装数据库提供程序包。这个包用于将数据库提供程序设置为SQL Server。 隐藏,font color="#000000" face="Calibri" size="3"> 安装包Microsoft.EntityFrameworkCore.SqlServer< / font> 我们可以看到包安装在共享文件夹中。 安装实体框架。 你可以看到PM>然后复制并粘贴下面的行来安装EF包。 隐藏,复制CodeInstall-Package Microsoft.EntityFrameworkCore.Tools 你可以看到PM>并复制和粘贴下面一行设置连接字符串和创建DB上下文。这是一个重要的部分，因为我们需要提供SQL服务器名称、数据库名称和SQL服务器UID和SQL服务器密码，以便连接到数据库以执行CRUD操作。我们还提供了SQL表名，以便在共享项目中创建模型类。 隐藏,复制CodeScaffold-DbContext "Server= YourSqlServerName;Database=StudentsDB; userid = YourSqlUID;password= YourSqlPassword;Trusted_Connection=True; MultipleActiveResultSets Microsoft.EntityFrameworkCore.SqlServer = true” -OutputDir Models -Tables studentmaster 按enter键创建连接字符串、模型类和数据库上下文。 我们可以看到在共享项目中创建了StudentMasters模型类和StudentsDBContext类。我们将在服务器项目中使用这个模型和DBContext来创建执行CRUD操作的Web API。 为CRUD操作创建Web API 要创建我们的WEB API控制器，右键单击Controllers文件夹。单击Add New Controller。 在这里，我们将使用Scaffold方法创建WEB API。我们使用实体框架选择带有动作的API控制器。 从共享项目中选择我们的模型和DatabaseContext。 从共享项目中选择studentmaster模型来执行CRUD操作。 从共享项目中选择数据上下文类作为StudentsDBContext。我们的控制器名称将被自动添加。如果需要，您可以更改它并单击ADD。 我们的用于执行CRUD操作的Get/Post/Put和Delete方法的WEB API将被自动创建，现在我们不需要在WEB API中编写任何代码，因为我们已经使用了Scaffold方法来执行所有的操作和方法添加代码。 要测试Get方法，我们可以运行我们的项目并复制Get方法API路径。在这里，我们可以看到获取API /StudentMasters/的API路径。 运行程序并粘贴API路径来测试输出。 现在，我们将把所有这些WEB API Json结果绑定到客户端项目的视图页面中。 与客户项目合作 首先，我们需要添加新的Razor视图页面。 添加Razor视图 要添加Razor视图页面，右键单击客户端项目中的Pages文件夹。点击添加>>新项目。 选择剃须刀视图>>输入您的页面名称。在这里，我们将名称命名为Students.chtml。 在Razor视图页面中,我们有三部分的代码首先是我们进口进口部分的引用和模型使用在视图中,HTML设计和数据绑定最后一部分,我们有部分功能调用的所有web API将在我们的HTML页面并执行客户端业务逻辑被显示在视图页面。 导入部分 首先，在Razor视图页面中导入所有需要的支持文件和引用。在这里，我们首先导入了要在视图中使用的模型类，还导入了用于调用Web API以执行CRUD操作的HTTPClient。 隐藏,复制Code

@using BLAZORASPCORE.Shared
@using BLAZORASPCORE.Shared.Models
@page "/Students"
@using Microsoft.AspNetCore.Blazor.Browser.Interop
@inject HttpClient Http

HTML设计和数据绑定部分 接下来，我们设计学生详细信息页面来显示来自数据库的学生详细信息，并创建一个表单来插入和更新学生详细信息。我们还有Delete按钮从数据库中删除学生记录。 对于Blazor中的绑定，我们使用bind="@stds。并使用onclick="@AddNewStudent"调用该方法。 隐藏,收缩,复制Code

<h1> ASP.NET Core BLAZOR CRUD demo for Studetns</h1>
<hr/>
<tablewidth="100%"style="background:#05163D;color:honeydew">
    <tr>
        <tdwidth="20">&nbsp;</td>
        <td>
            <h2> Add New Student Details</h2>
        </td>
        <td>&nbsp;</td>
        <tdalign="right">
            <buttonclass="btn btn-info"onclick="@AddNewStudent">Add New Student</button>
        </td>
        <tdwidth="10">&nbsp;</td>
    </tr>
    <tr>
        <tdcolspan="2"></td>
    </tr>
</table>
<hr/>
<form>
    <tableclass="form-group">
        <tr>
            <td>
                <labelfor="Name"class="control-label">Student ID</label>
            </td>
            <td>
                <inputtype="text"class="form-control"bind="@stds.StdId"readonly/>
            </td>
            <tdwidth="20">&nbsp;</td>
            <td>
                <labelfor="Name"class="control-label">Student Name</label>
            </td>
            <td>
                <inputtype="text"class="form-control"bind="@stds.StdName"/>
            </td>
        </tr>
        <tr>
            <td>
                <labelfor="Email"class="control-label">Email</label>
            </td>
            <td>
                <inputtype="text"class="form-control"bind="@stds.Email"/>
            </td>
            <tdwidth="20">&nbsp;</td>
            <td>
                <labelfor="Name"class="control-label">Phone</label>
            </td>
            <td>
                <inputtype="text"class="form-control"bind="@stds.Phone"/>
            </td>
        </tr>
        <tr>
            <td>
                <labelfor="Name"class="control-label">Address</label>
            </td>
            <td>
                <inputtype="text"class="form-control"bind="@stds.Address"/>
            </td>
            <tdwidth="20">&nbsp;</td>
            <td></td>
            <td>
                <buttontype="submit"class="btn btn-success"onclick="@(async () => await AddStudent())"style="width:220px;">Save</button>
            </td>
        </tr>
    </table>
</form>
 
<tablewidth="100%"style="background:#0A2464;color:honeydew">
    <tr>
        <tdwidth="20">&nbsp;</td>
        <td>
            <h2>Student Details</h2>
        </td>
 
    </tr>
    <tr>
        <tdcolspan="2"></td>
    </tr>
</table>
 
@if (student == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <tableclass="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><buttonclass="btn btn-primary"onclick="@(async () => await EditStudent(@std.StdId))"style="width:110px;">Edit</button></td>
                    <td><buttonclass="btn btn-danger"onclick="@(async () => await DeleteStudent(@std.StdId))">Delete</button></td>
                </tr>
            }
        </tbody>
    </table>
}

函数部分 函数部分调用所有的th将web API绑定到HTML页面中，并执行在视图页面中显示的客户端业务逻辑。在这个函数中，我们创建了一个单独的用于添加、编辑和删除学生详细信息的函数，并调用Web API Get、Post、Put和Delete方法来执行CRUD操作，在HTML中，我们调用所有函数并绑定结果。 隐藏,收缩,复制Code

@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页面添加到左边的导航栏中。要添加这个，打开共享文件夹并打开导航菜单。cshtml页面并添加菜单。 隐藏,复制Code

<liclass="nav-item px-3">
            <NavLinkclass="nav-link"href="/Students">
                <spanclass="oi oi-list-rich"aria-hidden="true"></span> Students Details
            </NavLink>
        </li>

构建并运行应用程序 的兴趣点 注意，在创建DBContext和设置连接字符串时，不要忘记添加SQL连接字符串。希望你们都喜欢这篇文章，在下一篇文章中，我们将看到更多关于Blazor的例子，使用Blazor真的非常酷。 历史 2018-05-18: BLAZORASPCORE.zip 本文转载于：http://www.diyabc.com/frontweb/news18995.html