添加班级

在添加班级视图中，需要有2个下拉列表选择专业和年级，如图所示。

![image-20240818143221433](https://image.nyazira.top/Article/image-20240818143221433.png)

因此，在返回视图前，需要获取这2个下拉列表的数据。

# 添加GetSelectListModel方法

在ClassService中添加**GetSelectListModel**方法，该方法返回班级视图模型，并将下拉列表的数据放入视图模型中，供视图解析。

代码如下：

```
public ClassViewModel GetSelectListModel()
{
    ClassViewModel model = new ClassViewModel();

    List<Major> majors = majorRepo.GetList();
    model.Majors = new SelectList(majors, "Id", "Name");

    List<Grade> grades = gradeRepo.GetList();
    model.Grades = new SelectList(grades, "Id", "Name");

    return model;
}
```

`List<Major> majors = majorRepo.GetList();`获取了专业模型的列表。

`model.Majors = new SelectList(majors, "Id", "Name");`创建了一个**SelectList**，并以获取的专业模型列表为数据，设置**Id**属性为下拉列表的**value**值，**Name**属性为下拉列表的**文本**。

最后，将**SelectList**赋值给视图模型。

# 添加Add动作

在Add动作中，将classService中通过GetSelectListModel获取的模型返回给视图。

代码如下：

```
public IActionResult Add()
{
    return View(classService.GetSelectListModel());
}
```

# 添加Add视图

在Add视图中，设置好标题，模型，模型验证标签，并创建form表单。

代码如下：

```
@{
    ViewBag.Title = "添加班级";
}
@model ClassViewModel

<form method="post" class="mx-auto" style="width:320px;">
    <div asp-validation-summary="All" class="has-text-danger mb-4"></div>
    <div class="field">
        <label asp-for="MajorName" class="label"></label>
        <div class="control">
            <div class="select is-fullwidth">
                <select asp-for="MajorId" asp-items="Model.Majors"></select>
            </div>
        </div>
    </div>
    <div class="field">
        <label asp-for="GradeName" class="label"></label>
        <div class="control">
            <div class="select is-fullwidth">
                <select asp-for="GradeId" asp-items="Model.Grades"></select>
            </div>
        </div>
    </div>
    <div class="field">
        <label asp-for="Name" class="label"></label>
        <div class="control">
            <input asp-for="Name" class="input">
        </div>
    </div>
    <div class="field">
        <button class="button is-primary is-fullwidth">提交</button>
    </div>
</form>
```

其中，**asp-items**会解析**ClassViewModel**中的**SelectList**，将数据转换成对应的**option**标签。

# 添加Insert方法

将ClassViewModel转换为Class并插入数据库。

代码如下：

```
public void Insert(ClassViewModel model)
{
    Class @class = new Class()
    {
        GradeId = model.GradeId,
        MajorId = model.MajorId,
        Name = model.Name,
    };
    classRepo.Insert(@class);
}
```

> 由于class是C#中的关键字，因此不能直接使用class作为变量名
>
> 有2中解决方法：
>
> 1.将class写成clazz
>
> 2.在class前面加一个@，写成@class

# 添加post请求的Add动作

接收视图模型数据，并检验模型是否通过，如果通过则插入数据库，否则返回视图。

代码如下：

```
[HttpPost]
public IActionResult Add(ClassViewModel model)
{
    if (ModelState.IsValid)
    {
        classService.Insert(model);
        return RedirectToAction("Index");
    }
    return View(model);
}
```

### 解决模型验证不通过下拉列表为空的问题

如果此时不填班级名称直接提交，肯定是不会通过验证的。

但是问题出现了，就是这样操作之后，下拉列表里没数据了。

这是因为我们提交的数据中是没有下拉列表的数据Majors和Grades的，因此如果验证不通过，我们需要重新给Majors和Grades赋值。

最终代码如下：

```
[HttpPost]
public IActionResult Add(ClassViewModel model)
{
    if (ModelState.IsValid)
    {
        classService.Insert(model);
        return RedirectToAction("Index");
    }
    ClassViewModel selectListModel = classService.GetSelectListModel();
    model.Majors = selectListModel.Majors;
    model.Grades = selectListModel.Grades;
    return View(model);
}
```

添加班级