html5显示隐藏层的几种方法,ABP入门系列（5）——展现层实现增删改查

这一章节将通过完善Controller、View、ViewModel，来实现展现层的增删改查。最终实现效果如下图：

展现层最终效果

一、定义Controller

ABP对ASP.NET MVC Controllers进行了集成，通过引入Abp.Web.Mvc命名空间，创建Controller继承自AbpController， 我们即可使用ABP附加给我们的以下强大功能：

本地化

异常处理

对返回的JsonResult进行包装

审计日志

权限认证([AbpMvcAuthorize]特性)

工作单元(默认未开启，通过添加[UnitOfWork]开启)

1，创建TasksController继承自AbpController

通过构造函数注入对应用服务的依赖。

[AbpMvcAuthorize]

public class TasksController : AbpController

{

private readonly ITaskAppService _taskAppService;

private readonly IUserAppService _userAppService;

public TasksController(ITaskAppService taskAppService, IUserAppService userAppService)

{

_taskAppService = taskAppService;

_userAppService = userAppService;

}

}

二、创建列表展示分部视图(_List.cshtml)

在分部视图中，我们通过循环遍历，输出任务清单。

@model IEnumerable

@foreach (var task in Model)

{

Edit

Delete

@task.Title

@task.AssignedPersonName

@task.CreationTime.ToString("yyyy-MM-dd HH:mm:ss")

}

列表显示效果

三，创建新增分部视图(_CreateTask.cshtml)

为了好的用户体验，我们采用异步加载的方式来实现任务的创建。

1，引入js文件

使用异步提交需要引入jquery.validate.unobtrusive.min.js和jquery.unobtrusive-ajax.min.js，其中jquery.unobtrusive-ajax.min.js，需要通过Nuget安装微软的Microsoft.jQuery.Unobtrusive.Ajax包获取。

然后通过捆绑一同引入到视图中。打开App_Start文件夹下的BundleConfig.cs，添加以下代码：

bundles.Add(

new ScriptBundle("~/Bundles/unobtrusive/js")

.Include(

"~/Scripts/jquery.validate.unobtrusive.min.js",

"~/Scripts/jquery.unobtrusive-ajax.min.js"

)

);

找到Views/Shared/_Layout.cshtml，添加对捆绑的js引用。

@Scripts.Render("~/Bundles/vendor/js/bottom")

@Scripts.Render("~/Bundles/js")

//在此处添加下面一行代码

@Scripts.Render("~/Bundles/unobtrusive/js")

2，创建分部视图

其中用到了Bootstrap-Modal，Ajax.BeginForm，对此不了解的可以参考

Ajax.BeginForm()知多少

Bootstrap-Modal的用法介绍

该Partial View绑定CreateTaskInput模型。最终_CreateTask.cshtml代码如下：

@model LearningMpaAbp.Tasks.Dtos.CreateTaskInput

@{

ViewBag.Title = "Create";

}

×Close

Create Task

@using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions()

{

UpdateTargetId = "taskList",

InsertionMode = InsertionMode.Replace,

OnBegin = "beginPost('#add')",

OnSuccess = "hideForm('#add')",

OnFailure = "errorPost(xhr, status, error,'#add')"

}))

{

@Html.AntiForgeryToken()

Task

---

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.AssignedPersonId, "AssignedPersonId", htmlAttributes: new { @class = "control-label col-md-2" })

@Html.DropDownList("AssignedPersonId", null, htmlAttributes: new { @class = "form-control" })

@Html.ValidationMessageFor(model => model.AssignedPersonId, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EnumDropDownListFor(model => model.State, htmlAttributes: new { @class = "form-control" })

@Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })

Create

}

对应Controller代码：

[ChildActionOnly]

public PartialViewResult Create()

{

var userList = _userAppService.GetUsers();

ViewBag.AssignedPersonId = new SelectList(userList.Items, "Id", "Name");

return PartialView("_CreateTask");

}

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Create(CreateTaskInput task)

