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();
});