ASP.NET Core 中的学生编辑视图

admin

2021-06-03

本文作者：梁桐铭- 微软最有价值专家(Microsoft MVP)
本文出自《从零开始学 ASP.NET Core 与 EntityFramework Core》目录
视频课程效果更佳：跨平台开发实战掌握 ASP.NET Core 与 EntityFramework Core

ASP.NET Core 中的学生编辑视图

在本章节，我们将学习如何修改Edit.cshtml来保存已存在是数据信息。

我们希望在编辑视图中显示现有学生数据信息。用户可以更改学生详细信息，然后单击"更新"按钮以更新数据库中的数据。

本章的任务：

完成编辑视图页面。
用户点击取消的时候，重定向到列表视图。

导航到编辑视图

以下是我们的学生列表。

list

当我们点击编辑按钮的时候，我们希望能跳转到 Edit 视图页面。所以我们需要在 Index.cshtml 中修改编辑标签代码，如下所示：

<a
  asp-controller="home"
  asp-action="edit"
  asp-route-id="@student.Id"
  class="btn btn-primary m-1"
  >编辑</a
>

上面的代码，实现了通过传递学生的 id 到 HomeController 中的 Edit 操作方法，涉及到了以下几个 taghelper。

asp-controller 帮助程序定位到指定的控制器
asp-action 在控制器中解析到对应的操作方法
asp-route-* 完成路由中的数据传递

上面的代码生成一个如下所示的 edit 是 HomeController 中的 action 方法， 1 是正在编辑的学生的 ID。

http://localhost/home/edit/1

编辑视图模型

在ViewModels文件夹中添加StudentEditViewModel类,包含以下代码：


 public class StudentEditViewModel : StudentCreateViewModel
    {
        public int Id { get; set; }
        public string ExistingPhotoPath { get; set; }
    }

您可以参考StudentCreateViewModel中的代码：

  [Required(ErrorMessage = "请输入名字"), MaxLength(50, ErrorMessage = "名字的长度不能超过50个字符")]
        [Display(Name = "名字")]
        public string Name { get; set; }
        [Required]
        [Display(Name = "主修科目")]
        public MajorEnum? Major { get; set; }

        [Display(Name = "电子邮件")]
        [RegularExpression(@"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$",
        ErrorMessage = "邮箱的格式不正确")]
        [Required(ErrorMessage = "请输入邮箱地址")]
        public string Email { get; set; }

        [Display(Name = "图像")]
        public IFormFile Photo { get; set; }

我们的StudentEditViewModel类是通过继承StudentCreateViewModel完成的:

此视图模型包含Edit视图所需的数据
StudentEditViewModel 类派生自 StudentCreateViewModel。
我们使用继承方法，以便不重复代码
此外，我们除了继承 StudentCreateViewModel 类中的属性，我们还需要在 StudentEditViewModel类中添加学生的编号和 ExistingPhotoPath 的属性。

完善 HomeController 中的 Edit 操作方法

Edit 操作方法代码如下：

    [HttpGet]
        public ViewResult Edit(int id)
        {
            Student student = _studentRepository.GetStudent(id);
            StudentEditViewModel studentEditViewModel = new StudentEditViewModel
            {
                Id = student.Id,
                Name = student.Name,
                Email = student.Email,
                Major = student.Major,
                ExistingPhotoPath = student.PhotoPath
            };
            return View(studentEditViewModel);
        }

该方法的作用如下：

此 Edit 操作方法响应 GET 请求。
它使用注入的 StudentRepository 实例来查询学生详细信息。
通过实例化 StudentEditViewModel，将学生信息传递给 Edit 视图。

Edit 视图页面

可以看看以下代码，我们都添加了注释，阐述的很清晰了。

@model  StudentEditViewModel

@{
    ViewBag.Title = "编辑学生信息";
   //获取当前学生照片的完整路径
    var photoPath = "~/images/" + (Model.ExistingPhotoPath ?? "noimage.png");
}


    <form enctype="multipart/form-data" asp-controller="home" asp-action="edit" method="post" class="mt-3">
        <div asp-validation-summary="All" class="text-danger"></div>
        @*
        当我们提交表单和更新数据库中的数据时需要以下两个属性，但是又不需要用户看到他们，所以我们使用隐藏的Input标签来存储员工id和ExistingPhotoPath*@
        <input hidden asp-for="Id"/>
        <input hidden asp-for="ExistingPhotoPath"/>
        @*采用asp-for 的 TagHelper绑定StudentEditViewModel的属性，它们会负责在相应的输入元素中显示现有数据*@
        <div class="form-group row">
            <label asp-for="Name" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <input asp-for="Name" class="form-control" placeholder="请输入名字"/>
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
        </div>

        <div class="form-group row">
            <label asp-for="Email" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <input asp-for="Email" class="form-control" placeholder="请输入邮箱地址">
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
        </div>

        <div class="form-group row">
            <label asp-for="Major" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <select asp-for="Major" class="custom-select mr-sm-2"
                        asp-items="Html.GetEnumSelectList<MajorEnum>()">
                    <option value=""> 请选择</option>
                </select>
                <span asp-validation-for="Major" class="text-danger"></span>
            </div>
        </div>

        <div class="form-group row">
            <label asp-for="Photo" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <div class="custom-file">
                    <input asp-for="Photo" class="form-control custom-file-input">
                    <label class="custom-file-label">点击修改图片</label>
                </div>
            </div>
        </div>

        @*用于显示当前学生的照片信息*@
        <div class="form-group row col-sm-4 offset-4">
            <img class="imageThumbnail" src="@photoPath" asp-append-version="true"/>
        </div>

        <div class="form-group row">
            <div class="col-sm-10">
                <button type="submit" class="btn btn-primary">更新</button>
                <a asp-action="index" asp-controller="home" class="btn btn-primary">取消</a>
            </div>
        </div>
        @*以下JavaScript代码的作用是，可以在上传标签中显示选定的上传文件名称。*@

        @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>
        }
    </form>