ASP.NET Core MVC / Razor页面教程-第2部分 CRUD操作

一、添加一本书

在本节中,您将学习如何创建新的模式对话框形式来创建新书。模态对话框如下图所示:

1、创建模板form

ABPBookStore.Web项目的 Pages/Books文件夹下,创建一个razor页面命名为CreateModal.cshtml, 打开CreateModal.cshtml.cs文件(CreateModalModel类)并替换为以下代码:

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

  • 此类从BookStorePageModel而不是standard 派生PageModelBookStorePageModel继承PageModel并添加一些可以在页面模型类中使用的常见属性和方法。
  • [BindProperty]属性上的Book属性将发布请求数据绑定到该属性。
  • 此类仅将注入IBookAppService构造函数中,并CreateAsyncOnPostAsync处理程序中调用方法。

CreateModal.cshtml

打开CreateModal.cshtml文件并粘贴以下代码:

@page
@inherits ABPBookStore.Web.Pages.ABPBookStorePage
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@model ABPBookStore.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>

此模态使用abp-dynamic-form标签帮助程序从模型自动创建表单 CreateBookViewModel

  • abp-modelBook在这种情况下,attribute指示模型对象所在的属性。
  • data-ajaxForm 属性将表单设置为通过AJAX提交,而不是经典的页面post。
  • abp-form-content标记帮助器是呈现表单控件的占位符(仅当您在abp-dynamic-form标记中添加了其他内容(如此页面一样)时才是可选的,并且是必需的)。

2、添加“NewBook”按钮

打开Pages/Books/Index.cshtml并设置abp-card-header标签内容,如下所示:

<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>
这增加了一个新按钮NewBook在右上角:

接下来打开pages/books/index.js并在Datatable配置之后添加以下代码:

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

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

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

  • abp.ModalManager是在客户端管理模式的助手类。它在内部使用Twitter Bootstrap的标准模式,但是通过提供一个简单的API来抽象许多细节。

现在,您可以运行该应用程序并使用新的模式形式添加新书。

二、更新一本书

1、EditModal.cshtml.cs

在 ABPBookStore.Web项目的Pages/Books文件夹下创建一个Razor页面命名为EditModal.cshtml

EditModal.cshtml.cs

打开EditModal.cshtml.cs文件(EditModalModel类)并替换为以下代码:

namespace ABPBookStore.Web.Pages.Books
{
    public class EditModalModel : ABPBookStorePageModel
    {
        [HiddenInput]
        [BindProperty(SupportsGet = true)]
        public Guid Id { get; set; }

        [BindProperty]
        public CreateUpdateBookDto Book { get; set; }

        private readonly IBookAppService _bookAppService;

        public EditModalModel(IBookAppService bookAppService)
        {
            _bookAppService = bookAppService;
        }

        public async Task OnGetAsync()
        {
            var bookDto = await _bookAppService.GetAsync(Id);
            Book = ObjectMapper.Map<BookDto, CreateUpdateBookDto>(bookDto);
        }

        public async Task<IActionResult> OnPostAsync()
        {
            await _bookAppService.UpdateAsync(Id, Book);
            return NoContent();
        }
    }
}

  • [HiddenInput][BindProperty]是标准的ASP.NET MVC的核心属性。SupportsGet用于能够从请求的查询字符串参数获取Id值。
  • 在该GetAsync方法中,我们得到来自BookAppService的BookDto,这个被映射到DTO对象CreateUpdateBookDto
  • OnPostAsyncBookAppService.UpdateAsync()方法更新实体。

2、从BookDto映射到CreateUpdateBookDto

为了能够将映射BookDtoCreateUpdateBookDto,请配置新的映射。在ABPBookStore.Web项目中打开ABPBookStoreWebAutoMapperProfile.cs并按如下所示进行更改:

public ABPBookStoreWebAutoMapperProfile()
        {
            //Define your AutoMapper configuration here for the Web project.
            CreateMap<BookDto, CreateUpdateBookDto>();
        }

添加了CreateMap<BookDto, CreateUpdateBookDto>();定义此映射的功能。

