使用ASP.NET Core执行CRUD操作的Blazor服务器端应用程序

当一个页面第一次被请求时，以及当页面被发布回服务器时，就会发生服务器端处理。例如，验证、保存和检索数据，以及导航到其他页面，都是服务器端处理的例子。

在本教程中，你将学习如何从头开始创建一个Blazor服务器端应用程序并在其中执行CRUD操作。你将执行的CRUD操作类型包括创建、读取、更新和删除列表中的数据。

先决条件

要完成本教程，你需要具备以下条件。

• 对[Blazor框架]有基本了解
• 具有[C#]语言的基本知识
• 安装Microsoft Visual Studio。
• 基本的[HTML]知识
• 一个基本的[ASP.NET核心]知识

现在，我们将打开Microsoft Visual Studio，选择New Project ，如下图所示，然后点击下一步。

在下一个屏幕上，选择Blazor Server App ，然后点击下一步，如下图所示。

在下一个屏幕上，选择你的应用程序的名称，即Blazor server app ，并点击下一步，如下图所示。

在下一个屏幕上，选择你的目标框架，在这种情况下，我们将使用.NET Core 3.1(Long-term Support) ，点击Create 。

现在运行该应用程序，看看它在网络浏览器中是什么样子。它看起来应该是这样的。

该网站有三个页面。我们还将添加一个页面来获取学生的数据，并在其中执行CRUD 操作。

创建和读取列表中的数据

在共享文件夹中，有一个名为NavMenu.razor 的文件。这个文件将被用来创建一个指向新创建的页面的链接。

为了创建students page ，我们需要在文件中添加以下HTML代码。

<li class="nav-item px-3">
            <NavLink class="nav-link" href="students">
                <span class="oi oi-plus" aria-hidden="true"></span> Students
            </NavLink>
</li>

我们还需要添加一个剃刀组件并命名为Students.razor 。要做到这一点，右击pages文件夹并选择Razor component 。

然后，输入组件的名称，即Students.razor ，并点击Add 。

为了获取学生的数据，我们将需要在Data 文件夹中创建一个类。在文件夹名称上点击右键，选择类。

我们将在IStudentService.cs 文件中创建一个名为IStudentService.cs 的接口，它将有一些方法。

我们还将通过上述同样的程序创建一个名为StudentService 的接口的实现。但是，这一次你将点击Class ，而不是Interface 。StudentService 继承于IStudentService 。

你还将在IStudentService.cs 文件中创建方法。第一个方法将返回一个学生的列表。

我们将在Data folder 中获取这个学生列表。下面的代码是用来获取学生的数据的。

namespace Blazor_Server_App.Data
{
    interface IStudentService
    {
        List<Student> GetStudent();}
}

我们将在StudentService 文件中实现上述方法。我们将创建一个字段的私有属性来使用学生的列表。我们将通过创建一个私有的学生列表并返回它来实现，如下面的代码片段所示。

namespace Blazor_Server_App.Data
{
    public class StudentsService : IStudentsService
    {
        private List<Students> students = new List<Students>
        {
            new Students
            {
                Id = Guid.NewGuid(),
                Name = "Student 1"
            },
            new Student
            {
                Id = Guid.NewGuid(),
                Name = "Student 2"
            },
            new Students
            {
                Id = Guid.NewGuid(),
                Name = "Student 3"
            },
        };
    public List<Student> GetStudent()
        {
            return student;
        }
    }
}

StudentsService 为了使用上述方法，我们需要在Student.razor 文件中通过调用inject 关键字注入服务，这样我们就可以在代码中的任何地方使用它。

我们将创建一个名为on load 的重写方法。HTML Code 将学生名单填充到一个表中，并创建一个循环，循环浏览可用的雇员名单。

@page "/students" 是一个与这个组件相匹配的URL，以便被剃刀页面访问。

@page "/students"
<h3>Students</h3>
@inject Blazor_Server_App.Data.IStudentsService StudentService;
<table class ="table">
    <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
        </tr>
    </thead>
    <tbody>
        @foreach(var student in student)
            {
                <tr>
                    <td>@student.Id</td>
                    <td>@student.Name</td>
                </tr>
            }
    </tbody>
</table>
@code {
    private List<Blazor_Server_App.Data.Student> student;
    protected override void OnInitialized()
    {
        student = StudentService.GetStudent();
    }
}

另外，在startup.cs 文件中，我们将添加一个StudentService 的单子，这样，当我们要求IStudentsService ，它就会给我们StudentService。即。

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<WeatherForecastService>();
            services.AddSingleton<IStudentService, StudentService>();
        }

由于我们没有一个学生列表，我们将不得不创建一个学生模型并给出两个属性。

第一个属性得到Identity ，即学生的注册号码。第二个属性得到学生的名字，如下面的代码所实现。

namespace Blazor_Server_App.Data
{
    public class Students
    {
        public Guid Id { get; set; }
        public String Name { get; set; }
    }
}

更新/编辑列表

为了给这个页面创建一个编辑功能，我们需要创建一个链接，将我们的路由从学生的页面带到另一个页面，该页面显示我们想要更新或编辑的学生的详细信息。

要做到这一点，在Student.razor 文件中，我们将在表头中添加一个空的表头，并在表体中添加一个锚标签的动作，该标签有一个我们希望用户发送到的新学生位置。

同时，随着路由，你将传递学生的ID，这样你就可以用ID搜索新位置的学生。

