使用ASP.NET Core的Razor Pages Web应用程序教程

Razor Pages是一个服务器端、以页面为中心的框架，它允许在ASP.NET Core中创建动态、数据驱动的网页，并对关注点进行明确的分离。

如果你一直在寻找一种更好、更简单的方式来创建一个Razor页面的Web应用，那么使用ASP.NET Core将是最适合你的。这篇文章重点介绍了如何能拿出一个有效的剃刀页网络应用。

通过本教程后，读者将能够提出一个能够管理任何给定对象的数据库的Web应用程序。

前提条件

为了更好地理解本教程，你需要具备一些基本知识。

[ASP.NET核心]
[C#]
[HTML]

你还需要在你的电脑上下载[Visual Studio]和[.NET Core 3.1]。

下载并安装Visual Studio后，启动它并按照以下步骤操作。

创建一个Razor pages网络应用程序

要创建一个新的项目，点击Create a new project 。

New project

在下一个窗口中，点击ASP.NET Core Web App ，然后点击下一步。

接下来，输入你要创建的Web应用程序的名称，即：StudentsCheckList 这个项目，选择你要的应用程序的位置，然后点击下一步。

Name of the web app

在下一页点击Create ，完成应用程序的设置。之后，网络应用程序项目就创建好了。现在我们将通过上面提到的步骤来修改这个Web应用程序。

Interface for Web App Creation

当你调试时，你的Web应用，会出现这样的情况。

Appearance of the web app

现在，在solution explorer tab ，有一些文件是需要了解的，即。

index. cshtml 文件，它是显示模板。
index.cshtml.cs 文件，是页面模型。

index.html 文件包括@page 指令，它通知ASP.NET Core 它是一个剃刀页面，以及@model 指令，它指定了显示模板的模型，即 IndexModel。

我们需要改变欢迎词，在cs.cshtml.cs 文件中添加以下代码，并在index.cshtml文件中用@Model.Message 属性访问它。

namespace StudentsCheckList.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger _logger;
        public string Message{get; set;}
        public IndexModel(ILogger logger)
        {
           _logger = logger;
        }
        public void OnGet()
        {
            Message = "Hello, welcome to the Web App Tutorial.";
        }
    }
}

在index.cshtml 代码中，我们删除welcome 消息，并添加@Model.Message 属性来访问index.cshtml.cs 文件中的消息。

将模型集成到Razor Pages应用程序中

要添加一个模型到你的Web应用程序，在解决方案资源管理器标签中右击Solution 'StudentsCheckList' ，并导航到Add ，并选择New Project 。

在选择的新项目中，我们只对Class Library Project ，所以在搜索栏中，输入Class Library ，并选择使用C#语言的Class Library(.NET Standard) `。

model

点击下一步，输入你要添加的模型的名称。在下一个屏幕上点击创建。

更新/添加数据到Razor页面的Web应用程序

这个应用程序将用于create,read,update, 和delete 操作。

在这个模型中，我们想创建一个给定学校的学生列表，所以我们在公共类中添加RegNo,Name,Email,Department, 和Degree ，得出以下示例代码。

using System;
namespace Model
{
    public enum Class1
    {
        Name,
        RegNo,
        Email,
        Department,
        Degree
    }
}

接下来要做的是添加雇员类，所以右击model class ，选择Add ，然后选择Class 。我们将其命名为Students 。

在这个类中，我们需要包括这五个数据类型。即

注册号
姓名
电子邮件
部门
学位

为了添加上述数据，我们将有以下代码。

namespace Model

{
    public class Students
    {
     public int RegNo { get; set; }
      public String Name { get; set; }
      public String Email { get; set; }
      public String Department { get; set; }
      public String Degree { get; set; }
    }
}

包括一个搜索栏

在本节中，我们将创建一个搜索栏，并使其有效地工作。我们将使用bootstrap进行样式设计。

