接上一篇：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