ABP教程（四）

接上一篇：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 >  <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 >    <h4>TaskDto</h4>    <hr />    @Html.ValidationSummary(true, "", new { @class = "text-danger" })    <div >      @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })      <div >        @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })        @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })      </div>    </div>    <div >      <div >        <input type="submit" value="Create" />      </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 >    <h4>TaskDto</h4>    <hr />    @Html.ValidationSummary(true, "", new { @class = "text-danger" })    @Html.HiddenFor(model => model.Id)    <div >      @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })      <div >        @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })        @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })      </div>    </div>    @*<div >      @Html.LabelFor(model => model.AssignedUserId, htmlAttributes: new { @class = "control-label col-md-2" })      <div >        @Html.EditorFor(model => model.AssignedUserId, new { htmlAttributes = new { @class = "form-control" } })        @Html.ValidationMessageFor(model => model.AssignedUserId, "", new { @class = "text-danger" })      </div>    </div>    <div >      @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })      <div >        @Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } })        @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })      </div>    </div>*@    <div >      <div >        <input type="submit" value="Save" />      </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 >    <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

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：ABP教程（四）

关键词：