現在我們創建增加記錄頁面,在Pages/Poets中增加CreateModal.cshtml,在修改後臺代碼如下:
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using ZL.Test.Poets;
namespace ZL.Test.Web.Pages.Poets
{
public class CreateModalModel : TestPageModel
{
[BindProperty]
public CreateUpdatePoetDto Poet { get; set; }
private readonly IPoetAppService _poetAppService;
public CreateModalModel(IPoetAppService poetAppService)
{
_poetAppService = poetAppService;
}
public void OnGet()
{
Poet = new CreateUpdatePoetDto();
}
public async Task<IActionResult> OnPostAsync()
{
await _poetAppService.CreateAsync(Poet);
return NoContent();
}
}
}
頁面使用依賴注入獲取PoetAppService,當發生Post事件時,從Dto中獲取數據並執行增加新記錄的操作。這裏[BindProperty]屬性用來將post發送的數據綁定到Dto對象。
CreateModal.cshtml代碼如下:
@page
@model ZL.Test.Web.Pages.Poets.CreateModalModel
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@{
Layout = null;
}
<abp-dynamic-form abp-model="Poet" asp-page="/Poets/CreateModal">
<abp-modal>
<abp-modal-header title="添加詩人"></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,會根據abp-model中指定的Poet動態生成編輯界面,生成的控件會替換<abp-form-content />。
接下來,打開Pages/Poets/Index.cshtml,在abp-card-header中增加添加按鈕:
<abp-card-header>
<abp-row>
<abp-column size-md="_6">
<abp-card-title> 詩人 </abp-card-title>
</abp-column>
<abp-column size-md="_6" class="text-right">
<abp-button id="NewBookButton"
text="添加詩人"
icon="plus"
button-type="Primary" />
</abp-column>
</abp-row>
</abp-card-header>
然後,還需要修改Index.js,增加按鈕相關的js代碼:
var createModal = new abp.ModalManager(abp.appPath + 'Poets/CreateModal');
createModal.onResult(function () {
dataTable.ajax.reload();
});
$('#NewBookButton').click(function (e) {
e.preventDefault();
createModal.open();
});
運行項目,導航到poets頁面:
頁面上多了添加記錄的按鈕,點擊這個按鈕,彈出添加記錄的頁面:
我們現在可以添加記錄了,美中不足的是表單中的標籤不是中文,下一步我們需要增加本地化功能。