Web应用程序开发教程 - 第三章: 创建,更新和删除图书

关于本教程

在本系列教程中, 你将构建一个名为 Acme.BookStore 的用于管理书籍及其作者列表的基于ABP的应用程序. 它是使用以下技术开发的:

  • Entity Framework Core 做为ORM提供程序.
  • MVC / Razor Pages 做为UI框架.

本教程分为以下部分:

下载源码

本教程根据你的UI 和 Database偏好有多个版,我们准备了两种可供下载的源码组合:

创建新书籍

通过本节, 你将会了解如何创建一个 modal form 来实现新增书籍的功能. 最终成果如下图所示:

bookstore-create-dialog

创建 modal form

在 Acme.BookStore.Web 项目的 Pages/Books 目录下新建一个 CreateModal.cshtml Razor页面:

bookstore-add-create-dialog

CreateModal.cshtml.cs

打开 CreateModal.cshtml.cs 代码文件,用如下代码替换 CreateModalModel 类的实现:

  1. using System.Threading.Tasks;
  2. using Acme.BookStore.Books;
  3. using Microsoft.AspNetCore.Mvc;
  5. namespace Acme.BookStore.Web.Pages.Books
  6. {
  7.     public class CreateModalModel : BookStorePageModel
  8.     {
  9.         [BindProperty]
  10.         public CreateUpdateBookDto Book { get; set; }
  12.         private readonly IBookAppService _bookAppService;
  14.         public CreateModalModel(IBookAppService bookAppService)
  15.         {
  16.             _bookAppService = bookAppService;
  17.         }
  19.         public void OnGet()
  20.         {
  21.             Book = new CreateUpdateBookDto();
  22.         }
  24.         public async Task<IActionResult> OnPostAsync()
  25.         {
  26.             await _bookAppService.CreateAsync(Book);
  27.             return NoContent();
  28.         }
  29.     }
  30. }
  • 该类派生于 BookStorePageModel 而非默认的 PageModel. BookStorePageModel 继承了 PageModel 并且添加了一些可以被你的page model类使用的通用属性和方法.
  • Book 属性上的 [BindProperty] 特性将post请求提交上来的数据绑定到该属性上.
  • 该类通过构造函数注入了 IBookAppService 应用服务,并且在 OnPostAsync 处理程序中调用了服务的 CreateAsync 方法.
  • 它在 OnGet 方法中创建一个新的 CreateUpdateBookDto 对象。 ASP.NET Core不需要像这样创建一个新实例就可以正常工作. 但是它不会为你创建实例,并且如果你的类在类构造函数中具有一些默认值分配或代码执行,它们将无法工作. 对于这种情况,我们为某些 CreateUpdateBookDto 属性设置了默认值.

CreateModal.cshtml

打开 CreateModal.cshtml 文件并粘贴如下代码:

  1. @page
  2. @using Acme.BookStore.Localization
  3. @using Acme.BookStore.Web.Pages.Books
  4. @using Microsoft.Extensions.Localization
  5. @using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
  6. @model CreateModalModel
  7. @inject IStringLocalizer<BookStoreResource> L
  8. @{
  9.     Layout = null;
  10. }
  11. <abp-dynamic-form abp-model="Book" asp-page="/Books/CreateModal">
  12.     <abp-modal>
  13.         <abp-modal-header title="@L["NewBook"].Value"></abp-modal-header>
  14.         <abp-modal-body>
  15.             <abp-form-content />
  16.         </abp-modal-body>
  17.         <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
  18.     </abp-modal>
  19. </abp-dynamic-form>
  • 这个 modal 使用 abp-dynamic-form tag Helper 根据 CreateBookViewModel 类自动构建了表单.
  • abp-model 指定了 Book 属性为模型对象.
  • data-ajaxForm 设置了表单通过AJAX提交,而不是经典的页面回发.
  • abp-form-content tag helper 作为表单控件渲染位置的占位符 (这是可选的,只有你在 abp-dynamic-form 中像本示例这样添加了其他内容才需要).