{

var id = _taskAppService.CreateTask(task);

var input = new GetTasksInput();

var output = _taskAppService.GetTasks(input);

return PartialView("_List", output.Tasks);

}

四、创建更新分部视图(_EditTask.cshtml)

同样，该视图也采用异步更新方式，也采用Bootstrap-Modal，Ajax.BeginForm()技术。该Partial View绑定UpdateTaskInput模型。

@model LearningMpaAbp.Tasks.Dtos.UpdateTaskInput

@{

ViewBag.Title = "Edit";

}

×Close

Edit Task

@using (Ajax.BeginForm("Edit", "Tasks", new AjaxOptions()

{

UpdateTargetId = "taskList",

InsertionMode = InsertionMode.Replace,

OnBegin = "beginPost('#editTask')",

OnSuccess = "hideForm('#editTask')"

}))

{

@Html.AntiForgeryToken()

Task

---

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.HiddenFor(model => model.Id)

@Html.LabelFor(model => model.AssignedPersonId, "AssignedPersonId", htmlAttributes: new { @class = "control-label col-md-2" })

@Html.DropDownList("AssignedPersonId", null, htmlAttributes: new { @class = "form-control" })

@Html.ValidationMessageFor(model => model.AssignedPersonId, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EnumDropDownListFor(model => model.State, htmlAttributes: new { @class = "form-control" })

@Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })

}

//该段代码十分重要，确保异步调用后jquery能正确执行验证逻辑

$(function () {

//allow validation framework to parse DOM

$.validator.unobtrusive.parse('form');

});

后台代码：

public PartialViewResult Edit(int id)

{

var task = _taskAppService.GetTaskById(id);

var updateTaskDto = AutoMapper.Mapper.Map(task);

var userList = _userAppService.GetUsers();

ViewBag.AssignedPersonId = new SelectList(userList.Items, "Id", "Name", updateTaskDto.AssignedPersonId);

return PartialView("_EditTask", updateTaskDto);

}

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Edit(UpdateTaskInput updateTaskDto)

{

_taskAppService.UpdateTask(updateTaskDto);

var input = new GetTasksInput();

var output = _taskAppService.GetTasks(input);

return PartialView("_List", output.Tasks);

}

五，创建Index视图

在首页中，我们一般会用来展示列表，并通过弹出模态框的方式来进行新增更新删除。为了使用ASP.NET MVC强视图带给我们的好处(模型绑定、输入校验等等)，我们需要创建一个ViewModel来进行模型绑定。因为Abp提倡为每个不同的应用服务提供不同的Dto进行数据交互，新增对应CreateTaskInput，更新对应UpdateTaskInput，展示对应TaskDto。那我们创建的ViewModel就需要包含这几个模型，方可在一个视图中完成多个模型的绑定。

1，创建视图模型(IndexViewModel)

namespace LearningMpaAbp.Web.Models.Tasks

{

public class IndexViewModel

{

///

/// 用来进行绑定列表过滤状态

///

public TaskState? SelectedTaskState { get; set; }

///

/// 列表展示

///

public IReadOnlyList Tasks { get; }

///

/// 创建任务模型

///

public CreateTaskInput CreateTaskInput { get; set; }

///

/// 更新任务模型

///

public UpdateTaskInput UpdateTaskInput { get; set; }

public IndexViewModel(IReadOnlyList items)

{

Tasks = items;

}

///

/// 用于过滤下拉框的绑定

///

///

public List GetTaskStateSelectListItems()

{

var list=new List()

{

new SelectListItem()

{

Text = "AllTasks",

Value = "",

Selected = SelectedTaskState==null

}

};

list.AddRange(Enum.GetValues(typeof(TaskState))

.Cast()

.Select(state=>new SelectListItem()

{

Text = $"TaskState_{state}",

Value = state.ToString(),

Selected = state==SelectedTaskState

})

);

return list;

}

}

}

2，创建视图

Index视图，通过加载Partial View的形式，将列表、新增视图一次性加载进来。

@using Abp.Web.Mvc.Extensions

@model LearningMpaAbp.Web.Models.Tasks.IndexViewModel

