ABP教程（四）- 開始一個簡單的任務管理系統 - 實現UI端的增刪改查

接上一篇：ABP教程（三）- 開始一個簡單的任務管理系統 – 後端編碼 1.實現UI端的增刪改查 1.1添加增刪改查代碼打開SimpleTaskSystem.sln解決方案，添加一個“包含視圖的MVC 5控制器（使用EntityFramework）”TaskController控制器，添加成功後我 ...

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