首页 > 代码库 > ABP教程(四)- 开始一个简单的任务管理系统 - 实现UI端的增删改查
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="http://www.mamicode.com/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="http://www.mamicode.com/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端的增删改查
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。