这一章的功能比较简单。下面开始

修改视图

对person的视图文件进行修改

     
        
      
            
                        @L("CreatePerson")            
       
                         @foreach (var person in Model.Items)                {                    
                }                
                        
                         
                              
操作
                              
@L("Name")
                              
@L("EmailAddress")
                              
@L("CreationTime")
                         
                        
                        
         
                                  
编辑|  删除
                                  
@person.Name 
                                  
@person.EmailAddress
                                  
@person.CreationTime
                             
        
                   
        
      
    
     

然后在页面下方弹出层的位置添加一个隐藏域

然后视图页面就已经完善了。

改造添加功能

如果你是vs2013的用户，无法使用代码生成器。可以到这里来下载：

原来的添加功能：

var person = _$form.serializeFormToObject();            abp.ui.setBusy(_$modal);            console.log(person);            _personService.createPersonAsync(person).done(function () {                _$modal.modal("hide");                location.reload(true); //reload page to see new person!            }).always(function() {                abp.ui.clearBusy(_$modal);            });            });

修改后的：

var personEditDto = _$form.serializeFormToObject();            abp.ui.setBusy(_$modal);                    _personService.createOrUpdatePersonAsync({ personEditDto }).done(function() {                _$modal.modal("hide");                location.reload(true); //reload page to see new person!            }).always(function() {                abp.ui.clearBusy(_$modal);            });        });

这样修改后，可以为我们的编辑功能也不用再去粘贴复制js代码了。

添加修改方法

function editPerson(id) {    _personService.getPersonForEditAsync({ id: id }).done(function(data) {        $("input[name=Name]").val(data.person.name);        $("input[name=EmailAddress]").val(data.person.emailAddress);        $("input[name=Id]").val(data.person.id);    });}

就这么简单。

着重说明（敲黑板）：这里特别要注意，因为作者给的demo的js使用的是。()();写法，这样是避免了污染了全局变量。我这里使用的是最快捷的方式来实现编辑功能，也就是说。我们的editPerson方法要写在外面，否则我们也没的onclick()方法是无法触发的。

好了。这样的话，修改和添加调用的都是同一个方法也能保证正常的修改和添加了。

删除功能

 

function deletePerson(id) {    _personService.deletePersonAsync({ id: id }).done(function () {        location.reload(true);    });}

删除功能，也很简单。整体我们对Person的单表操作就算是已经完成了。

 

完善删除功能

我这里说的完善的意思是，我们目前的删除就是点击删除按钮，就开始刷新页面，然后就删除了该行数据。

这样一点都不人性化，我们把他改 的人性化一点。

function deletePerson(id) {    abp.message.confirm(        "是否删除Id为"+id+"的联系人信息", function() {            _personService.deletePersonAsync({ id: id }).done(function() {                location.reload(true);            });        }    );}

看他们的区别。

然后就是这样。

我们对Person的增删改查算是彻底了完成了。