大致要实现的 效果如下

1,添加Controller(用到的X.PagedList 注意到nuget添加)

using System.Web.Mvc;
using Abp.Application.Services.Dto;
using Abp.Runtime.Caching;
using Abp.Threading;
using Abp.Web.Mvc.Authorization;
using AutoMapper;
using LearningMpaAbp.Notifications;
using LearningMpaAbp.Tasks;
using LearningMpaAbp.Tasks.Dtos;
using LearningMpaAbp.Users;
using LearningMpaAbp.Users.Dto;
using LearningMpaAbp.Web.Models.Tasks;
using X.PagedList; namespace LearningMpaAbp.Web.Controllers
{
[AbpMvcAuthorize]
public class TasksController : LearningMpaAbpControllerBase
{
private readonly ITaskAppService _taskAppService;
private readonly IUserAppService _userAppService;
private readonly INotificationAppService _notificationAppService;
private readonly ICacheManager _cacheManager; public TasksController(ITaskAppService taskAppService, IUserAppService userAppService, ICacheManager cacheManager, INotificationAppService notificationAppService)
{
_taskAppService = taskAppService;
_userAppService = userAppService;
_cacheManager = cacheManager;
_notificationAppService = notificationAppService;
} public ActionResult Index(GetTasksInput input)
{
var output = _taskAppService.GetTasks(input); var model = new IndexViewModel(output.Tasks)
{
SelectedTaskState = input.State
};
return View(model);
} // GET: Tasks
public ActionResult PagedList(int? page)
{
//每页行数
var pageSize = 5;
var pageNumber = page ?? 1; //第几页 var filter = new GetTasksInput
{
SkipCount = (pageNumber - 1) * pageSize, //忽略个数
MaxResultCount = pageSize
};
var result = _taskAppService.GetPagedTasks(filter); //已经在应用服务层手动完成了分页逻辑,所以需手动构造分页结果
var onePageOfTasks = new StaticPagedList<TaskDto>(result.Items, pageNumber, pageSize, result.TotalCount);
//将分页结果放入ViewBag供View使用
ViewBag.OnePageOfTasks = onePageOfTasks; return View();
} public PartialViewResult GetList(GetTasksInput input)
{
var output = _taskAppService.GetTasks(input);
return PartialView("_List", output.Tasks);
} /// <summary>
/// 获取创建任务分部视图
/// 该方法使用ICacheManager进行缓存,在WebModule中配置缓存过期时间为10mins
/// </summary>
/// <returns></returns>
public PartialViewResult RemoteCreate()
{
//1.1 注释该段代码,使用下面缓存的方式
//var userList = _userAppService.GetUsers(); //1.2 同步调用异步解决方案(最新Abp创建的模板项目已经去掉该同步方法,所以可以通过下面这种方式获取用户列表)
//var userList = AsyncHelper.RunSync(() => _userAppService.GetUsersAsync()); //1.3 缓存版本
var userList = _cacheManager.GetCache("ControllerCache").Get("AllUsers", () => _userAppService.GetUsers()); //1.4 转换为泛型版本
//var userList = _cacheManager.GetCache("ControllerCache").AsTyped<string, ListResultDto<UserListDto>>().Get("AllUsers", () => _userAppService.GetUsers()); //1.5 泛型缓存版本
//var userList = _cacheManager.GetCache<string, ListResultDto<UserListDto>>("ControllerCache").Get("AllUsers", () => _userAppService.GetUsers()); ViewBag.AssignedPersonId = new SelectList(userList.Items, "Id", "Name");
return PartialView("_CreateTaskPartial");
} /// <summary>
/// 获取创建任务分部视图(子视图)
/// 该方法使用[OutputCache]进行缓存,缓存过期时间为2mins
/// </summary>
/// <returns></returns>
[ChildActionOnly]
[OutputCache(Duration = 1200, VaryByParam = "none")]
public PartialViewResult Create()
{
var userList = _userAppService.GetUsers();
ViewBag.AssignedPersonId = new SelectList(userList.Items, "Id", "Name");
return PartialView("_CreateTask");
} // POST: Tasks/Create
// 为了防止“过多发布”攻击,请启用要绑定到的特定属性,有关
// 详细信息,请参阅 http://go.microsoft.com/fwlink/?LinkId=317598。
[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);
} // GET: Tasks/Edit/5 public PartialViewResult Edit(int id)
{
var task = _taskAppService.GetTaskById(id); var updateTaskDto = Mapper.Map<UpdateTaskInput>(task); var userList = _userAppService.GetUsers();
ViewBag.AssignedPersonId = new SelectList(userList.Items, "Id", "Name", updateTaskDto.AssignedPersonId); return PartialView("_EditTask", updateTaskDto);
} // POST: Tasks/Edit/5
// 为了防止“过多发布”攻击,请启用要绑定到的特定属性,有关
// 详细信息,请参阅 http://go.microsoft.com/fwlink/?LinkId=317598。
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(UpdateTaskInput updateTaskDto)
{
_taskAppService.UpdateTask(updateTaskDto); var input = new GetTasksInput();
var output = _taskAppService.GetTasks(input); return PartialView("_List", output.Tasks);
} public ActionResult NotifyUser()
{
_notificationAppService.NotificationUsersWhoHaveOpenTask();
return new EmptyResult();
}
}
}

