ABP(6) - 创建书籍 - 官方教程扫盲贴之Create的使用 （详细解说）

1 今天的目标

• 1.1 学习使用模式框
• 1.2 使用New方法

2 新建 modal form, 由于我们的创建书籍页面是弹出框, 所以这里会采用模式框

• 2.1 在 Acme.BookStore.Web 项目的 Pages/Books 目录下新建一个 CreateModal.cshtml Razor页面
• 2.2 替换下面的代码 CreateModal.cshtml.cs

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace Acme.BookStore.Web.Pages.Books
{
    public class CreateModalModel : BookStorePageModel
    {
        [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();
        }
    }
}

• 2.3 修改CreateModal.cshtml如下, 这里是加载模式框,数据, 还有指定路由 asp-page="/Books/CreateModal"

@page
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@model Acme.BookStore.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>

3 添加New按钮

• 3.1 打开 Pages/Books/Index.cshtml 并按如下代码修改 abp-card-header, 可以看到这里是新加了一个按钮 <abp-button id="NewBookButton", 但请注意,这里并未绑定按钮的事件

<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>

-3.2 修改相应的js方法 , 请注意这里绑定了按钮的事件 $('#NewBookButton').click, 这里会调用创建modal的方法,到指定的路由,这里一错,就会导致程序无法打开新建页面 new abp.ModalManager(abp.appPath + 'Books/CreateModal');

var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');

createModal.onResult(function () {
    dataTable.ajax.reload();
});

$('#NewBookButton').click(function (e) {
    e.preventDefault();
    createModal.open();
});