ABP(7) - 更新和刪除書籍 - 官方教程掃盲貼之Update和Delete的使用 (詳細解說)
阿新 • • 發佈:2020-09-02
1 目標
- 1.1 更新書籍實體
- 1.2 增加下拉選項
- 1.3 刪除實體
2 編輯更新已存在的 Book 實體
- 2.1 在
Acme.BookStore.Web
專案的Pages/Books
目錄下新建一個名叫EditModal.cshtml
的Razor頁面 - 2.2 替換以下程式碼, 在這裡增加了,get方法, OnPost非同步方法,也就是傳送資料方法
using System; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; namespace Acme.BookStore.Web.Pages.Books { public class EditModalModel : BookStorePageModel { [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(); } } }
-2.3 由於添加了Dto CreateUpdateBookDto
, 所以需要手動增加對映
using AutoMapper;
namespace Acme.BookStore.Web
{
public class BookStoreWebAutoMapperProfile : Profile
{
public BookStoreWebAutoMapperProfile()
{
CreateMap<BookDto, CreateUpdateBookDto>();
}
}
}
- 2.4 修改客戶端程式碼, 這裡就是編輯的詳情頁面, 並且儲存
@page @using Acme.BookStore.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>
3 為表格新增 "操作(Actions)" 下拉選單
- 3.1 開啟
Pages/Books/Index.cshtml
頁面,並按下方所示修改表格部分的程式碼:
<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>
- 3.2 替換 js 內容, 增加相應的編輯功能
$(function () {
var l = abp.localization.getResource('BookStore');
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(acme.bookStore.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();
});
});
4 刪除書籍,開啟 Pages/book/index.j
s 檔案,在 rowAction
items
下新增一項:
{
text: l('Delete'),
confirmMessage: function (data) {
return l('BookDeletionConfirmationMessage', data.record.name);
},
action: function (data) {
acme.bookStore.book
.delete(data.record.id)
.then(function() {
abp.notify.info(l('SuccessfullyDeleted'));
dataTable.ajax.reload();
});
}
}