在ASP.NET Core Razor Pages中编辑学生信息

admin
admin
2022-03-02
分享:

在ASP.NET Core Razor Pages中编辑学生信息

导航:

在此视频中,我们将讨论实现“编辑“Razor Pages。

当我们单击学生列表 Razor Pages(/Student/Index.cshtml)上的“ 编辑”按钮时,我们要将请求重定向到“ 编辑“Razor Pages(/Student/Edit.cshtml)。

                <a  asp-page="/Students/Edit"  asp-route-ID="@student.Id" class="btn btn-primary m-1">编辑</a>

编辑 Razor Pages

将新的 Razor Pages添加到"Students"文件夹。将其命名为Edit.cshtml。从设计的角度来看,“编辑“Razor Pages应如下图所示。使用文本框编辑学生姓名和电子邮件以及Marjor的选择列表。

Edit.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using YoYoMooc.StudentManagement.Models;
using YoYoMooc.StudentManagement.Services;

namespace YoYoMooc.StudentManagement.RazorPage.Pages.Students
{
    public class EditModel : PageModel
    {
        private readonly IStudentRepository _studentRepository;

        public EditModel(IStudentRepository studentRepository)
        {
            this._studentRepository = studentRepository;
        }

        //这是显示模板将用于的属性,显示现有的学生数据
        public Student Student { get; set; }


        public IActionResult OnGet(int id)
        {
            Student = _studentRepository.GetStudent(id);

            if (Student == null)
            {
                return RedirectToPage("/NotFound");
            }

            return Page();
        }

    }
}


Edit.cshtml

如果您不熟悉Taghelper,我们将在我们的ASP.NET Core初学者教程中从第35至40部分详细讨论它们。

@page "{id:min(1)}"
@using YoYoMooc.StudentManagement.Models
@model EditModel
@{
    ViewData["Title"] = "编辑";

}

<h1>编辑学生</h1>

<form method="post" class="mt-3">
    @*使用隐藏的input标签来存储提交表单时需要的学生id*@
    <input hidden asp-for="Student.Id" />

    @*asp-for TagHelper 负责在处理在不同的标签中显示现有的数据*@
    <div class="form-group row">
        <label asp-for="Student.Name" class="col-sm-2 col-form-label">
        </label>
        <div class="col-sm-10">
            <input asp-for="Student.Name" class="form-control" placeholder="Name">
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="Student.Email" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Student.Email" class="form-control" placeholder="Email">
        </div>
    </div>

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

    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">更新</button>
            <a asp-page="/Students/Index" class="btn btn-primary">取消</a>
        </div>
    </div>
</form>

_ViewImports.cshtml中的更改

@using YoYoMooc.StudentManagement.Models