使用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页面：

页面上多了添加记录的按钮，点击这个按钮，弹出添加记录的页面：

我们现在可以添加记录了，美中不足的是表单中的标签不是中文，下一步我们需要增加本地化功能。