ABP教程(四)- 开始一个简单的任务管理系统 - 实现UI端的增删改查
接上一篇:ABP教程(三)- 开始一个简单的任务管理系统 – 后端编码
1.实现UI端的增删改查
1.1添加增删改查代码
打开SimpleTaskSystem.sln解决方案,添加一个“包含视图的MVC 5控制器(使用EntityFramework)”TaskController控制器,添加成功后我们就能得到一个完整增删改查的功能了。
生成的代码是不能用在我们的这个示例里的,还需经过些许调整,经过调整后的代码如下:
using System;
using System.Net;
using System.Web.Mvc;
using SimpleTaskSystem.Services;
namespace SimpleTaskSystem.Web.Controllers
{
public class TaskController : SimpleTaskSystemControllerBase
{
private readonly ITaskAppService _taskService;
public TaskController(ITaskAppService taskService)
{
_taskService = taskService;
}
// GET: Task
public ActionResult Index(GetTasksInput input)
{
var tasks = _taskService.GetTasks(input);
return View(tasks);
}
// GET: Task/Details/5
public ActionResult Details(long? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var task = _taskService.GetTask(id.Value);
if (task == null)
{
return HttpNotFound();
}
return View(task);
}
// GET: Task/Create
public ActionResult Create()
{
return View();
}
// POST: Task/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(CreateTaskInput input)
{
if (ModelState.IsValid)
{
_taskService.CreateTask(input);
return RedirectToAction("Index");
}
return View(input);
}
// GET: Task/Edit/5
public ActionResult Edit(long? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var task = _taskService.GetTask(id.Value);
if (task == null)
{
return HttpNotFound();
}
return View(task);
}
// POST: Task/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(TaskDto dto)
{
if (ModelState.IsValid)
{
var input = new UpdateTaskInput();
input.Id = dto.Id;
input.Description = dto.Description;
_taskService.UpdateTask(input);
return RedirectToAction("Index");
}
return View(dto);
}
// GET: Task/Delete/5
public ActionResult Delete(long? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var task = _taskService.GetTask(id.Value);
if (task == null)
{
return HttpNotFound();
}
return View(task);
}
// POST: Task/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(long id)
{
throw new Exception("请大家自行实现该方法!");
}
}
}
1.2.依次调整Views/Task下面的.cshtml文件
Index.cshtml
@model SimpleTaskSystem.Services.GetTasksOutput
@{
ViewBag.Title = "Index";
}
<h2>任务列表</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
任务描述
</th>
<th></th>
</tr>
@foreach (var item in Model.Tasks) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
@Html.ActionLink("Details", "Details", new { id=item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
Create.cshtml
@model SimpleTaskSystem.Services.CreateTaskInput
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>TaskDto</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<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">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
Edit.cshtml
@model SimpleTaskSystem.Services.TaskDto
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>TaskDto</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.Id)
<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.AssignedUserId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.AssignedUserId, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.AssignedUserId, "", 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.EditorFor(model => model.State, new { 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>
@Html.ActionLink("Back to List", "Index")
</div>
Details.cshtml
@model SimpleTaskSystem.Services.TaskDto
@{
ViewBag.Title = "Details";
}
<h2>Details</h2>
<div>
<h4>TaskDto</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Description)
</dt>
<dd>
@Html.DisplayFor(model => model.Description)
</dd>
<dt>
@Html.DisplayNameFor(model => model.AssignedUserId)
</dt>
<dd>
@Html.DisplayFor(model => model.AssignedUserId)
</dd>
<dt>
@Html.DisplayNameFor(model => model.State)
</dt>
<dd>
@Html.DisplayFor(model => model.State)
</dd>
</dl>
</div>
<p>
@Html.ActionLink("Edit", "Edit", new { id = Model.Id }) |
@Html.ActionLink("Back to List", "Index")
</p>
1.3.导航栏增加【任务管理】菜单
打开App_Start/SimpleTaskSystemNavigationProvider.cs文件添加菜单
using Abp.Application.Navigation;
using Abp.Localization;
namespace SimpleTaskSystem.Web
{
/// <summary>
/// This class defines menus for the application.
/// It uses ABP's menu system.
/// When you add menu items here, they are automatically appear in angular application.
/// See .cshtml and .js files under App/Main/views/layout/header to know how to render menu.
/// </summary>
public class SimpleTaskSystemNavigationProvider : NavigationProvider
{
public override void SetNavigation(INavigationProviderContext context)
{
context.Manager.MainMenu
.AddItem(
new MenuItemDefinition(
"Home",
new LocalizableString("HomePage", SimpleTaskSystemConsts.LocalizationSourceName),
url: "#/",
icon: "fa fa-home"
)
).AddItem(
new MenuItemDefinition(
"About",
new LocalizableString("About", SimpleTaskSystemConsts.LocalizationSourceName),
url: "#/about",
icon: "fa fa-info"
)
).AddItem(
new MenuItemDefinition(
"About",
new LocalizableString("Task Manage", SimpleTaskSystemConsts.LocalizationSourceName),
url: "/task/"
)
);
}
}
}
2.浏览器中测试
刷新浏览器,进行增删改查测试。
3.本节源码下载
相对前一节的代码,本节代码除上面的代码外还有些许调整,请大家在这里下载完整版源码:http://pan.baidu.com/s/1c2n2U7Q
Abp基础的部分我们已经学习完了,到这你应该学会了使用Abp进行基本的增删改查,后面我们会通过项目实战的方式来讲解Abp其它功能的用法,请大家继续关注www.webplus.org.cn
ABP教程(四)- 开始一个简单的任务管理系统 - 实现UI端的增删改查的更多相关文章
- 什么是Pro*C/C++,嵌入式SQL,第一个pro*c程序,pro*c++,Makefile,Proc增删改查
1 什么是Pro*C/C++ 1.通过在过程编程语言C/C++中嵌入SQL语句而开发出的应用程序 2.什么是嵌入式SQL 1.在通用编程语言中使用的SQL称为嵌入式SQL 2.在SQL标准中定义 ...
- Java简单示例-用户登录、单个页面的增删改查及简单分页
index.html -登录->stulist.jsp (index.html传递到LoginServlet,进行登录检测及写入session,NO返回index.html界面,OK 跳转到s ...
- 最简单的基于JSP标准标签库的增删改查
创建数据库中的表:CREATE TABLE `websites` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` char(20) NOT NULL DE ...
- jeesite应用实战(数据增删改查),认真读完后10分钟就能开发一个模块
jeesite配置指南(官方文档有坑,我把坑填了!)这篇文章里,我主要把jeesite官方给出的帮助文档的坑填了,按照里面的方法可以搭建起来jeesite的站点.系统可以运行以后,就可以进入开发模块了 ...
- 【温故知新】Java web 开发(四)JSTL 与 JDBC 的增删改查
本篇开始使用 jstl 这个 jsp 的标签库,在同一个 Servlet 中实现处理 CRUD 请求,以及使用 jdbc 数据库基本操作.然后你会发现 Servlet 和 jdbc 还是有很多不方便之 ...
- Node教程——Node+MongoDB案例实现用户信息的增删改查
想要获取源代码的同学可以留言,我不做git上传了,案例太简单 没必要 综合演练 用户信息的增删改查 需求:你需要实现这样的结果 点击添加可以添加用户,点击删除可以删除点击修改可以修改 代码分析: 1. ...
- c#winform简单实现Mysql数据库的增删改查的语句
通过简单的SQL语句实现对数据库的增删改查. 窗口如下: 定义打开与关闭连接函数,方便每次调用: 增加指令: 删除指令: 修改指令: 查找指令: 表格情况:
- ABP教程(三)- 开始一个简单的任务管理系统 – 后端编码
上一篇 我们介绍了什么是ABP,这一篇我们通过原作者的”简单任务系统”例子,演示如何运用ABP开发项目 创建实体 一般来说任务是需要分配给人来做的,所以我们创建两个实体模型类:Task和Persion ...
- Directx11教程(5) 画一个简单的三角形(1)
原文:Directx11教程(5) 画一个简单的三角形(1) 在本篇教程中,我们将通过D3D11画一个简单的三角形.在D3D11中,GPU的渲染主要通过shader来操作(当然还有一些操作 ...
随机推荐
- 使用a标签下载文件,而不是直接打开,使用属性 download
有的时候,下载的链接文件如果是普通文件类型,如txt,我们下载文件的时候,有的浏览器不会弹出下载框,.而是直接打开了该文件. 针对这种情况,我们只需要在a标签上加上download属性即可显示下载框. ...
- leetcode 681. Next Closest Time
Given a time represented in the format "HH:MM", form the next closest time by reusing the ...
- SCX-4521F一体机MAC驱动
如果您想下载SCX-4521F一体机MAC驱动,请从下面的链接中下载相应驱动:MAC打印驱动:http://org.downloadcenter.samsung.com/downloadfile/Co ...
- POJ3685 Matrix —— 二分
题目链接:http://poj.org/problem?id=3685 Matrix Time Limit: 6000MS Memory Limit: 65536K Total Submissio ...
- java 读写Oracle Blob字段
许久没有分享代码了,把这段时间写的一个Java操作Blob字段,有日子没写Java了,就当作笔记记录一下.1. [代码][Java]代码 跳至 [1] [全屏预览]package com.wa ...
- Ordered Fractions
链接 分析:遍历一下,求个gcd即可,最后按照ans排序并去重 /* PROB:frac1 ID:wanghan LANG:C++ */ #include "iostream" # ...
- 【hdu 2222】Keywords Search
[题目链接] 点击打开链接 [算法] 此题是AC自动机模板题 AC自动机是很神奇的算法,简单点来说,就是在一棵字典树上进行KMP,它的应用范围很广,非常实用 这篇博客写得很好,推荐阅读 : http: ...
- 【JSOI 2014】序列维护
[题目链接] 点击打开链接 [算法] 线段树 注意标记下传 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 5 ...
- CCRect 构造函数的几个参数解释
转自: http://blog.163.com/hzklclick_wy/blog/static/21550517520137139511839/ void CCRect::setRect(f ...
- 879C
贪心 题目看错了...还以为是从操作序列中选5个...然后半个小时没了... 我们把每位分别用0和1带入,看看返回值是什么,然后分类讨论.千万不用特判!!!之前忘了删了就fst... #include ...