使用ABP CLI創建Web 應用(十)—— 創建增加記錄頁面

現在我們創建增加記錄頁面,在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頁面:



頁面上多了添加記錄的按鈕,點擊這個按鈕,彈出添加記錄的頁面:



我們現在可以添加記錄了,美中不足的是表單中的標籤不是中文,下一步我們需要增加本地化功能。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章