在显示学生名单的index razor页面中，我们将创建一个表单元素，我们将使用get请求来实现。

当我们输入下面的html 代码时，我们将在Students 领域创建一个搜索栏。

@page
@model StudentsCheckList.Pages.Students.IndexModel
@{ViewData["Title"] ="Index";
  ViewData["ShowButtons"] = true;
}
<style>
    .btn {
        width: 75px;
    }
</style>
<form method="get">
    <div class="input-group">
        <input class="form-control" asp-for ="SearchTerm" />
        <div class="input-group-append">
            <button type="submit" class="btn btn primary">Search</button>
        </div>
    </div>
</form>

现在，下一件事是使用下面的代码在page model class 中包含搜索词属性。

using StudentsCheckList.Services
using StudentsCheckList.Models;
namespace StudentsCheckList.Pages.Students
{
    public class IndexModel : PageModel
    {
        private readonly IStudentsRepository studentsRepository;
        public IEnumerable(IEnumerable Students { get; set; })
        {
            [BindProperty(supportsGet = true)]
            public String termToSearch { get; set; }
        }
        public void OnGet()
        {
        Students = studentsRepository.search(termToSearch);
        }
    }
}

现在，我们想要一个可以搜索和过滤学生的方法。这将在Students repository class 和mock Students class 中实现。

我们将在Students repository class ，下面的代码。

using StudentsCheckList.Models;
namespace StudentsCheckList.Services;
{
    public interface IStudentsRepository
    {
        IEnumerable<Students> Search(String termToSearch);
        IEnumerable<Students> GetAllStudents();
        Students GetStudents(int id);
    }
}

我们将在mock Students repository class 中添加下面的代码。

    public Students GetStudents(int id);
{
return _studentsList.FirstOrDefault(e=> e.id == id);
}
public IEnumerable<Students> Search(string termToSearch)
{
    return _studentsList;
}
public IEnumerable Search(string termToSearch)
    if(string.IsNullOrEmpty(termToSearch))
{
    return _studentsList;
}
{
    return _studentsList.Where(e => e.Name.Contains(termToSearch) ||

                                    e.Email.Contains(termToSearch) ||
                                    
                                    e.RegNo.Contains(termToSearch).toList();
};

当你调试网络应用时，搜索属性可以正常工作。

包括验证

在验证中，我们将看一下剃刀页面的客户端验证。

为了验证客户端的有效性，我们需要指定按以下顺序列出的三个脚本文件。

jquery.js
jquery.validate.js
jquery.unobtrusive.validate.js

如果你想在你的Web应用程序中的几个页面上进行客户端验证，那么就使用Layout file ，否则就在指定的razor页面上实现这些脚本。

在pages文件夹下，有一个Edit razor page文件夹，用于添加和编辑现有的学生。客户端验证只需要在这个页面上进行，所有的脚本文件都将被加载。

为了使上面的第二个和第三个文件有效，并且由于它们已经在partial view 文件中加载，它们需要在Edit 文件中使用下面的jQuery 代码进行渲染。

@section Scripts{
    <script>
    $(document).ready(function(){
        $(".custom-file-input").on("change", function(){
            var fileName = $(this).val().split("\\").pop();
            $(this).next(".custom-file-label").html(fileName);
        });
    });

    </script>
    <partial name = "_ValidationScriptsPartial" />
}

_ValidationScriptsPartial 是在解决方案资源管理器的文件夹中。shared

现在，当你填写一个表单时，所有的要求都必须满足，才能提交表单。

如果客户端验证在你的电脑上不工作，请检查以下情况。

如果你的浏览器中启用了JavaScript。
确认库文件在你测试的环境中已经加载。
确保这三个文件是以正确的顺序加载的。

总结

从本教程中可以看出，Razor pages是一个默认的、易于使用的框架，用于构建服务器端的、动态的、数据驱动的网页，具有明确的关注点分离。

如何使用ASP.NET Core的Razor Pages Web App教程