@{

ViewBag.Title = L("TaskList");

ViewBag.ActiveMenu = "TaskList"; //Matches with the menu name in SimpleTaskAppNavigationProvider to highlight the menu item

}

@section scripts{

@Html.IncludeScript("~/Views/Tasks/index.js");

}

@L("TaskList")

Create Task

(Create Task)使用Remote方式调用Modal进行展现

@Html.DropDownListFor(

model => model.SelectedTaskState,

Model.GetTaskStateSelectListItems(),

new

{

@class = "form-control select2",

id = "TaskStateCombobox"

})

@{ Html.RenderPartial("_List", Model.Tasks); }

@Html.Action("Create")

3，Remote方式创建任务讲解

Remote方式就是，点击按钮的时候去加载创建任务的PartialView到指定的div中。而我们代码中另一种方式是通过@Html.Action("Create")的方式，在加载Index的视图的作为子视图同步加载了进来。

感兴趣的同学自行查看源码，不再讲解。

(Create Task)使用Remote方式调用Modal进行展现

4，后台代码

public ActionResult Index(GetTasksInput input)

{

var output = _taskAppService.GetTasks(input);

var model = new IndexViewModel(output.Tasks)

{

SelectedTaskState = input.State

};

return View(model);

}

5，js代码(index.js)

var taskService = abp.services.app.task;

(function ($) {

$(function () {

var $taskStateCombobox = $('#TaskStateCombobox');

$taskStateCombobox.change(function () {

getTaskList();

});

var $modal = $(".modal");

//显示modal时，光标显示在第一个输入框

$modal.on('shown.bs.modal',

function () {

$modal.find('input:not([type=hidden]):first').focus();

});

});

})(jQuery);

//异步开始提交时，显示遮罩层

function beginPost(modalId) {

var $modal = $(modalId);

abp.ui.setBusy($modal);

}

//异步开始提交结束后，隐藏遮罩层并清空Form

function hideForm(modalId) {

var $modal = $(modalId);

var $form = $modal.find("form");

abp.ui.clearBusy($modal);

$modal.modal("hide");

//创建成功后，要清空form表单

$form[0].reset();

}

//处理异步提交异常

function errorPost(xhr, status, error, modalId) {

if (error.length>0) {

abp.notify.error('Something is going wrong, please retry again later!');

var $modal = $(modalId);

abp.ui.clearBusy($modal);

}

}

function editTask(id) {

abp.ajax({

url: "/tasks/edit",

data: { "id": id },

type: "GET",

dataType: "html"

})

.done(function (data) {

$("#edit").html(data);

$("#editTask").modal("show");

})

.fail(function (data) {

abp.notify.error('Something is wrong!');

});

}

function deleteTask(id) {

abp.message.confirm(

"是否删除Id为" + id + "的任务信息",

function (isConfirmed) {

if (isConfirmed) {

taskService.deleteTask(id)

.done(function () {

abp.notify.info("删除任务成功！");

getTaskList();

});

}

}

);

}

function getTaskList() {

var $taskStateCombobox = $('#TaskStateCombobox');

var url = '/Tasks/GetList?state=' + $taskStateCombobox.val();

abp.ajax({

url: url,

type: "GET",

dataType: "html"

})

.done(function (data) {

$("#taskList").html(data);

});

}

js代码中处理了Ajax回调函数，以及任务状态过滤下拉框更新事件，编辑、删除任务代码。其中getTaskList()函数是用来异步刷新列表，对应调用的GetList()Action的后台代码如下：

public PartialViewResult GetList(GetTasksInput input)

{

var output = _taskAppService.GetTasks(input);

return PartialView("_List", output.Tasks);

}

六、总结

至此，完成了任务的增删改查。展现层主要用到了Asp.net mvc的强类型视图、Bootstrap-Modal、Ajax异步提交技术。

其中需要注意的是，在异步加载表单时，需要添加以下js代码，jquery方能进行前端验证。

$(function () {

//allow validation framework to parse DOM

$.validator.unobtrusive.parse('form');

});