|
|
|
|
@ -53,9 +53,9 @@ namespace Acme.BookStore.Pages.Books
|
|
|
|
|
}
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
* 这个类继承了 `BookStorePageModelBase` 而非默认的 `PageModel`. `BookStorePageModelBase` 继承了 `PageModel` 并且添加了一些Razor页面模型通用的属性和方法.
|
|
|
|
|
* 该类在 `Book` 属性上标记的 `[BindProperty]` 特性绑定了post请求提交上来的数据.
|
|
|
|
|
* 该类通过构造函数注入了 `IBookAppService` 应用服务,并且在 `OnPostAsync` 方法中调用了服务的 `CreateAsync` 方法.
|
|
|
|
|
* 该类派生于 `BookStorePageModelBase` 而非默认的 `PageModel`. `BookStorePageModelBase` 继承了 `PageModel` 并且添加了一些可以被你的page model类使用的通用属性和方法.
|
|
|
|
|
* `Book` 属性上的 `[BindProperty]` 特性将post请求提交上来的数据绑定到该属性上.
|
|
|
|
|
* 该类通过构造函数注入了 `IBookAppService` 应用服务,并且在 `OnPostAsync` 处理程序中调用了服务的 `CreateAsync` 方法.
|
|
|
|
|
|
|
|
|
|
##### CreateModal.cshtml
|
|
|
|
|
|
|
|
|
|
@ -82,7 +82,7 @@ namespace Acme.BookStore.Pages.Books
|
|
|
|
|
|
|
|
|
|
* 这个 modal 使用 `abp-dynamic-form` Tag Helper 根据 `CreateBookViewModel` 类自动构建了表单.
|
|
|
|
|
* `abp-model` 指定了 `Book` 属性为模型对象.
|
|
|
|
|
* `data-ajaxForm` 设置了表单通过AJAX提交.
|
|
|
|
|
* `data-ajaxForm` 设置了表单通过AJAX提交,而不是经典的页面回发.
|
|
|
|
|
* `abp-form-content` tag helper 作为表单控件渲染位置的占位符 (这是可选的,只有你在 `abp-dynamic-form` 中像本示例这样添加了其他内容才需要).
|
|
|
|
|
|
|
|
|
|
#### 添加 "New book" 按钮
|
|
|
|
|
@ -211,7 +211,7 @@ namespace Acme.BookStore
|
|
|
|
|
}
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
* 仅仅是添加 `[AutoMapFrom(typeof(BookDto))]` 特性就可以创建上述映射关系.
|
|
|
|
|
* 仅添加 `[AutoMapFrom(typeof(BookDto))]` 特性就可以创建上述映射关系.
|
|
|
|
|
|
|
|
|
|
#### EditModal.cshtml
|
|
|
|
|
|
|
|
|
|
@ -238,9 +238,9 @@ namespace Acme.BookStore
|
|
|
|
|
</abp-dynamic-form>
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
除了以下几点,这个页面内容和 `CreateModal.cshtml` 非常相似:
|
|
|
|
|
这个页面内容和 `CreateModal.cshtml` 非常相似,除了以下几点:
|
|
|
|
|
|
|
|
|
|
* 此页面包含了一个 `abp-input` 以保存所编辑book实体的 `Id` 属性.
|
|
|
|
|
* 此页面包含了一个 `abp-input` 以保存所编辑book实体的 `Id` 属性值.
|
|
|
|
|
* 此页面指定的post地址是 `Books/EditModal` ,并用文本 *Update* 作为 modal 标题.
|
|
|
|
|
|
|
|
|
|
#### 为表格添加 "操作（Actions）" 下拉菜单
|
|
|
|
|
@ -325,8 +325,8 @@ $(function () {
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
* 通过 `abp.localization.getResource('BookStore')` 可以在客户端使用服务器端定义的相同的本地化语言文本.
|
|
|
|
|
* 定义 `editModal` 为 `ModalManager` 来打开编辑用的 modal 对话框.
|
|
|
|
|
* 在 `columnDefs` 起始处新增一列作为 "Actions" 下拉按钮.
|
|
|
|
|
* 添加了一个名为 `editModal` 的新的 `ModalManager` 来打开编辑用的 modal 对话框.
|
|
|
|
|
* 在 `columnDefs` 起始处新增一列用于显示 "Actions" 下拉按钮.
|
|
|
|
|
* "Edit" 操作只是简单调用 `editModal.open` 来打开编辑对话框.
|
|
|
|
|
|
|
|
|
|
现在,你可以运行程序,通过编辑操作来更新任一个book实体.
|
|
|
|
|
@ -354,7 +354,7 @@ $(function () {
|
|
|
|
|
|
|
|
|
|
* `confirmMessage` 用来在实际执行 `action` 之前向用户进行确认.
|
|
|
|
|
* 通过javascript代理方法 `acme.bookStore.book.delete` 执行一个AJAX请求来删除一个book实体.
|
|
|
|
|
* `abp.notify.info` 用来提示用户操作成功.
|
|
|
|
|
* `abp.notify.info` 用来在执行删除操作后显示一个toastr通知信息.
|
|
|
|
|
|
|
|
|
|
最终的 `index.js` 文件内容如下所示:
|
|
|
|
|
|
|
|
|
|
|
杨涛
7 years ago