欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET Zero--10.一个例子(3)商品分类管理-新建

程序员文章站 2022-03-03 09:33:11
1.打开Index视图 页面中添加一个按钮,代码如下:

分类
1.打开Index视图 页面中添加一个按钮,代码如下:
<div class="row margin-bottom-5">
    <div class="col-xs-6">
        <div class="page-head">
            <div class="page-title">
                <h1>
                    <span>分类</span> <small>@L("CategoryManager")</small>
                </h1>
            </div>
        </div>
    </div>
    @*这里是添加的按钮代码*@
    <div class="col-xs-6 text-right">
        <button id="CreateNewCategoryButton" class="btn btn-primary blue"><i class="fa fa-plus"></i>添加分类</button>
    </div>
</div>
效果如下:  ASP.NET Zero--10.一个例子(3)商品分类管理-新建 点击按钮会弹出一个模态框进行分类添加   2.模态框创建 在Category目录下新建一个视图_CreateModal.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">
        <div class="form-group form-md-line-input form-md-floating-label">
            <input class="form-control" type="text" name="Name">
            <label>名称</label>
        </div>
    </form>
</div>
@Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")

 

同样再新建一个js文件_CreateModal.js,代码如下:
(function ($) {

    app.modals.CreateCategoryModal = function () {
        var _categoryService = abp.services.app.category;
        var _$categoryForm = null;

        var _modalManager;
        this.init = function (modalManager) {
            _modalManager = modalManager;
            //取出Form表单
            _$categoryForm = _modalManager.getModal().find('form[name=CategoryForm]');
            };

        this.save = function () {
            //序列化参数
            var category = _$categoryForm.serializeFormToObject();
            _modalManager.setBusy(true);
            _categoryService.createCategory(
                category
            ).done(function () {
                abp.notify.info(app.localize('SavedSuccessfully'));
                _modalManager.close();
                abp.event.trigger('app.createCategoryModalSaved');
            }).always(function () {
                _modalManager.setBusy(false);
            });
        };
    };
})(jQuery);

 

3.添加新建方法 打开ICategoryAppService文件,添加如下代码:
void CreateCategory(CreateCategoryInput input);

 

对应的实现类CategoryAppService,添加如下代码:
public void CreateCategory(CreateCategoryInput input)
{
       _categoryRepository.Insert(new Category()
       {
           Name = input.Name
       });
}

 

4.添加Dto 在Dto目录下新建一个类CreateCategoryInput.cs,代码如下:
public class CreateCategoryInput:EntityDto,IInputDto
    {
        public string Name { get; set; }
    }

 

5.修改Index.js 最后打开Index.js,添加代码如下:
...
var _categoryService = abp.services.app.category;

        var _createModal = new app.ModalManager({
            viewUrl: abp.appPath + 'Mpa/Category/CreateModal',//加载视图
            scriptUrl: abp.appPath + 'Areas/Mpa/Views/Category/_CreateModal.js',//加载对应js
            modalClass: 'CreateCategoryModal'
        });
...
//页面加载完执行
        getCategories();

        //添加点击事件
        $('#CreateNewCategoryButton').click(function () {
            _createModal.open();
        });

        //事件注册
        abp.event.on('app.createCategoryModalSaved', function () {
            getCategories(true);
        });

 

6.控制器 打开CategoryController,添加如下代码:
public ActionResult CreateModal()
{
      return PartialView("_CreateModal");
}

 

最后,重新生成项目,刷新页面,点击添加分类 ASP.NET Zero--10.一个例子(3)商品分类管理-新建ASP.NET Zero--10.一个例子(3)商品分类管理-新建