在添加班级视图中,需要有2个下拉列表选择专业和年级,如图所示。
因此,在返回视图前,需要获取这2个下拉列表的数据。
在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动作中,将classService中通过GetSelectListModel获取的模型返回给视图。
代码如下:
public IActionResult Add()
{
return View(classService.GetSelectListModel());
}
在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标签。
将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
接收视图模型数据,并检验模型是否通过,如果通过则插入数据库,否则返回视图。
代码如下:
[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);
}