ASP.NET Core MVC（四）Controller、View与Model之间的交互

一、创建Model

我们先创建一个Model：

    public class Student
    {
        public int ID { get; set; }
        public string Name { get; set; }

        public GenderTypeE Gender { get; set; }

        public DateTime Birthday { get; set; }
    }

public enum GenderTypeE
{
    Female,
    Male
}

然后我们模拟一个数据库上下文，在本地与数据进行交互：

    public interface IStudentContext
    {
        IList<Student> Students { get; set; }
    }

    public class StudentContext : IStudentContext
    {
        public StudentContext()
        {
            Students = new List<Student>()
            {
                new Student { ID = 099, Name = "bobo", Gender = GenderTypeE.Female, Birthday = DateTime.Now },
                new Student { ID = 099, Name = "bobo", Gender = GenderTypeE.Female, Birthday = DateTime.Now },
                new Student { ID = 099, Name = "bobo", Gender = GenderTypeE.Female, Birthday = DateTime.Now },
                new Student { ID = 099, Name = "bobo", Gender = GenderTypeE.Female, Birthday = DateTime.Now },
                new Student { ID = 099, Name = "bobo", Gender = GenderTypeE.Female, Birthday = DateTime.Now },
            };
        }

        public IList<Student> Students { get; set; }
    }

最后需要注册到服务中：

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews().AddXmlSerializerFormatters();

            services.AddSingleton<IStudentContext, StudentContext>();
        }

二、创建Controller

2.1 Display

    public class StudentController : Controller
    {
        private readonly IStudentContext studentContext;
        public StudentController(IStudentContext student)
        {
            studentContext = student;
        }

        public IActionResult Index()
        {
            return View(studentContext.Students);
        }
    }

在构造函数中注入了依赖，Index方法主要用于展现student列表，使用了强类型视图Index.cshtml。

@model IEnumerable<mvc.Models.Student>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Gender)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Birthday)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Gender)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Birthday)
                </td>
            </tr>
        }
    </tbody>
</table>

2.2 Create

上面示例是我们初始化的时候在Student集合中添加了一些元素，那么我们如何动态添加呢？所以我们先要在Index.cshtml中添加：

    <p>
        <a asp-action="Create">Create New</a>
    </p>

然后在Controller中添加Create方法

        public IActionResult Create()
        {
            return View();
        }

然后我们需要定义Create.cshtml，这个视图中需要填入Student的属性，然后传递给Controller。

@model mvc.Models.Student
<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="ID" class="control-label"></label>
        <input asp-for="ID" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Gender" class="control-label"></label>
        <select asp-for="Gender" asp-items="@Html.GetEnumSelectList(typeof(GenderTypeE))" class="selectpicker form-control"></select>
    </div>
    <div class="form-group">
        <label asp-for="Birthday" class="control-label"></label>
        <input asp-for="Birthday" class="form-control" />
    </div>
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
</form>

当我们输入属性值后，再点击Create按钮，就把这个值提交给模拟数据库，那么这一段逻辑该怎么实现呢？显然，如果现在点击Create按钮，只会触发我们已经存在的Create方法，这个方法当然也不是我们需要的。

        [HttpPost]
        public IActionResult Create([Bind("ID,Name,Gender,Birthday")] Student stu)
        {
            if (ModelState.IsValid)
            {
                studentContext.Students.Add(stu);
            }
            return RedirectToAction(nameof(Index));
        }

首先需要HttpPost特性标记，然后方法参数中使用了Bind特性。

2.3 Delete

那么我们如何删除一条数据呢？首先我们需要在Index视图中添加一些操作导航：

        <tbody>
            @foreach (var item in Model)
            {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Gender)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Birthday)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |
                    <a asp-action="Delete" asp-route-id="@item.ID">Delete</a>
                </td>
            </tr>
            }
        </tbody>

操作导航action都传递一个id参数。

    public IActionResult Delete(int id)
    {
        var stu = studentContext.Students.First(s => s.ID == id);

        studentContext.Students.Remove(stu);

        return RedirectToAction(nameof(Index));
    }

2.4 Edit

@model mvc.Models.Student
<form asp-action="Edit">
    <div  class="form-group">
        <input type="hidden" asp-for="ID" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Gender" class="control-label"></label>
        <select asp-for="Gender" asp-items="@Html.GetEnumSelectList(typeof(GenderTypeE))" class="selectpicker form-control"></select>
    </div>
    <div class="form-group">
        <label asp-for="Birthday" class="control-label"></label>
        <input asp-for="Birthday" class="form-control" />
    </div>
    <div class="form-group">
        <input type="submit" value="Save" class="btn btn-primary" />
    </div>
</form>

    public IActionResult Edit(int id)
    {
        var stu = studentContext.Students.First(s => s.ID == id);
        if (null != stu)
            return View(stu);

        return RedirectToAction(nameof(Index));
    }

    [HttpPost]
    public IActionResult Edit([Bind("ID,Name,Gender,Birthday")] Student stu)
    {
        var student = studentContext.Students.First(s => s.ID == stu.ID);
        if (student != null)
        {
            student.ID = stu.ID;
            student.Name = stu.Name;
            student.Gender = stu.Gender;
            student.Birthday = stu.Birthday;
        }
           
        return RedirectToAction(nameof(Index));
    }

    if (student != null)
    {
        student.ID = stu.ID;
        student.Name = stu.Name;
        student.Gender = stu.Gender;
        student.Birthday = stu.Birthday;
    }
       
    return RedirectToAction(nameof(Index));
}

点击Edit的时候需要将该student传递给视图，如何点击Save的时候，需要将stu深拷贝给集合中对应的student。