接上一篇：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
时间： 2024-10-07 14:08:46