1.添加编辑按钮

打开文件Index.js

【..\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\Category\Index.js】

在actions中添加如下代码：

actions: {
                    title: app.localize('Actions'),//操作列
                    width: '15%',
                    sorting: false,
                    display: function (data) { var $span = $('<span></span>');
                        $('<button class="btn btn-default btn-xs" title="' + app.localize('Edit') + '"><i class="fa fa-edit"></i></button>')
                                .appendTo($span)
                                .click(function () {
                                    _editModal.open({ id: data.record.id });
                                });
                        return $span; }
                },

效果如下：

 

 

2.模态框创建

同样，编辑也需要弹出一个模态框，然后修改值进行保存。

在Category目录下新建一个视图_EditModal.cshtml，代码如下：

@using MyCompanyName.AbpZeroTemplate.Web.Areas.Mpa.Models.Common.Modals
@Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel("编辑分类"))

<div class="modal-body">
    <form name="CategoryForm">
        <input type="hidden" name="Id" value="@Model.Id" />
        <div class="form-group form-md-line-input form-md-floating-label">
            <input type="text" name="Name" value="@Model.Name" class="form-control edited" required >
            <label>名称</label>
        </div>
    </form>
</div>

@Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")

 

同样再新建一个js文件_EditModal.js，代码如下：

var EditCategoryModal = (function ($) {
    app.modals.EditCategoryModal = function () {

        var _modalManager;
        var _categoryService = abp.services.app.category;
        var _$categoryForm = null;


        this.init = function (modalManager) {
            _modalManager = modalManager;

            _$categoryForm = _modalManager.getModal().find('form[name=CategoryForm]');
            _$categoryForm.validate();
        };

        this.save = function () {
            if (!_$categoryForm.valid()) {
                return;
            }

            var category = _$categoryForm.serializeFormToObject();

            _modalManager.setBusy(true);
            _categoryService.updateCategory(
                category
            ).done(function () {
                abp.notify.info(app.localize('SavedSuccessfully'));
                _modalManager.close();
                abp.event.trigger('app.editCategoryModalSaved');
            }).always(function () {
                _modalManager.setBusy(false);
            });
        };
    };
})(jQuery);

 

3.添加方法

打开ICategoryAppService文件，添加如下代码：

void UpdateCategory(CreateCategoryInput input);
CategoryOutput GetCategoryForEdit(EntityRequestInput input);

 

对应的实现类CategoryAppService，添加如下代码：

public void UpdateCategory(CreateCategoryInput input)
        {
int count = _categoryRepository.Count(a => a.Name.Equals(input.Name) && a.Id!=input.Id);
            if (count > 0)
            {
                throw new UserFriendlyException("分类名称已存在！");
            }
            var category=_categoryRepository.Get(input.Id);
            category.Name = input.Name;
        }

public CategoryOutput GetCategoryForEdit(EntityRequestInput input)
        {
            var category = _categoryRepository.Get(input.Id);
            return new CategoryOutput()
            {
                Id = category.Id,
                Name = category.Name
            };
        }

 

4.修改Index.js

...
var _createModal = new app.ModalManager({
            viewUrl: abp.appPath + 'Mpa/Category/Cre