提示: 就像在本示例中一样,Layout 应该为 null,因为当通过AJAX加载模态时,我们不希望包括所有布局.

添加 “New book” 按钮

打开 Pages/Books/Index.cshtml 并按如下代码修改 abp-card-header :

  1. <abp-card-header>
  2.     <abp-row>
  3.         <abp-column size-md="_6">
  4.             <abp-card-title>@L["Books"]</abp-card-title>
  5.         </abp-column>
  6.         <abp-column size-md="_6" class="text-right">
  7.             <abp-button id="NewBookButton"
  8.                         text="@L["NewBook"].Value"
  9.                         icon="plus"
  10.                         button-type="Primary"/>
  11.         </abp-column>
  12.     </abp-row>
  13. </abp-card-header>

Index.cshtml 的内容最终如下所示:

  1. @page
  2. @using Acme.BookStore.Localization
  3. @using Acme.BookStore.Web.Pages.Books
  4. @using Microsoft.Extensions.Localization
  5. @model IndexModel
  6. @inject IStringLocalizer<BookStoreResource> L
  7. @section scripts
  8. {
  9.     <abp-script src="/Pages/Books/Index.js"/>
  10. }
  12. <abp-card>
  13.     <abp-card-header>
  14.         <abp-row>
  15.             <abp-column size-md="_6">
  16.                 <abp-card-title>@L["Books"]</abp-card-title>
  17.             </abp-column>
  18.             <abp-column size-md="_6" class="text-right">
  19.                 <abp-button id="NewBookButton"
  20.                             text="@L["NewBook"].Value"
  21.                             icon="plus"
  22.                             button-type="Primary"/>
  23.             </abp-column>
  24.         </abp-row>
  25.     </abp-card-header>
  26.     <abp-card-body>
  27.         <abp-table striped-rows="true" id="BooksTable"></abp-table>
  28.     </abp-card-body>
  29. </abp-card>

如下图所示,只是在表格 右上方 添加了 New book 按钮:

bookstore-new-book-button

打开 Pages/book/index.js 在 datatable 配置代码后面添加如下代码:

  1. var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
  3. createModal.onResult(function () {
  4.     dataTable.ajax.reload();
  5. });
  7. $('#NewBookButton').click(function (e) {
  8.     e.preventDefault();
  9.     createModal.open();
  10. });
  • abp.ModalManager 是一个在客户端打开和管理modal的辅助类.它基于Twitter Bootstrap的标准modal组件通过简化的API抽象隐藏了许多细节.
  • createModal.onResult(...) 用于在创建书籍后刷新数据表格.
  • createModal.open(); 用于打开模态创建新书籍.