2,视图

@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> <a class="btn btn-success" href="@Url.Action("PagedList")" role="button">分页展示</a> <button type="button" class="btn btn-info" onclick="notifyUser();">通知未完成任务的用户</button>
<!--任务清单按照状态过滤的下拉框-->
<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>

另外还有_createTaskPartial,_EditTaskPartial 等,这里就不贴代码了

以上。。。

参考http://www.jianshu.com/p/620c20fa511b

代码地址https://github.com/tianxiangd/LearnAbp

ABP学习入门系列(五)(展示实现增删改查)的更多相关文章

  1. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  2. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  3. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(二)

    前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...

  4. SQLite 入门教程(四)增删改查,有讲究 (转)

    转于: SQLite 入门教程(四)增删改查,有讲究 一.插入数据 INSERT INTO 表(列...) VALUES(值...) 根据前面几篇的内容,我们可以很轻送的创建一个数据表,并向其中插入一 ...

  5. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  6. MVC3+EF4.1学习系列(二)-------基础的增删改查和持久对象的生命周期变化

    上篇文章中 我们已经创建了EF4.1基于code first的例子  有了数据库 并初始化了一些数据  今天这里写基础的增删改查和持久对象的生命周期变化 学习下原文先把运行好的原图贴来上~~ 一.创建 ...

  7. SQL Server学习之路(五):“增删改查”之“改”

    0.目录 1.前言 2.通过SSMS修改数据 3.通过SQL语句修改数据 3.1 修改单列数据 3.2 修改多列数据 1.前言 增删改查都是对数据的操作,其中"改"对应的SQL语句 ...

  8. MongoDB入门(介绍、安装、增删改查)

    文章作者公众号bigsai,已收录在回车课堂,如有帮助还请不吝啬点个赞赞支持一下! 课程导学 大家好我是bigsai,我们都学过数据库,但你可能更熟悉关系(型)数据库例如MySQL,SQL SERVE ...

  9. SQLite 入门教程(四)增删改查,有讲究

    增删改查操作,其中增删改操作被称为数据操作语言 DML,相对来说简单一点. 查操作相对来说复杂一点,涉及到很多子句,所以这篇先讲增删改操作,以例子为主,后面再讲查操作. 一.插入数据 INSERT I ...

  10. hibernate系列笔记(1)---Hibernate增删改查

    Hibernate增删改查 1.首先我们要知道什么是Hibernate Hibernate是一个轻量级的ORMapping对象.主要用来实现Java和数据库表之间的映射,除此之外还提供数据查询和数据获 ...

随机推荐

  1. Java的动态编译、动态加载、字节码操作

    想起来之前做的一个项目:那时候是把需要的源代码通过文件流输出到一个.java文件里,然后调用sun的Comipler接口动态编译成.class文件,然后再用专门写的一个class loader加载这个 ...

  2. Android UI/UX 工具

    Zeplin 用于界面图片自动导出. 图标 : https://material.io/icons/

  3. Java基础学习篇---------String、集合的学习

    一.String常用的方法: 1. == 实质比较两个对象的地址数值 String a = "hello"  (hello为匿名对象) String a1 = "hell ...

  4. 2019年新出现的ocp 062考试原题-2

    2.Which three statements are true about pfiles, spfiles or both? A) All spfile parameters can be mod ...

  5. NRF52840相对于之前的NRF52系列、NRF51系列增加了什么功能

    现在广大客户的蓝牙采用NORDIC越来越多了,NORDIC一直在不断进行技术改进更好的满足市场需求 推出了新款NRF52840.NRF52840更为先进些,支持的功能也多点,比如IEEE802.15. ...

  6. Organising the Organisation(uva10766)(生成树计数)

    Input Output Sample Input 5 5 2 3 1 3 4 4 5 1 4 5 3 4 1 1 1 4 3 0 2 Sample Output 3 8 3 题意: 有一张图上有\( ...

  7. ThinkPHP5.0手把手实现手机阿里云短信验证

    阿里云短信服务介绍阿里云短信服务就是以前的阿里大于,不过现在融合得到阿里云平台了.首先,你需要注册一个阿里云账号,这个自行解决. 仅用于测试使用官方送的代金券够用了.相关配置1.开通阿里云Access ...

  8. mysql中date,datetime,timestamp数据类型区别

    (1)date表示日期,其范围为1000-01-01到9999-12-31 (2)datetime表示日期时间,其范围是1000-01-01 00:00:00到9999-12-31 23:59:59 ...

  9. Kafka Java 客户端开发

    依赖包导入 <dependency> <groupId>org.apache.kafka</groupId> <artifactId>kafka_2.1 ...

  10. 【Java学习笔记】如何写一个简单的Web Service

    本Guide利用Eclipse以及Ant建立一个简单的Web Service,以演示Web Service的基本开发过程: 1.系统条件: Eclipse Java EE IDE for Web De ...