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

修改视图

对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. 谈谈DOMContentLoaded:Javascript中的domReady引入机制

    一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...

  2. iframe用法

    <iframe src="http://caiyanli.top/" height="500"  width="500" frameb ...

  3. JavaScript 对象属性介绍

    本篇主要介绍JS中对象的属性,包括:属性的分类.访问方式.检测属性.遍历属性以及属性特性等内容. 目录 1. 介绍:描述属性的命名方式.查找路径以及分类 2. 属性的访问方式:介绍'.'访问方式.'[ ...

  4. 23种设计模式--单例模式-Singleton

    一.单例模式的介绍 单例模式简单说就是掌握系统的至高点,在程序中只实例化一次,这样就是单例模式,在系统比如说你是该系统的登录的第多少人,还有数据库的连接池等地方会使用,单例模式是最简单,最常用的模式之 ...

  5. 神经网络、logistic回归等分类算法简单实现

    最近在github上看到一个很有趣的项目,通过文本训练可以让计算机写出特定风格的文章,有人就专门写了一个小项目生成汪峰风格的歌词.看完后有一些自己的小想法,也想做一个玩儿一玩儿.用到的原理是深度学习里 ...

  6. notepad++设置默认打开txt文件失效的解决方法

    1.系统环境 win10企业版,64位系统 2.初步设置 设置txt默认为notepad++打开,菜单:设置->首选项->文件关联 选择对应的文件扩展,点击"关闭"按钮 ...

  7. Java compiler level does not match解决方法

    从别的地方导入一个项目的时候,经常会遇到eclipse/Myeclipse报Description  Resource Path Location Type Java compiler level d ...

  8. css样式之border-image

    border-image-source 属性设置边框的图片的路径[none | <image>] div { border: 20px solid #000; border-image-s ...

  9. 使用JavaScript为一张图片设置备选路径

    在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径.这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验. 注意到网页 ...

  10. CSS3变形记(上):千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...