ABP tutorial (IV)-start a simple task management system

ABP tutorial (IV)-start a simple task management system

Last article: Lessons (3) from the "ABP" tutorial-start a simple task management system-backend code

1. add, delete, modify, and query code on the UI side. 1.1 add, delete, modify, and query code.

Open the SimpleTaskSystem. sln solution and add a "MVC 5 controller (using EntityFramework)" TaskController containing the view. After the view is added, we can get a complete addition, deletion, modification, and query function.

 

The generated code cannot be used in our example. Some adjustments are required. The adjusted code is as follows:

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 = _ taskSe Rvice. 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. de Required; _ 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 ("Please implement this method on your own! ");}}}

. Adjust the. cshtml file under Views/Task in sequence

Index. cshtml

@ Model SimpleTaskSystem. services. getTasksOutput @ {ViewBag. title = "Index" ;}< h2> task list 

Create. cshtml

@model SimpleTaskSystem.Services.CreateTaskInput@{    ViewBag.Title = "Create";}

Edit. cshtml

@model SimpleTaskSystem.Services.TaskDto@{    ViewBag.Title = "Edit";}

Details. cshtml

@model SimpleTaskSystem.Services.TaskDto@{    ViewBag.Title = "Details";}

1. 3. Add the "task management" menu in the navigation bar.

Open the App_Start/SimpleTaskSystemNavigationProvider. cs file add menu

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. Test in the browser

Refresh the browser and test addition, deletion, modification, and query.

3. Download the source code in this section.

Compared to the previous section of the Code, this section of code in addition to the above Code there are some adjustments, please download the full version of the source code here: http://pan.baidu.com/s/1c2n2U7Q

We have finished learning the basic part of the Abp, so you should have learned how to use it to perform basic addition, deletion, modification, and query. Later we will explain the usage of other features in the project practice, please stay tuned to www.webplus.org.cn