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

修改视图

对person的视图文件进行修改

<div class="row">
<div class="col-md-12">
<button data-toggle="modal" data-target="#PersonCreateModal" class="btn btn-primary pull-right">
<i class="fa fa-plus"></i> @L("CreatePerson")</button>
<table class="table">
<thead>
<tr>
<th>操作</th>
<th>@L("Name")</th>
<th>@L("EmailAddress")</th>
<th>@L("CreationTime")</th>
</tr>
</thead>
<tbody>
@foreach (var person in Model.Items)
{
<tr>
<td><a href="javascript:void()" data-toggle="modal" data-target="#PersonCreateModal" onclick="editPerson(@person.Id);" >编辑</a>| <a href="javascript:void()" onclick="deletePerson(@person.Id);"> 删除</a></td>
<td>@person.Name </td>
<td>@person.EmailAddress</td>
<td>@person.CreationTime</td>
</tr>
}
</tbody>
</table> </div> </div>

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

<input   type="hidden"   name="Id" >

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

改造添加功能

如果你是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的增删改查算是彻底了完成了。

-返回目录-  ABP打造一个《电话簿项目》

ABP教程-对Person信息进行操作的更多相关文章

  1. ABP教程-打造一个《电话簿项目》-目录-MPA版本-基于ABP1.13版本

    此系列文章会进行不定期的更新,应该会有6章左右. 感兴趣的朋友可以跟着看看,本教程适合已经看过ABP的文档但是又无从下手的小伙伴们. 初衷: 发布系列教程的原因是发现ABP在园子火了很久,但是发现还是 ...

  2. ArcGIS Pro 简明教程(2)基础操作和简单制图

    ArcGIS Pro 简明教程(2)基础操作和简单制图 By 李远祥 本章主要介绍ArcGIS Pro如何加载数据并进行简单的地图制作,以基本的操作为主. 上一章节介绍过,ArcGIS Pro是可以直 ...

  3. Python程序练习4--模拟员工信息数据库操作

    1.功能简介 此程序模拟员工信息数据库操作,按照语法输入指令即能实现员工信息的增.删.改.查功能.   2.实现方法 架构: 本程序采用python语言编写,关键在于指令的解析和执行:其中指令解析主要 ...

  4. XamarinEssentials教程应用程序信息AppInfo

    XamarinEssentials教程应用程序信息AppInfo   很多应用程序都提供一个“关于”功能.该功能会向用户展示应用程序的基本信息,如版本号.应用程序名称等.这个功能可以通过Xamarin ...

  5. VM装mac10.9教程+报错信息解决办法

    VM装mac10.9教程+报错信息解决办法 教程1: 教你在Vmware 10下安装苹果Mac10.9系统 地址:http://tieba.baidu.com/p/2847457021 教程2: VM ...

  6. 【原创】【2】rich editor系列教程。了解document.execommand操作,保存丢失的range,实时反馈样式给工具栏

    [原创][2]rich editor系列教程.了解document.execommand操作,保存丢失的range,实时反馈样式给工具栏 索引目录:http://www.cnblogs.com/hen ...

  7. ORACLE查询当前连接的用户信息及操作的SQL语句

    ORACLE--查询当前连接的用户信息及操作的SQL语句    select sid,      status,      v$session.username 用户名,      last_call ...

  8. ABP教程(四)- 开始一个简单的任务管理系统 - 实现UI端的增删改查

    接上一篇:ABP教程(三)- 开始一个简单的任务管理系统 – 后端编码 1.实现UI端的增删改查 1.1添加增删改查代码 打开SimpleTaskSystem.sln解决方案,添加一个“包含视图的MV ...

  9. 【MongoDB详细使用教程】四、python操作MongoDB

    目录 1.安装pymongo 2.连接数据库 3.操作数据库 3.1.查 3.2.增 3.3.改 3.4.删 使用第三方库pymongo来实现python对MongoDB的操作 pymongo官方文档 ...

随机推荐

  1. Bootstrap-Select 动态加载数据的小记

    关于前端框架系列的可以参考我我刚学Bootstrap时候写的LoT.UI http://www.cnblogs.com/dunitian/p/4822808.html#lotui bootstrap- ...

  2. Android 问题汇总(持续更新)

    Q1:Error:(93, 12) 错误: 需要常量表达式 问题描述:这个问题是在添加一个module到项目中时遇到的,主要原因是因为原来module中的R文件是不会以final形式存在的,但是在mo ...

  3. springmvc+mybatis+spring 整合 bootstrap html5

    A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技 ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. BPM配置故事之案例5-必填与水印文本

    物资申请表改好了,但是没过两天老李又找来了. 老李:这个表格每次都是各个部门发给我们,再由我们采购部来填,太影响效率了,以后要让他们自己填. 小明:那就让他们填呗,他们有权限啊. 老李:可是他们说不会 ...

  6. Android中常见的图片加载框架

    图片加载涉及到图片的缓存.图片的处理.图片的显示等.而随着市面上手机设备的硬件水平飞速发展,对图片的显示要求越来越高,稍微处理不好就会造成内存溢出等问题.很多软件厂家的通用做法就是借用第三方的框架进行 ...

  7. Floyd-Warshall 全源最短路径算法

    Floyd-Warshall 算法采用动态规划方案来解决在一个有向图 G = (V, E) 上每对顶点间的最短路径问题,即全源最短路径问题(All-Pairs Shortest Paths Probl ...

  8. 《Effective Java》学习笔记——积累和激励

    从一个实际案例说起 国庆长假前一个礼拜,老大给我分配了这么一个bug,就是打印出来的报表数量为整数的,有的带小数位,有的不带,毫无规律. 根据短短的两个多月的工作经验以及猜测,最终把范围缩小到以下这段 ...

  9. HTML5网页录音和压缩,边猜边做..(附源码)

    宣传一下自己的qq群: (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以 ...

  10. Android Secret Code

    我们很多人应该都做过这样的操作,打开拨号键盘输入*#*#4636#*#*等字符就会弹出一个界面显示手机相关的一些信息,这个功能在Android中被称为android secret code,除了这些系 ...