3、EditModal.cshtml

用以下内容替换EditModal.cshtml内容

@page
@inherits ABPBookStore.Web.Pages.ABPBookStorePage
@using ABPBookStore.Web.Pages.Books
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@model EditModalModel
@{
    Layout = null;
}
<abp-dynamic-form abp-model="Book" data-ajaxForm="true" asp-page="/Books/EditModal">
    <abp-modal>
        <abp-modal-header title="@L["Update"].Value"></abp-modal-header>
        <abp-modal-body>
            <abp-input asp-for="Id" />
            <abp-form-content />
        </abp-modal-body>
        <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    </abp-modal>
</abp-dynamic-form>

该页面与CreateModal.cshtml十分相似,除了:

  • 它包括一个abp-input用于Id存储Id编辑书的属性(这是一个隐藏的输入)。
  • 它将Books/EditModal用作发布URL,而“ Update”文本用作模式标题。

3、在表格中添加“Actions”下拉菜单

我们将在表中添加一个名为Actions的下拉按钮。

打开Pages/Books/Index.cshtml页面并更改<abp-table>部分,如下所示:

<abp-table striped-rows="true" id="BooksTable">
            <thead>
                <tr>
                    <th>@L["Actions"]</th>
                    <th>@L["Name"]</th>
                    <th>@L["Type"]</th>
                    <th>@L["PublishDate"]</th>
                    <th>@L["Price"]</th>
                    <th>@L["CreationTime"]</th>
                </tr>
            </thead>
        </abp-table>

打开pages/books/index.js并替换以下内容:

 

 

 

$(function () {

    var l = abp.localization.getResource('ABPBookStore');

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

    var dataTable = $('#BooksTable').DataTable(abp.libs.datatables.normalizeConfiguration({
        processing: true,
        serverSide: true,
        paging: true,
        searching: false,
        autoWidth: false,
        scrollCollapse: true,
        order: [[1, "asc"]],
        ajax: abp.libs.datatables.createAjax(aBPBookStore.book.getList),
        columnDefs: [
            {
                rowAction: {
                    items:
                        [
                            {
                                text: l('Edit'),
                                action: function (data) {
                                    editModal.open({ id: data.record.id });
                                }
                            }
                        ]
                }
            },
            { data: "name" },
            { data: "type" },
            { data: "publishDate" },
            { data: "price" },
            { data: "creationTime" }
        ]
    }));

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

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

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

  • 使用abp.localization.getResource('ABPBookStore')能够使用服务器端上定义的相同本地化文本。
  • 添加了一个名为createModal的ModalManager以打开“创建模式”对话框。
  • 添加了一个名为editModal的ModalManager以打开编辑模式对话框。
  • 在本columnDefs节的开头添加了新列。此列用于“ Actions ”下拉按钮。
  • “ New Book ”操作只需调用createModal.open()即可打开创建对话框。
  • “ Edit ”操作只需调用editModal.open()即可打开编辑对话框。

您可以通过选择编辑操作来运行该应用程序并编辑任何书籍。最终的UI如下所示:

三、删除一本书

打开,pages/books/index.js然后将新项添加到rowAction items

{
                                text: l('Delete'),
                                confirmMessage: function (data) {
                                    return l('BookDeletionConfirmationMessage', data.record.name);
                                },
                                action: function (data) {
                                    aBPBookStore.book
                                        .delete(data.record.id)
                                        .then(function () {
                                            abp.notify.info(l('SuccessfullyDeleted'));
                                            dataTable.ajax.reload();
                                        });
                                }
   }

  • confirmMessage选项用于在执行action之前询问确认问题。
  • aBPBookStore.book.delete() 方法向JavaScript代理功能发出AJAX请求以删除一本书。
  • abp.notify.info() 显示删除操作后的通知。

en.jsonAcme.BookStore.Domain.Shared项目中打开并添加以下翻译:

 "BookDeletionConfirmationMessage": "Are you sure to delete the book {0}?",
    "SuccessfullyDeleted": "Successfully deleted"

运行该应用程序,然后尝试删除一本书。

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读