MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
来源:互联网 发布:caliber中文软件 编辑:程序博客网 时间:2024/05/19 16:34
转载自:http://www.cnblogs.com/lipan/archive/2011/03/11/1980227.html
看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作。表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB。nosql虽然概念新颖,但是MongoDB基本应用实现起来还是比较轻松的,甚至代码比基本的ADO.net访问关系数据源还要简洁。由于其本身的“非关系”的数据存储方式,使得对象关系映射这个环节对于MongoDB来讲显得毫无意义,因此我们也不会对MongoDB引入所谓的“ORM”框架。
下面我们将逐步讲解怎么在MVC模式下将MongoDB数据读取,并展示在前台Jqgrid表格上。这个“简易系统”的基本设计思想是这样的:我们在视图层展示表格,Jqgrid相关Js逻辑全部放在一个Js文件中,控制层实现了“增删查改”四个业务,MongoDB的基本数据访问放在了模型层实现。下面我们一步步实现。
一、实现视图层Jqgrid表格逻辑
首先,我们新建一个MVC空白项目,添加好jQuery、jQueryUI、Jqgrid的前端框架代码:
然后在Views的Home文件夹下新建视图“Index.aspx”,在视图的body标签中添加如下HTML代码:
<
div
>
<
table
id
=
"table1"
>
</
table
>
<
div
id
=
"div1"
>
</
div
>
</
div
>
接着新建Scripts\Home文件夹,在该目录新建“Index.js”文件,并再视图中引用,代码如下:
001
jQuery(document).ready(
function
() {
002
003
//jqGrid初始化
004
jQuery(
"#table1"
).jqGrid({
005
url:
'/Home/UserList'
,
006
datatype:
'json'
,
007
mtype:
'POST'
,
008
colNames: [
'登录名'
,
'姓名'
,
'年龄'
,
'手机号'
,
'邮箱地址'
,
'操作'
],
009
colModel: [
010
{ name:
'UserId'
, index:
'UserId'
, width: 180, editable:
true
},
011
{ name:
'UserName'
, index:
'UserName'
, width: 200, editable:
true
},
012
{ name:
'Age'
, index:
'Age'
, width: 150, editable:
true
},
013
{ name:
'Tel'
, index:
'Tel'
, width: 150, editable:
true
},
014
{ name:
'Email'
, index:
'Email'
, width: 150, editable:
true
},
015
{ name:
'Edit'
, index:
'Edit'
, width: 150, editable:
false
, align:
'center'
}
016
],
017
pager:
'#div1'
,
018
postData: {},
019
rowNum: 5,
020
rowList: [5, 10, 20],
021
sortable:
true
,
022
caption:
'用户信息管理'
,
023
hidegrid:
false
,
024
rownumbers:
true
,
025
viewrecords:
true
026
}).navGrid(
'#div1'
, { edit:
false
, add:
false
, del:
false
})
027
.navButtonAdd(
'#div1'
, {
028
caption:
"编辑"
,
029
buttonicon:
"ui-icon-add"
,
030
onClickButton:
function
() {
031
var
id = $(
"#table1"
).getGridParam(
"selrow"
);
032
if
(id ==
null
) {
033
alert(
"请选择行!"
);
034
return
;
035
}
036
if
(id ==
"newId"
)
return
;
037
$(
"#table1"
).editRow(id);
038
$(
"#table1"
).find(
"#"
+ id +
"_UserId"
).attr(
"readonly"
,
"readOnly"
);
039
$(
"#table1"
).setCell(id,
"Edit"
,
"<input id='Button1' type='button' value='提交' onclick='Update(\""
+ id +
"\")' /><input id='Button2' type='button' value='取消' onclick='Cancel(\""
+ id +
"\")' />"
);
040
}
041
}).navButtonAdd(
'#div1'
, {
042
caption:
"删除"
,
043
buttonicon:
"ui-icon-del"
,
044
onClickButton:
function
() {
045
var
id = $(
"#table1"
).getGridParam(
"selrow"
);
046
if
(id ==
null
) {
047
alert(
"请选择行!"
);
048
return
;
049
}
050
Delete(id);
051
}
052
}).navButtonAdd(
'#div1'
, {
053
caption:
"新增"
,
054
buttonicon:
"ui-icon-add"
,
055
onClickButton:
function
() {
056
$(
"#table1"
).addRowData(
"newId"
, -1);
057
$(
"#table1"
).editRow(
"newId"
);
058
$(
"#table1"
).setCell(
"newId"
,
"Edit"
,
"<input id='Button1' type='button' value='提交' onclick='Add()' /><input id='Button2' type='button' value='取消' onclick='Cancel(\"newId\")' />"
);
059
}
060
});
061
});
062
063
//取消编辑状态
064
function
Cancel(id) {
065
if
(id ==
"newId"
) $(
"#table1"
).delRowData(
"newId"
);
066
else
$(
"#table1"
).restoreRow(id);
067
}
068
069
//向后台ajax请求新增数据
070
function
Add() {
071
var
UserId = $(
"#table1"
).find(
"#newId"
+
"_UserId"
).val();
072
var
UserName = $(
"#table1"
).find(
"#newId"
+
"_UserName"
).val();
073
var
Age = $(
"#table1"
).find(
"#newId"
+
"_Age"
).val();
074
var
Tel = $(
"#table1"
).find(
"#newId"
+
"_Tel"
).val();
075
var
Email = $(
"#table1"
).find(
"#newId"
+
"_Email"
).val();
076
077
$.ajax({
078
type:
"POST"
,
079
url:
"/Home/Add"
,
080
data:
"UserId="
+ UserId +
"&UserName="
+ UserName +
"&Age="
+ Age +
"&Tel="
+ Tel +
"&Email="
+ Email,
081
success:
function
(msg) {
082
alert(
"新增数据: "
+ msg);
083
$(
"#table1"
).trigger(
"reloadGrid"
);
084
}
085
});
086
}
087
088
//向后台ajax请求更新数据
089
function
Update(id) {
090
var
UserId = $(
"#table1"
).find(
"#"
+ id +
"_UserId"
).val();
091
var
UserName = $(
"#table1"
).find(
"#"
+ id +
"_UserName"
).val();
092
var
Age = $(
"#table1"
).find(
"#"
+ id +
"_Age"
).val();
093
var
Tel = $(
"#table1"
).find(
"#"
+ id +
"_Tel"
).val();
094
var
Email = $(
"#table1"
).find(
"#"
+ id +
"_Email"
).val();
095
096
$.ajax({
097
type:
"POST"
,
098
url:
"/Home/Update"
,
099
data:
"UserId="
+ UserId +
"&UserName="
+ UserName +
"&Age="
+ Age +
"&Tel="
+ Tel +
"&Email="
+ Email,
100
success:
function
(msg) {
101
alert(
"修改数据: "
+ msg);
102
$(
"#table1"
).trigger(
"reloadGrid"
);
103
}
104
});
105
}
106
107
//向后台ajax请求删除数据
108
function
Delete(id) {
109
var
UserId = $(
"#table1"
).getCell(id,
"UserId"
);
110
$.ajax({
111
type:
"POST"
,
112
url:
"/Home/Delete"
,
113
data:
"UserId="
+ UserId,
114
success:
function
(msg) {
115
alert(
"删除数据: "
+ msg);
116
$(
"#table1"
).trigger(
"reloadGrid"
);
117
}
118
});
119
}
二、实现控制层业务
在Controllers目录下新建控制器“HomeController.cs”,Index.js中产生了四个ajax请求,对应控制层也有四个业务方法。HomeController代码如下:
001
public
class
HomeController : Controller
002
{
003
UserModel userModel =
new
UserModel();
004
public
ActionResult Index()
005
{
006
return
View();
007
}
008
009
/// <summary>
010
/// 获取全部用户列表,通过json将数据提供给jqGrid
011
/// </summary>
012
public
JsonResult UserList(
string
sord,
string
sidx,
string
rows,
string
page)
013
{
014
var list = userModel.FindAll();
015
int
i = 0;
016
var query = from u
in
list
017
select
new
018
{
019
id = i++,
020
cell =
new
string
[]{
021
u[
"UserId"
].ToString(),
022
u[
"UserName"
].ToString(),
023
u[
"Age"
].ToString(),
024
u[
"Tel"
].ToString(),
025
u[
"Email"
].ToString(),
026
"-"
027
}
028
};
029
030
var data =
new
031
{
032
total = query.Count() / Convert.ToInt32(rows) + 1,
033
page = Convert.ToInt32(page),
034
records = query.Count(),
035
rows = query.Skip(Convert.ToInt32(rows) * (Convert.ToInt32(page) - 1)).Take(Convert.ToInt32(rows))
036
};
037
038
return
Json(data, JsonRequestBehavior.AllowGet);
039
}
040
041
/// <summary>
042
/// 响应Js的“Add”ajax请求,执行添加用户操作
043
/// </summary>
044
public
ContentResult Add(
string
UserId,
string
UserName,
int
Age,
string
Tel,
string
Email)
045
{
046
Document doc =
new
Document();
047
doc[
"UserId"
] = UserId;
048
doc[
"UserName"
] = UserName;
049
doc[
"Age"
] = Age;
050
doc[
"Tel"
] = Tel;
051
doc[
"Email"
] = Email;
052
053
try
054
{
055
userModel.Add(doc);
056
return
Content(
"添加成功"
);
057
}
058
catch
059
{
060
return
Content(
"添加失败"
);
061
}
062
}
063
064
/// <summary>
065
/// 响应Js的“Delete”ajax请求,执行删除用户操作
066
/// </summary>
067
public
ContentResult Delete(
string
UserId)
068
{
069
try
070
{
071
userModel.Delete(UserId);
072
return
Content(
"删除成功"
);
073
}
074
catch
075
{
076
return
Content(
"删除失败"
);
077
}
078
}
079
080
/// <summary>
081
/// 响应Js的“Update”ajax请求,执行更新用户操作
082
/// </summary>
083
public
ContentResult Update(
string
UserId,
string
UserName,
int
Age,
string
Tel,
string
Email)
084
{
085
Document doc =
new
Document();
086
doc[
"UserId"
] = UserId;
087
doc[
"UserName"
] = UserName;
088
doc[
"Age"
] = Age;
089
doc[
"Tel"
] = Tel;
090
doc[
"Email"
] = Email;
091
try
092
{
093
userModel.Update(doc);
094
return
Content(
"修改成功"
);
095
}
096
catch
097
{
098
return
Content(
"修改失败"
);
099
}
100
}
101
}
三、实现模型层数据访问
最后,我们在Models新建一个Home文件夹,添加模型“UserModel.cs”,实现MongoDB数据库访问代码如下:
01
public
class
UserModel
02
{
03
//链接字符串(此处三个字段值根据需要可为读配置文件)
04
public
string
connectionString =
"mongodb://localhost"
;
05
//数据库名
06
public
string
databaseName =
"myDatabase"
;
07
//集合名
08
public
string
collectionName =
"userCollection"
;
09
10
private
Mongo mongo;
11
private
MongoDatabase mongoDatabase;
12
private
MongoCollection<Document> mongoCollection;
13
14
public
UserModel()
15
{
16
mongo =
new
Mongo(connectionString);
17
mongoDatabase = mongo.GetDatabase(databaseName)
as
MongoDatabase;
18
mongoCollection = mongoDatabase.GetCollection<Document>(collectionName)
as
MongoCollection<Document>;
19
mongo.Connect();
20
}
21
~UserModel()
22
{
23
mongo.Disconnect();
24
}
25
26
/// <summary>
27
/// 增加一条用户记录
28
/// </summary>
29
/// <param name="doc"></param>
30
public
void
Add(Document doc)
31
{
32
mongoCollection.Insert(doc);
33
}
34
35
/// <summary>
36
/// 删除一条用户记录
37
/// </summary>
38
public
void
Delete(
string
UserId)
39
{
40
mongoCollection.Remove(
new
Document { {
"UserId"
, UserId } });
41
}
42
43
/// <summary>
44
/// 更新一条用户记录
45
/// </summary>
46
/// <param name="doc"></param>
47
public
void
Update(Document doc)
48
{
49
mongoCollection.FindAndModify(doc,
new
Document { {
"UserId"
, doc[
"UserId"
].ToString() } });
50
}
51
52
/// <summary>
53
/// 查找所有用户记录
54
/// </summary>
55
/// <returns></returns>
56
public
IEnumerable<Document> FindAll()
57
{
58
return
mongoCollection.FindAll().Documents;
59
}
60
61
}
四、小结
代码下载:http://files.cnblogs.com/lipan/MongoDB_003.rar
自此为止一个简单MongoDB表格数据操作的功能就实现完毕了,相信读者在看完这篇文章后,差不多都可以轻松实现MongoDB项目的开发应用了。聪明的你一定会比本文做的功能更完善,更好。下篇计划讲解linq的方式访问数据集合。
出处:[Lipan] (http://www.cnblogs.com/lipan/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- 【NOSQL】非关系型数据库MongoDB ( 在MVC模式下通过Jqgrid表格操作MongoDB数据 ) .
- MongoDB学习笔记(数据操作)
- MongoDB学习笔记(数据操作)
- MongoDB学习笔记(数据操作)
- MongoDB学习笔记(数据操作)
- MongoDB笔记三之基本数据操作
- MongoDB学习笔记(三)使用Spring Data操作MongoDB
- android 引入第三方jar出错问题
- 如何在程序启动默认浏览器与电子邮件系统
- 使用SQL Server维护计划实现数据库定时自动备份
- blog trackback test
- Android应用程序消息处理机制Handler分析
- MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据
- VMware网络配置详解:三种网络模式简介及实现
- iphone消息通信机制NSNotificationCenter
- yii框架学习心得part1
- 在IHttpHandler中使用SESSION
- 幸福是一段旅程 ——艾佛烈德•德索萨
- 网店常用的商品属性选择功能(JQuery)
- 提高java代码运行效率(2)
- SQL Server 2008如何创建定期自动备份任务