编程知识 购物 网址 新闻 笑话 | 软件 日历 阅读 图书馆 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
   -> 领域驱动设计 -> ASP.NET Zero -> 正文阅读

[领域驱动设计]ASP.NET Zero

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/CreateModal',//加载视图
            scriptUrl: abp.appPath + 'Areas/Mpa/Views/Category/_CreateModal.js',//加载对应js
            modalClass: 'CreateCategoryModal'
        });

        var _editModal = new app.ModalManager({
            viewUrl: abp.appPath + 'Mpa/Category/EditModal',
            scriptUrl: abp.appPath + 'Areas/Mpa/Views/Category/_EditModal.js',
            modalClass: 'EditCategoryModal'
        });
...
//事件注册
        abp.event.on('app.createCategoryModalSaved', function () {
            getCategories(true);
        });

        abp.event.on('app.editCategoryModalSaved', function () {
            getCategories(true);
        });

5.控制器
打开CategoryController,添加如下代码:

private ICategoryAppService _categoryAppService;
        public CategoryController(ICategoryAppService categoryAppService)
        {
            _categoryAppService = categoryAppService;
        }
...
public ActionResult EditModal(int id)
        {
            CategoryOutput category=_categoryAppService.GetCategoryForEdit(new EntityRequestInput(id));
            CategoryViewModel categoryViewModel=new CategoryViewModel()
            {
                Id = category.Id,
                Name = category.Name
            };
            return PartialView("_EditModal", categoryViewModel);
        }

6.添加ViewModel
在..MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Models下新建一个目录Category
在Category下新建CategoryViewModel.cs


代码如下:

public class CategoryViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

7.测试
生成项目,刷新页面,点击编辑按钮


这一次,已经把数据验证一并完成。
  领域驱动设计 最新文章
领域驱动设计的基础知识总结
海西 · 云交付 DevOps实践落地方案
多服务器终端交互利器
《静儿的服务治理私房菜》服务治理和架构
服务治理概述
美团.点评服务治理框架
ASP.NET Zero
1.领域驱动简介.2.领域.子域.限界上下文.3.
东麓庄园系统开发
东麓庄园系统开发
上一篇文章      下一篇文章      查看所有文章
加:2017-01-17 15:20:49  更:2017-05-16 03:47:57 
 
360图书馆 软件开发资料 购物精选 新闻资讯 Chinese Culture 三丰软件 开发 中国文化 阅读网 日历 万年历 2019年12日历
2019-12-8 18:15:39
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程知识