这一章节将通过完善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<LearningMpaAbp.Tasks.Dtos.TaskDto>
<div>
    <ul class="list-group">
        @foreach (var task in Model)
        {
            <li class="list-group-item">
                <div class="btn-group pull-right">
                    <button type="button" class="btn btn-info" onclick="editTask(@task.Id);">Edit</button>
                    <button type="button" class="btn btn-success" onclick="deleteTask(@task.Id);">Delete</button>
                </div>

                <div class="media">
                    <a class="media-left" href="#">
                        <i class="fa @task.GetTaskLable() fa-3x"></i>
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">@task.Title</h4>
                        <p class="text-info">@task.AssignedPersonName</p>
                        <span class="text-muted">@task.CreationTime.ToString("yyyy-MM-dd HH:mm:ss")</span>
                    </div>
                </div>

            </li>
        }
    </ul>
</div>

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

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

1,引入js文件

使用异步提交需要引入jquery.validate.unobtrusive.min.jsjquery.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";
}
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="createTask" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Create Task</h4>
            </div>
            <div class="modal-body" id="modalContent">

                @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()
                    <div class="form-horizontal">
                        <h4>Task</h4>
                        <hr />
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        <div class="form-group">
                            @Html.LabelFor(model => model.AssignedPersonId, "AssignedPersonId", htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.DropDownList("AssignedPersonId", null, htmlAttributes: new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.AssignedPersonId, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EnumDropDownListFor(model => model.State, htmlAttributes: new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="submit" class="btn btn-default">Create</button>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

对应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";
}

<div class="modal fade" id="editTask" tabindex="-1" role="dialog" aria-labelledby="editTask" data-backdrop="static">

    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Edit Task</h4>
            </div>
            <div class="modal-body" id="modalContent">

                @using (Ajax.BeginForm("Edit", "Tasks", new AjaxOptions()
                {
                    UpdateTargetId = "taskList",
                    InsertionMode = InsertionMode.Replace,
                    OnBegin = "beginPost('#editTask')",
                    OnSuccess = "hideForm('#editTask')"
                }))
                {
                    @Html.AntiForgeryToken()

                    <div class="form-horizontal">
                        <h4>Task</h4>
                        <hr />
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        @Html.HiddenFor(model => model.Id)

                        <div class="form-group">
                                @Html.LabelFor(model => model.AssignedPersonId, "AssignedPersonId", htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.DropDownList("AssignedPersonId", null, htmlAttributes: new { @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.AssignedPersonId, "", new { @class = "text-danger" })
                                </div>
                            </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EnumDropDownListFor(model => model.State, htmlAttributes: new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <input type="submit" value="Save" class="btn btn-default" />
                            </div>
                        </div>
                    </div>
                }

            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //该段代码十分重要,确保异步调用后jquery能正确执行验证逻辑
    $(function () {
        //allow validation framework to parse DOM
        $.validator.unobtrusive.parse('form');
    });
</script>

后台代码:

public PartialViewResult Edit(int id)
{
    var task = _taskAppService.GetTaskById(id);

    var updateTaskDto = AutoMapper.Mapper.Map<UpdateTaskInput>(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
    {
        /// <summary>
        /// 用来进行绑定列表过滤状态
        /// </summary>
        public TaskState? SelectedTaskState { get; set; }

        /// <summary>
        /// 列表展示
        /// </summary>
        public IReadOnlyList<TaskDto> Tasks { get; }

        /// <summary>
        /// 创建任务模型
        /// </summary>
        public CreateTaskInput CreateTaskInput { get; set; }

        /// <summary>
        /// 更新任务模型
        /// </summary>
        public UpdateTaskInput UpdateTaskInput { get; set; }

        public IndexViewModel(IReadOnlyList<TaskDto> items)
        {
            Tasks = items;
        }

        /// <summary>
        /// 用于过滤下拉框的绑定
        /// </summary>
        /// <returns></returns>

        public List<SelectListItem> GetTaskStateSelectListItems()
        {
            var list=new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Text = "AllTasks",
                    Value = "",
                    Selected = SelectedTaskState==null
                }
            };

            list.AddRange(Enum.GetValues(typeof(TaskState))
                .Cast<TaskState>()
                .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");
}
<h2>
    @L("TaskList")

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">Create Task</button>

    <a class="btn btn-primary" data-toggle="modal" href="@Url.Action("RemoteCreate")" data-target="#modal" role="button">(Create Task)使用Remote方式调用Modal进行展现</a>

    <!--任务清单按照状态过滤的下拉框-->
    <span class="pull-right">
        @Html.DropDownListFor(
            model => model.SelectedTaskState,
            Model.GetTaskStateSelectListItems(),
            new
            {
                @class = "form-control select2",
                id = "TaskStateCombobox"
            })
    </span>
</h2>

<!--任务清单展示-->
<div class="row" id="taskList">
    @{ Html.RenderPartial("_List", Model.Tasks); }
</div>

<!--通过初始加载页面的时候提前将创建任务模态框加载进来-->
@Html.Action("Create")

<!--编辑任务模态框通过ajax动态填充到此div中-->
<div id="edit">

</div>

<!--Remote方式弹出创建任务模态框-->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="createTask" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

        </div>
    </div>
</div>

3,Remote方式创建任务讲解

Remote方式就是,点击按钮的时候去加载创建任务的PartialView到指定的div中。而我们代码中另一种方式是通过@Html.Action("Create")的方式,在加载Index的视图的作为子视图同步加载了进来。
感兴趣的同学自行查看源码,不再讲解。

<a class="btn btn-primary" data-toggle="modal" href="@Url.Action("RemoteCreate")" data-target="#modal" role="button">(Create Task)使用Remote方式调用Modal进行展现</a>

<!--Remote方式弹出创建任务模态框-->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="createTask" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

        </div>
    </div>
</div>

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方能进行前端验证。

<script type="text/javascript">
    $(function () {
        //allow validation framework to parse DOM
        $.validator.unobtrusive.parse('form');
    });
</script>

源码已上传至Github-LearningMpaAbp,可自行参考。
ABP入门系列目录——学习Abp框架之实操演练

ABP入门系列(6)——展现层实现增删改查的更多相关文章

  1. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  2. ABP入门系列(4)——领域层定义仓储并实现

    一.先来介绍下仓储 仓储(Repository): 仓储用来操作数据库进行数据存取.仓储接口在领域层定义,而仓储的实现类应该写在基础设施层. 在ABP中,仓储类要实现IRepository接口,接口定 ...

  3. ABP入门系列(3)——领域层创建实体

    这一节我们主要和领域层打交道.首先我们要对ABP的体系结构以及从模板创建的解决方案进行一一对应.网上有代码生成器去简化我们这一步的任务,但是不建议初学者去使用. 一.首先来看看ABP体系结构 领域层就 ...

  4. ABP入门系列(7)——分页实现

    ABP入门系列目录--学习Abp框架之实操演练 完成了任务清单的增删改查,咱们来讲一讲必不可少的的分页功能. 首先很庆幸ABP已经帮我们封装了分页实现,实在是贴心啊. 来来来,这一节咱们就来捋一捋如何 ...

  5. ABP入门系列(6)——定义导航菜单

    ABP入门系列目录--学习Abp框架之实操演练 完成了增删改查以及页面展示,这一节我们来为任务清单添加[导航菜单]. 在以往的项目中,大家可能会手动在layout页面中添加一个a标签来新增导航菜单,这 ...

  6. ABP入门系列(5)——创建应用服务

    一.解释下应用服务层 应用服务用于将领域(业务)逻辑暴露给展现层.展现层通过传入DTO(数据传输对象)参数来调用应用服务,而应用服务通过领域对象来执行相应的业务逻辑并且将DTO返回给展现层.因此,展现 ...

  7. ABP入门系列(13)——Redis缓存用起来

    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1. 引言 创建任务时我们需要指定分配给谁,Demo中我们使用一个下拉列表用来显示当前系统的所有用 ...

  8. ABP入门系列(18)—— 使用领域服务

    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1.引言 自上次更新有一个多月了,发现越往下写,越不知如何去写.特别是当遇到DDD中一些概念术语的 ...

  9. ABP入门系列(9)——权限管理

    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 完成了简单的增删改查和分页功能,是不是觉得少了点什么? 是的,少了权限管理.既然涉及到了权限,那我 ...

随机推荐

  1. iOS开发UI篇—核心动画(转场动画和组动画)

    转自:http://www.cnblogs.com/wendingding/p/3801454.html iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的 ...

  2. Archlinux 上 Nginx + PHP + Mariadb + DiscuzX2.5 安装小记

    因为不好找下载集成服务器工具,而且他们自己又打包了一份 php 之类的程序,本身系统就已经有 php 还有数据库什么的了再搞一份受不了,最后选择了手动配置…… 这是一个在 Archlinux 上手动从 ...

  3. 沉浸式状态栏_boolean hasTopLine = a.getBoolean(1, false);//AS会在&quot;1&quot;下显示错误红线

    TypedArray a = mContext.obtainStyledAttributes(attrs); boolean hasBottomLine = a.getBoolean(0, false ...

  4. 关于HTML面试题汇总

    一.doctype的作用,严格与混杂模式的区别,有何意义 1.语法格式:<!DOCTYPE html> 2.<!DOCTYPE>不是Html标签,而是告知浏览器此页面使用哪个H ...

  5. 实验三 敏捷开发与XP实践

    实验内容 1. XP基础 2. XP核心实践 3. 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2.完成实验 ...

  6. mongodb 安装后 出现警告:** WARNING: soft rlimits too low. Number of files is 256, should be at least 1000

    警告问题:当前mongodb 支持的最大文件数有256个,但是推荐至少1024个. 解决办法: 1.关闭现在打开的mongodb 终端窗口 2.重新打开终端并运行一下命令: sudo launchct ...

  7. ContentProvider总结

    一.使用ContentProvider(内容提供者)共享数据 ContentProvider在android中的作用是对外共享数据,也就是说你可以通过ContentProvider把应用中的数据共享给 ...

  8. js中关于动态添加事件,不能使用循环变量的问题

    在编写事件的时候,我们难免会遇到以下这种情况:<!DOCTYPE html><html lang="en"><head> <meta ch ...

  9. javascript 对象和数组(花括号、方括号)

    1. javascript对象定义 var a = {var a = "test", var b = "test"} 2. javascript数组定义 var ...

  10. 比较器comparable与comparator的使用

    在Java学习和使用里,工具类与算法类(collections和Arrays)也是我们使用比较多的,在它们里面就包含了comparable与comparator这两种比较器. 一.比较器的分类与概念 ...