转载自: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代码:
接着新建Scripts\Home文件夹,在该目录新建“Index.js”文件,并再视图中引用,代码如下:
001 | jQuery(document).ready( function () { |
004 | jQuery( "#table1" ).jqGrid({ |
005 | url: '/Home/UserList' , |
008 | colNames: [ '登录名' , '姓名' , '年龄' , '手机号' , '邮箱地址' , '操作' ], |
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' } |
020 | rowList: [5, 10, 20], |
026 | }).navGrid( '#div1' , { edit: false , add: false , del: false }) |
027 | .navButtonAdd( '#div1' , { |
029 | buttonicon: "ui-icon-add" , |
030 | onClickButton: function () { |
031 | var id = $( "#table1" ).getGridParam( "selrow" ); |
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 + "\")' />" ); |
041 | }).navButtonAdd( '#div1' , { |
043 | buttonicon: "ui-icon-del" , |
044 | onClickButton: function () { |
045 | var id = $( "#table1" ).getGridParam( "selrow" ); |
052 | }).navButtonAdd( '#div1' , { |
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\")' />" ); |
065 | if (id == "newId" ) $( "#table1" ).delRowData( "newId" ); |
066 | else $( "#table1" ).restoreRow(id); |
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(); |
080 | data: "UserId=" + UserId + "&UserName=" + UserName + "&Age=" + Age + "&Tel=" + Tel + "&Email=" + Email, |
081 | success: function (msg) { |
082 | alert( "新增数据: " + msg); |
083 | $( "#table1" ).trigger( "reloadGrid" ); |
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(); |
099 | data: "UserId=" + UserId + "&UserName=" + UserName + "&Age=" + Age + "&Tel=" + Tel + "&Email=" + Email, |
100 | success: function (msg) { |
101 | alert( "修改数据: " + msg); |
102 | $( "#table1" ).trigger( "reloadGrid" ); |
109 | var UserId = $( "#table1" ).getCell(id, "UserId" ); |
113 | data: "UserId=" + UserId, |
114 | success: function (msg) { |
115 | alert( "删除数据: " + msg); |
116 | $( "#table1" ).trigger( "reloadGrid" ); |
二、实现控制层业务
在Controllers目录下新建控制器“HomeController.cs”,Index.js中产生了四个ajax请求,对应控制层也有四个业务方法。HomeController代码如下:
001 | public class HomeController : Controller |
003 | UserModel userModel = new UserModel(); |
004 | public ActionResult Index() |
010 | /// 获取全部用户列表,通过json将数据提供给jqGrid |
012 | public JsonResult UserList( string sord, string sidx, string rows, string page) |
014 | var list = userModel.FindAll(); |
016 | var query = from u in list |
021 | u[ "UserId" ].ToString(), |
022 | u[ "UserName" ].ToString(), |
025 | u[ "Email" ].ToString(), |
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)) |
038 | return Json(data, JsonRequestBehavior.AllowGet); |
042 | /// 响应Js的“Add”ajax请求,执行添加用户操作 |
044 | public ContentResult Add( string UserId, string UserName, int Age, string Tel, string Email) |
046 | Document doc = new Document(); |
047 | doc[ "UserId" ] = UserId; |
048 | doc[ "UserName" ] = UserName; |
051 | doc[ "Email" ] = Email; |
056 | return Content( "添加成功" ); |
060 | return Content( "添加失败" ); |
065 | /// 响应Js的“Delete”ajax请求,执行删除用户操作 |
067 | public ContentResult Delete( string UserId) |
071 | userModel.Delete(UserId); |
072 | return Content( "删除成功" ); |
076 | return Content( "删除失败" ); |
081 | /// 响应Js的“Update”ajax请求,执行更新用户操作 |
083 | public ContentResult Update( string UserId, string UserName, int Age, string Tel, string Email) |
085 | Document doc = new Document(); |
086 | doc[ "UserId" ] = UserId; |
087 | doc[ "UserName" ] = UserName; |
090 | doc[ "Email" ] = Email; |
093 | userModel.Update(doc); |
094 | return Content( "修改成功" ); |
098 | return Content( "修改失败" ); |
三、实现模型层数据访问
最后,我们在Models新建一个Home文件夹,添加模型“UserModel.cs”,实现MongoDB数据库访问代码如下:
06 | public string databaseName = "myDatabase" ; |
08 | public string collectionName = "userCollection" ; |
11 | private MongoDatabase mongoDatabase; |
12 | private MongoCollection<Document> mongoCollection; |
16 | mongo = new Mongo(connectionString); |
17 | mongoDatabase = mongo.GetDatabase(databaseName) as MongoDatabase; |
18 | mongoCollection = mongoDatabase.GetCollection<Document>(collectionName) as MongoCollection<Document>; |
29 | /// <param name="doc"></param> |
30 | public void Add(Document doc) |
32 | mongoCollection.Insert(doc); |
38 | public void Delete( string UserId) |
40 | mongoCollection.Remove( new Document { { "UserId" , UserId } }); |
46 | /// <param name="doc"></param> |
47 | public void Update(Document doc) |
49 | mongoCollection.FindAndModify(doc, new Document { { "UserId" , doc[ "UserId" ].ToString() } }); |
55 | /// <returns></returns> |
56 | public IEnumerable<Document> FindAll() |
58 | return mongoCollection.FindAll().Documents; |
四、小结
代码下载:http://files.cnblogs.com/lipan/MongoDB_003.rar
自此为止一个简单MongoDB表格数据操作的功能就实现完毕了,相信读者在看完这篇文章后,差不多都可以轻松实现MongoDB项目的开发应用了。聪明的你一定会比本文做的功能更完善,更好。下篇计划讲解linq的方式访问数据集合。