<table class="table">
    <thead>
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        @foreach(var student in students)
            {
                <tr>
                    <td>@student.Id</td>
                    <td>@student.Name</td>
                    <td>
                        <a href="stdudent/@student.Id">Edit</a>
                    </td>
                </tr>
            }
    </tbody>
</table>

现在，我们需要创建一个新的页面来添加和编辑学生。要做到这一点，右击页面文件夹，选择Add 。接下来，选择Razor Component ，并给它一个名字。例如，EditStudent.razor 。

为了获取Id，我们将在我们的EditStudent.razor 文件中实现下面的代码。

@page "/students{Id}"
<h3>EditStudent</h3>
<h4>Id</h4>
@code {
    [Parameter]
    public String Id { get; set; }
}

我们将需要使用上面的Id并获取学生数据，以便我们可以编辑细节。要做到这一点，我们将进入学生服务接口，创建一个方法来获取学生的详细信息。

我们将在interface IStudentsService 中添加下面的代码行。

Students GetStudents(Guid id);

我们还将在StudentService 文件中通过使用SingleOrDefault 方法实现上述方法。这是因为它不可能是空的，因为它需要返回一些东西。

 public Students GetStudents(Guid id)
        {
            return students.SingleOrDefault(x => x.Id == id);
        }

我们将在EditStudent 组件中使用上面的方法。

@page "/students{id}"
<h3>EditStudent</h3>
@inject Blazor_Server_App.Data.IStudentsService StudentsService;
@inject NavigationManager Navigation
<h4>Id</h4>
<EditForm Model="student" onSubmit ="@submitForm">
    <div class="form-group">
        <label>Id</label>
        <input id="Id" value="@student.Id" name="id" readonly />
    </div>
    <div class="form-group">
        <label>Id</label>
        <inputText id="Name" class="form-control" value ="@student.Name" name="name" @bind-value="student.Name"></inputText>
    </div>
     <button type="submit" class="btn btn-primary">Update</button>
</EditForm>
@code {
    [Parameter]
    public String Id { get; set; }
    private Blazor_Server_App.Data.Students student { get; set; }
    protected override void OnInitialized()
    {
        student = StudentsService.GetStudents(Guid.Parse(Id));
    }
    private void submitForm()
    {
        StudentsService.UpdateStudent(student);
        Navigation.NavigateTo("students");
    }
}

现在，我们已经填充了学生名单中的姓名和ID。接下来，我们需要创建一个更新按钮，这样你就可以更新一个学生，并返回到学生的列表中，能够看到变化。

要做到这一点，我们将进入学生服务接口，创建一个方法来更新学生名单。我们将调用该方法UpdateStudent() ，并将学生模型传递给它。这个方法返回一个空。

 void UpdateStudent(Students students);

我们将在学生服务文件中实现上述接口方法。这个更新学生的方法是先获取学生，然后用新的学生更新列表。

        public void UpdateStudent(Students students)
        {
            var getOldStudent = GetStudents(students.Id);
             getOldStudent.Name = students.Name;
        }

向列表中添加数据

为了向列表中添加一个学生，我们将进入学生服务接口并创建一个添加学生的方法。该方法将是一个void，并接收学生模型。比如说。

void AddStudent(Students students);

下一件事是在学生服务文件中实现上述接口方法。要做到这一点，我们将在服务文件中创建一个新的Id，返回添加到学生模型中的新学生，并将新学生添加到列表中。

 public void AddStudent(Students students)
        {
            var id = Guid.NewGuid();
            students.Id = id;
            Students.Add(students);
        }

接下来，你将在student.razor component 文件中创建一个锚标签，以链接各页面。

<a href="student/0"></a>

在EditStudents.razor 文件中，我们将检查id是否为空或空。如果id为零，我们就创建一个新的学生。否则，就从学生服务中获取它。

    private Blazor_Server_App.Data.Students student { get; set; }
    protected override void OnInitialized()
    {
        if (!String.IsNullOrEmpty(Id)& Id == "0")
        {
            student = new Data.Students();
        }
        else
        {
            student = StudentsService.GetStudents(Guid.Parse(Id));
        }
    }

在提交表单中，我们将检查学生是否为空，然后调用学生服务来添加学生。否则，我们将直接更新该雇员。

private void SubmitForm()
    {
        if(student.Id == Guid.Empty)
        {
            StudentsService.AddStudent(student);
        }
        else
        {
            StudentsService.UpdateStudent(student);
        }
        Navigation.NavigateTo("students");
    }

从列表中删除数据

在students' razor页面中，我们将为一个按钮添加另一个表数据，并给它一个值Delete 。之后，我们将给它一个onclick动作和一个方法onDelete ，并将student的值传递给它。

<td>
     <button class = "btn btn-secondary" onclick="@(e=> onDelete(student.Id))">Delete</button>
 </td>

在学生服务接口中，我们将创建一个删除学生的方法，并在学生服务文件中实现该方法。这是通过获取学生数据并将其从列表中删除来实现的。

void DeleteStudent(Guid id);

在学生服务文件中。

public void DeleteStudent(Guid id)
        {
            var student = GetStudents(id);
            students.Remove(student);
        }

总结

在本教程中，我们已经了解了ASP.NET Core中的服务器端blazor。我们还看到了如何使用ASP.NET进行CRUD操作。我们也可以很容易地说出服务器端的blazor与其他客户端的blazor应用程序有什么不同。