接上一篇：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: Taskpublic ActionResult Index(GetTasksInput input){var tasks = _taskService.GetTasks(input);return View(tasks);}// GET: Task/Details/5public 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/Createpublic 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/5public 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/5public 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