一、添加一本书
在本节中，您将学习如何创建新的模式对话框形式来创建新书。模态对话框如下图所示：
1、创建模板form
在ABPBookStore.Web项目的 Pages/Books文件夹下，创建一个razor页面命名为CreateModal.cshtml， 打开CreateModal.cshtml.cs文件（CreateModalModel类）并替换为以下代码：
namespace ABPBookStore.Web.Pages.Books
{
public class CreateModalModel : ABPBookStorePageModel
{
[BindProperty]
public CreateUpdateBookDto Book { get; set; }
private readonly IBookAppService _bookAppService;
public CreateModalModel(IBookAppService bookAppService)
{
_bookAppService = bookAppService;
}
public async Task<IActionResult> OnPostAsync()
{
await _bookAppService.CreateAsync(Book);
return NoContent();
}
}
}
- 此类从
BookStorePageModel而不是standard 派生PageModel。BookStorePageModel继承PageModel并添加一些可以在页面模型类中使用的常见属性和方法。 -
[BindProperty]属性上的Book属性将发布请求数据绑定到该属性。 - 此类仅将注入
IBookAppService构造函数中，并CreateAsync在OnPostAsync处理程序中调用方法。
CreateModal.cshtml
打开CreateModal.cshtml文件并粘贴以下代码：
@page
@inherits ABPBookStore.Web.Pages.ABPBookStorePage
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@model ABPBookStore.Web.Pages.Books.CreateModalModel
@{
Layout = null;
}
<abp-dynamic-form abp-model="Book" data-ajaxForm="true" asp-page="/Books/CreateModal">
<abp-modal>
<abp-modal-header title="@L["NewBook"].Value"></abp-modal-header>
<abp-modal-body>
<abp-form-content />
</abp-modal-body>
<abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
</abp-modal>
</abp-dynamic-form>
此模态使用abp-dynamic-form标签帮助程序从模型自动创建表单 CreateBookViewModel。
-
abp-modelBook在这种情况下，attribute指示模型对象所在的属性。 -
data-ajaxForm属性将表单设置为通过AJAX提交，而不是经典的页面post。 -
abp-form-content标记帮助器是呈现表单控件的占位符（仅当您在abp-dynamic-form标记中添加了其他内容（如此页面一样）时才是可选的，并且是必需的）。
2、添加“NewBook”按钮
打开Pages/Books/Index.cshtml并设置abp-card-header标签内容，如下所示：
<abp-card-header>
<abp-row>
<abp-column size-md="_6">
<h2>@L["Books"]</h2>
</abp-column>
<abp-column size-md="_6" class="text-right">
<abp-button id="NewBookButton"
text="@L["NewBook"].Value"
icon="plus"
button-type="Primary" />
</abp-column>
</abp-row>
</abp-card-header>
这增加了一个新按钮NewBook在右上角：
接下来打开pages/books/index.js并在Datatable配置之后添加以下代码：
var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
createModal.onResult(function () {
dataTable.ajax.reload();
});
$('#NewBookButton').click(function (e) {
e.preventDefault();
createModal.open();
});
-
abp.ModalManager是在客户端管理模式的助手类。它在内部使用Twitter Bootstrap的标准模式，但是通过提供一个简单的API来抽象许多细节。
现在，您可以运行该应用程序并使用新的模式形式添加新书。
二、更新一本书
1、EditModal.cshtml.cs
在 ABPBookStore.Web项目的Pages/Books文件夹下创建一个Razor页面命名为EditModal.cshtml
EditModal.cshtml.cs
打开EditModal.cshtml.cs文件（EditModalModel类）并替换为以下代码：
namespace ABPBookStore.Web.Pages.Books
{
public class EditModalModel : ABPBookStorePageModel
{
[HiddenInput]
[BindProperty(SupportsGet = true)]
public Guid Id { get; set; }
[BindProperty]
public CreateUpdateBookDto Book { get; set; }
private readonly IBookAppService _bookAppService;
public EditModalModel(IBookAppService bookAppService)
{
_bookAppService = bookAppService;
}
public async Task OnGetAsync()
{
var bookDto = await _bookAppService.GetAsync(Id);
Book = ObjectMapper.Map<BookDto, CreateUpdateBookDto>(bookDto);
}
public async Task<IActionResult> OnPostAsync()
{
await _bookAppService.UpdateAsync(Id, Book);
return NoContent();
}
}
}
-
[HiddenInput]和[BindProperty]是标准的ASP.NET MVC的核心属性。SupportsGet用于能够从请求的查询字符串参数获取Id值。 - 在该
GetAsync方法中，我们得到来自BookAppService的BookDto，这个被映射到DTO对象CreateUpdateBookDto。 -
OnPostAsync用BookAppService.UpdateAsync()方法更新实体。
2、从BookDto映射到CreateUpdateBookDto
为了能够将映射BookDto到CreateUpdateBookDto，请配置新的映射。在ABPBookStore.Web项目中打开ABPBookStoreWebAutoMapperProfile.cs并按如下所示进行更改：
public ABPBookStoreWebAutoMapperProfile()
{
//Define your AutoMapper configuration here for the Web project.
CreateMap<BookDto, CreateUpdateBookDto>();
}
添加了CreateMap<BookDto, CreateUpdateBookDto>();定义此映射的功能。
3、EditModal.cshtml
用以下内容替换EditModal.cshtml内容
@page
@inherits ABPBookStore.Web.Pages.ABPBookStorePage
@using ABPBookStore.Web.Pages.Books
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@model EditModalModel
@{
Layout = null;
}
<abp-dynamic-form abp-model="Book" data-ajaxForm="true" asp-page="/Books/EditModal">
<abp-modal>
<abp-modal-header title="@L["Update"].Value"></abp-modal-header>
<abp-modal-body>
<abp-input asp-for="Id" />
<abp-form-content />
</abp-modal-body>
<abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
</abp-modal>
</abp-dynamic-form>
该页面与CreateModal.cshtml十分相似，除了：
- 它包括一个
abp-input用于Id存储Id编辑书的属性（这是一个隐藏的输入）。 - 它将
Books/EditModal用作发布URL，而“ Update”文本用作模式标题。
3、在表格中添加“Actions”下拉菜单
我们将在表中添加一个名为Actions的下拉按钮。
打开Pages/Books/Index.cshtml页面并更改<abp-table>部分，如下所示：
<abp-table striped-rows="true" id="BooksTable">
<thead>
<tr>
<th>@L["Actions"]</th>
<th>@L["Name"]</th>
<th>@L["Type"]</th>
<th>@L["PublishDate"]</th>
<th>@L["Price"]</th>
<th>@L["CreationTime"]</th>
</tr>
</thead>
</abp-table>
打开pages/books/index.js并替换以下内容：
$(function () {
var l = abp.localization.getResource('ABPBookStore');
var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
var editModal = new abp.ModalManager(abp.appPath + 'Books/EditModal');
var dataTable = $('#BooksTable').DataTable(abp.libs.datatables.normalizeConfiguration({
processing: true,
serverSide: true,
paging: true,
searching: false,
autoWidth: false,
scrollCollapse: true,
order: [[1, "asc"]],
ajax: abp.libs.datatables.createAjax(aBPBookStore.book.getList),
columnDefs: [
{
rowAction: {
items:
[
{
text: l('Edit'),
action: function (data) {
editModal.open({ id: data.record.id });
}
}
]
}
},
{ data: "name" },
{ data: "type" },
{ data: "publishDate" },
{ data: "price" },
{ data: "creationTime" }
]
}));
createModal.onResult(function () {
dataTable.ajax.reload();
});
editModal.onResult(function () {
dataTable.ajax.reload();
});
$('#NewBookButton').click(function (e) {
e.preventDefault();
createModal.open();
});
});
- 使用
abp.localization.getResource('ABPBookStore')能够使用服务器端上定义的相同本地化文本。 - 添加了一个名为
createModal的ModalManager以打开“创建模式”对话框。 - 添加了一个名为
editModal的ModalManager以打开编辑模式对话框。 - 在本
columnDefs节的开头添加了新列。此列用于“ Actions ”下拉按钮。 - “ New Book ”操作只需调用
createModal.open()即可打开创建对话框。 - “ Edit ”操作只需调用
editModal.open()即可打开编辑对话框。
您可以通过选择编辑操作来运行该应用程序并编辑任何书籍。最终的UI如下所示：
三、删除一本书
打开，pages/books/index.js然后将新项添加到rowAction items：
{
text: l('Delete'),
confirmMessage: function (data) {
return l('BookDeletionConfirmationMessage', data.record.name);
},
action: function (data) {
aBPBookStore.book
.delete(data.record.id)
.then(function () {
abp.notify.info(l('SuccessfullyDeleted'));
dataTable.ajax.reload();
});
}
}
-
confirmMessage选项用于在执行action之前询问确认问题。 -
aBPBookStore.book.delete()方法向JavaScript代理功能发出AJAX请求以删除一本书。 -
abp.notify.info()显示删除操作后的通知。
en.json在Acme.BookStore.Domain.Shared项目中打开并添加以下翻译：
"BookDeletionConfirmationMessage": "Are you sure to delete the book {0}?",
"SuccessfullyDeleted": "Successfully deleted"
运行该应用程序，然后尝试删除一本书。