Index.js 的内容最终如下所示:

  1. $(function () {
  2.     var l = abp.localization.getResource('BookStore');
  4.     var dataTable = $('#BooksTable').DataTable(
  5.         abp.libs.datatables.normalizeConfiguration({
  6.             serverSide: true,
  7.             paging: true,
  8.             order: [[1, "asc"]],
  9.             searching: false,
  10.             scrollX: true,
  11.             ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
  12.             columnDefs: [
  13.                 {
  14.                     title: l('Name'),
  15.                     data: "name"
  16.                 },
  17.                 {
  18.                     title: l('Type'),
  19.                     data: "type",
  20.                     render: function (data) {
  21.                         return l('Enum:BookType:' + data);
  22.                     }
  23.                 },
  24.                 {
  25.                     title: l('PublishDate'),
  26.                     data: "publishDate",
  27.                     render: function (data) {
  28.                         return luxon
  29.                             .DateTime
  30.                             .fromISO(data, {
  31.                                 locale: abp.localization.currentCulture.name
  32.                             }).toLocaleString();
  33.                     }
  34.                 },
  35.                 {
  36.                     title: l('Price'),
  37.                     data: "price"
  38.                 },
  39.                 {
  40.                     title: l('CreationTime'), data: "creationTime",
  41.                     render: function (data) {
  42.                         return luxon
  43.                             .DateTime
  44.                             .fromISO(data, {
  45.                                 locale: abp.localization.currentCulture.name
  46.                             }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
  47.                     }
  48.                 }
  49.             ]
  50.         })
  51.     );
  53.     var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
  55.     createModal.onResult(function () {
  56.         dataTable.ajax.reload();
  57.     });
  59.     $('#NewBookButton').click(function (e) {
  60.         e.preventDefault();
  61.         createModal.open();
  62.     });
  63. });

现在,你可以 运行程序 通过新的 modal form 来创建书籍了.

更新书籍

在 Acme.BookStore.Web 项目的 Pages/Books 目录下新建一个名叫 EditModal.cshtml 的Razor页面:

bookstore-add-edit-dialog

EditModal.cshtml.cs

打开 EditModal.cshtml.cs 文件(EditModalModel类) 并替换成以下代码:

  1. using System;
  2. using System.Threading.Tasks;
  3. using Acme.BookStore.Books;
  4. using Microsoft.AspNetCore.Mvc;
  6. namespace Acme.BookStore.Web.Pages.Books
  7. {
  8.     public class EditModalModel : BookStorePageModel
  9.     {
  10.         [HiddenInput]
  11.         [BindProperty(SupportsGet = true)]
  12.         public Guid Id { get; set; }
  14.         [BindProperty]
  15.         public CreateUpdateBookDto Book { get; set; }
  17.         private readonly IBookAppService _bookAppService;
  19.         public EditModalModel(IBookAppService bookAppService)
  20.         {
  21.             _bookAppService = bookAppService;
  22.         }
  24.         public async Task OnGetAsync()
  25.         {
  26.             var bookDto = await _bookAppService.GetAsync(Id);
  27.             Book = ObjectMapper.Map<BookDto, CreateUpdateBookDto>(bookDto);
  28.         }
  30.         public async Task<IActionResult> OnPostAsync()
  31.         {
  32.             await _bookAppService.UpdateAsync(Id, Book);
  33.             return NoContent();
  34.         }
  35.     }
  36. }
  • [HiddenInput] 和 [BindProperty] 是标准的 ASP.NET Core MVC 特性.这里启用 SupportsGet 从Http请求的查询字符串中获取Id的值.
  • 在 OnGetAsync 方法中,将 BookAppService.GetAsync 方法返回的 BookDto 映射成 CreateUpdateBookDto 并赋值给Book属性.
  • OnPostAsync 方法直接使用 BookAppService.UpdateAsync 来更新实体.

BookDto 到 CreateUpdateBookDto 对象映射

为了执行 BookDto 到 CreateUpdateBookDto 对象映射,请打开 Acme.BookStore.Web 项目中的 BookStoreWebAutoMapperProfile.cs 并更改它,如下所示:

  1. using AutoMapper;
  3. namespace Acme.BookStore.Web
  4. {
  5.     public class BookStoreWebAutoMapperProfile : Profile
  6.     {
  7.         public BookStoreWebAutoMapperProfile()
  8.         {
  9.             CreateMap<BookDto, CreateUpdateBookDto>();
  10.         }
  11.     }
  12. }
  • 我们添加了 CreateMap<BookDto, CreateUpdateBookDto>(); 作为映射定义.

请注意,我们在Web层中进行映射定义是一种最佳实践,因为仅在该层中需要它.

EditModal.cshtml

将 EditModal.cshtml 页面内容替换成如下代码:

  1. @page
  2. @using Acme.BookStore.Localization
  3. @using Acme.BookStore.Web.Pages.Books
  4. @using Microsoft.Extensions.Localization
  5. @using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
  6. @model EditModalModel
  7. @inject IStringLocalizer<BookStoreResource> L
  8. @{
  9.     Layout = null;
  10. }
  11. <abp-dynamic-form abp-model="Book" asp-page="/Books/EditModal">
  12.     <abp-modal>
  13.         <abp-modal-header title="@L["Update"].Value"></abp-modal-header>
  14.         <abp-modal-body>
  15.             <abp-input asp-for="Id" />
  16.             <abp-form-content />
  17.         </abp-modal-body>
  18.         <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
  19.     </abp-modal>
  20. </abp-dynamic-form>

这个页面内容和 CreateModal.cshtml 非常相似,除了以下几点:

  • 它包含id属性的abp-input, 用于存储编辑书的 id (它是隐藏的Input)
  • 此页面指定的post地址是Books/EditModal.

为表格添加 “操作（Actions）” 下拉菜单

我们将为表格每行添加下拉按钮 (“Actions”):

打开 Pages/Books/Index.js 页面,并按下方所示修改表格部分的代码:

  1. $(function () {
  2.     var l = abp.localization.getResource('BookStore');
  3.     var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
  4.     var editModal = new abp.ModalManager(abp.appPath + 'Books/EditModal');
  6.     var dataTable = $('#BooksTable').DataTable(
  7.         abp.libs.datatables.normalizeConfiguration({
  8.             serverSide: true,
  9.             paging: true,
  10.             order: [[1, "asc"]],
  11.             searching: false,
  12.             scrollX: true,
  13.             ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
  14.             columnDefs: [
  15.                 {
  16.                     title: l('Actions'),
  17.                     rowAction: {
  18.                         items:
  19.                             [
  20.                                 {
  21.                                     text: l('Edit'),
  22.                                     action: function (data) {
  23.                                         editModal.open({ id: data.record.id });
  24.                                     }
  25.                                 }
  26.                             ]
  27.                     }
  28.                 },
  29.                 {
  30.                     title: l('Name'),
  31.                     data: "name"
  32.                 },
  33.                 {
  34.                     title: l('Type'),
  35.                     data: "type",
  36.                     render: function (data) {
  37.                         return l('Enum:BookType:' + data);
  38.                     }
  39.                 },
  40.                 {
  41.                     title: l('PublishDate'),
  42.                     data: "publishDate",
  43.                     render: function (data) {
  44.                         return luxon
  45.                             .DateTime
  46.                             .fromISO(data, {
  47.                                 locale: abp.localization.currentCulture.name
  48.                             }).toLocaleString();
  49.                     }
  50.                 },
  51.                 {
  52.                     title: l('Price'),
  53.                     data: "price"
  54.                 },
  55.                 {
  56.                     title: l('CreationTime'), data: "creationTime",
  57.                     render: function (data) {
  58.                         return luxon
  59.                             .DateTime
  60.                             .fromISO(data, {
  61.                                 locale: abp.localization.currentCulture.name
  62.                             }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
  63.                     }
  64.                 }
  65.             ]
  66.         })
  67.     );
  69.     createModal.onResult(function () {
  70.         dataTable.ajax.reload();
  71.     });
  73.     editModal.onResult(function () {
  74.         dataTable.ajax.reload();
  75.     });
  77.     $('#NewBookButton').click(function (e) {
  78.         e.preventDefault();
  79.         createModal.open();
  80.     });
  81. });
  • 增加了一个新的 ModalManager 名为 editModal 打开编辑模态框.
  • 在 columnDefs 部分的开头添加了一个新列,用于”Actions“下拉按钮.
  • “Edit“ 动作简单地调用 editModal.open() 打开编辑模态框.
  • editModal.onResult(...) 当你关闭编程模态框时进行回调刷新数据表格.

你可以运行应用程序,并通过选择一本书的编辑操作编辑任何一本书.

最终的UI看起来如下:

bookstore-books-table-actions

删除书籍

打开 Pages/book/index.js 文件,在 rowAction items 下新增一项:

  1. {
  2.     text: l('Delete'),
  3.     confirmMessage: function (data) {
  4.         return l('BookDeletionConfirmationMessage', data.record.name);
  5.     },
  6.     action: function (data) {
  7.         acme.bookStore.books.book
  8.             .delete(data.record.id)
  9.             .then(function() {
  10.                 abp.notify.info(l('SuccessfullyDeleted'));
  11.                 dataTable.ajax.reload();
  12.             });
  13.     }
  14. }
  • confirmMessage 用来在实际执行 action 之前向用户进行确认.
  • 通过javascript代理方法 acme.bookStore.books.book.delete(...) 执行一个AJAX请求来删除一个book实体.
  • abp.notify.info 用来在执行删除操作后显示一个toastr通知信息.

由于我们使用了两个新的本地化文本(BookDeletionConfirmationMessage和SuccesslyDeleted),因此你需要将它们添加到本地化文件(Acme.BookStore.Domain.Shared项目的Localization/BookStore文件夹下的en.json):

  1. "BookDeletionConfirmationMessage": "Are you sure to delete the book '{0}'?",
  2. "SuccessfullyDeleted": "Successfully deleted!"

Index.js 的内容最终如下所示:

  1. $(function () {
  2.     var l = abp.localization.getResource('BookStore');
  3.     var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
  4.     var editModal = new abp.ModalManager(abp.appPath + 'Books/EditModal');
  6.     var dataTable = $('#BooksTable').DataTable(
  7.         abp.libs.datatables.normalizeConfiguration({
  8.             serverSide: true,
  9.             paging: true,
  10.             order: [[1, "asc"]],
  11.             searching: false,
  12.             scrollX: true,
  13.             ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
  14.             columnDefs: [
  15.                 {
  16.                     title: l('Actions'),
  17.                     rowAction: {
  18.                         items:
  19.                             [
  20.                                 {
  21.                                     text: l('Edit'),
  22.                                     action: function (data) {
  23.                                         editModal.open({ id: data.record.id });
  24.                                     }
  25.                                 },
  26.                                 {
  27.                                     text: l('Delete'),
  28.                                     confirmMessage: function (data) {
  29.                                         return l(
  30.                                             'BookDeletionConfirmationMessage',
  31.                                             data.record.name
  32.                                         );
  33.                                     },
  34.                                     action: function (data) {
  35.                                         acme.bookStore.books.book
  36.                                             .delete(data.record.id)
  37.                                             .then(function() {
  38.                                                 abp.notify.info(
  39.                                                     l('SuccessfullyDeleted')
  40.                                                 );
  41.                                                 dataTable.ajax.reload();
  42.                                             });
  43.                                     }
  44.                                 }
  45.                             ]
  46.                     }
  47.                 },
  48.                 {
  49.                     title: l('Name'),
  50.                     data: "name"
  51.                 },
  52.                 {
  53.                     title: l('Type'),
  54.                     data: "type",
  55.                     render: function (data) {
  56.                         return l('Enum:BookType:' + data);
  57.                     }
  58.                 },
  59.                 {
  60.                     title: l('PublishDate'),
  61.                     data: "publishDate",
  62.                     render: function (data) {
  63.                         return luxon
  64.                             .DateTime
  65.                             .fromISO(data, {
  66.                                 locale: abp.localization.currentCulture.name
  67.                             }).toLocaleString();
  68.                     }
  69.                 },
  70.                 {
  71.                     title: l('Price'),
  72.                     data: "price"
  73.                 },
  74.                 {
  75.                     title: l('CreationTime'), data: "creationTime",
  76.                     render: function (data) {
  77.                         return luxon
  78.                             .DateTime
  79.                             .fromISO(data, {
  80.                                 locale: abp.localization.currentCulture.name
  81.                             }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
  82.                     }
  83.                 }
  84.             ]
  85.         })
  86.     );
  88.     createModal.onResult(function () {
  89.         dataTable.ajax.reload();
  90.     });
  92.     editModal.onResult(function () {
  93.         dataTable.ajax.reload();
  94.     });
  96.     $('#NewBookButton').click(function (e) {
  97.         e.preventDefault();
  98.         createModal.open();
  99.     });
  100. });

你可以运行程序并尝试删除一本书.

下一章

查看本教程的下一章.