ABP入门系列（5）——展现层实现增删改查

最新推荐文章于 2024-08-15 15:59:22 发布

聖傑

最新推荐文章于 2024-08-15 15:59:22 发布

阅读量6.5k

点赞数 3

本文链接：https://blog.csdn.net/ysj1163620987/article/details/54909627

版权

本文是ABP入门系列的第五部分，详细介绍了如何在展现层实现增删改查功能。通过定义Controller、创建列表、新增、更新的分部视图，结合异步加载和Bootstrap-Modal技术，实现高效用户体验。文章涵盖了Controller的本地化、异常处理等功能，以及ViewModel的创建和Ajax操作。最后，展示了js代码中处理Ajax回调和任务状态过滤的实现细节。

摘要由CSDN通过智能技术生成

ABP入门系列目录——学习Abp框架之实操演练

这一章节将通过完善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.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";
}
<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