下面我们将逐步讲解怎么在MVC模式下将MongoDB数据读取并展示在前台Jqgrid表格上这个“简易系 统”的基本设计思想是这样的我们在视图层展示表格Jqgrid相关Js逻辑全部放在一个Js文件中控制层实现了“增删查改”四个业 务MongoDB的基本数据访问放在了模型层实现
看到下图是通过Jqgrid实现表格数据的基本增删查改的操作表格数据增删改是一般企业应用系统开发的常见功能不过不同的是这个表格数据来源是非关 系型的数据库MongoDBnosql虽然概念新颖但是MongoDB基本应用实现起来还是比较轻松的甚至代码比基本的ADOnet访问关系数据 源还要简洁由于其本身的“非关系”的数据存储方式使得对象关系映射这个环节对于MongoDB来讲显得毫无意义因此我们也不会对MongoDB引入 所谓的“ORM”框架
下面我们将逐步讲解怎么在MVC模式下将MongoDB数据读取并展示在前台Jqgrid表格上这个“简易系统”的基本设计思想是这样的我们 在视图层展示表格Jqgrid相关Js逻辑全部放在一个Js文件中控制层实现了“增删查改”四个业务MongoDB的基本数据访问放在了模型层实 现下面我们一步步实现
一实现视图层Jqgrid表格逻辑
首先我们新建一个MVC空白项目添加好jQueryjQueryUIJqgrid的前端框架代码然后在Views的Home文件夹下新建视图“Indexaspx”在视图的body标签中添加如下HTML代码
复制代码 代码如下:<div> <table id="table"> </table> <div id="div"> </div> </div>
接着新建ScriptsHome文件夹在该目录新建“Indexjs”文件并再视图中引用代码如下
复制代码 代码如下:jQuery(document)ready(function () { //jqGrid初始化 jQuery("#table")jqGrid({ url: /Home/UserList datatype: json mtype: POST colNames: [登录名 姓名 年龄 手机号 邮箱地址 操作] colModel: [ { name: UserId index: UserId width: editable: true } { name: UserName index: UserName width: editable: true } { name: Age index: Age width: editable: true } { name: Tel index: Tel width: editable: true } { name: Email index: Email width: editable: true } { name: Edit index: Edit width: editable: false align: center } ] pager: #div postData: {} rowNum: rowList: [ ] sortable: true caption: 用户信息管理 hidegrid: false rownumbers: true viewrecords: true })navGrid(#div { edit: false add: false del: false }) navButtonAdd(#div { caption: "编辑" buttonicon: "uiiconadd" onClickButton: function () { var id = $("#table")getGridParam("selrow"); if (id == null) { alert("请选择行！"); return; } if (id == "newId") return; $("#table")editRow(id); $("#table")find("#" + id + "_UserId")attr("readonly""readOnly"); $("#table")setCell(id "Edit" "<input id=Button type=button value=提交 onclick=Update("" + id + "") /><input id=Button type=button value=取消 onclick=Cancel("" + id + "") />"); } })navButtonAdd(#div { caption: "删除" buttonicon: "uiicondel" onClickButton: function () { var id = $("#table")getGridParam("selrow"); if (id == null) { alert("请选择行！"); return; } Delete(id); } })navButtonAdd(#div { caption: "新增" buttonicon: "uiiconadd" onClickButton: function () { $("#table")addRowData("newId" ); $("#table")editRow("newId"); $("#table")setCell("newId" "Edit" "<input id=Button type=button value=提交 onclick=Add() /><input id=Button type=button value=取消 onclick=Cancel("newId") />"); } }); }); //取消编辑状态 function Cancel(id) { if (id == "newId") $("#table")delRowData("newId"); else $("#table")restoreRow(id); } //向后台ajax请求新增数据 function Add() { var UserId = $("#table")find("#newId" + "_UserId")val(); var UserName = $("#table")find("#newId" + "_UserName")val(); var Age = $("#table")find("#newId" + "_Age")val(); var Tel = $("#table")find("#newId" + "_Tel")val(); var Email = $("#table")find("#newId" + "_Email")val(); $ajax({ type: "POST" url: "/Home/Add" data: "UserId=" + UserId + "&UserName=" + UserName + "&Age=" + Age + "&Tel=" + Tel + "&Email=" + Email success: function (msg) { alert("新增数据: " + msg); $("#table")trigger("reloadGrid"); } }); } //向后台ajax请求更新数据 function Update(id) { var UserId = $("#table")find("#" + id + "_UserId")val(); var UserName = $("#table")find("#" + id + "_UserName")val(); var Age = $("#table")find("#" + id + "_Age")val(); var Tel = $("#table")find("#" + id + "_Tel")val(); var Email = $("#table")find("#" + id + "_Email")val(); $ajax({ type: "POST" url: "/Home/Update" data: "UserId=" + UserId + "&UserName=" + UserName + "&Age=" + Age + "&Tel=" + Tel + "&Email=" + Email success: function (msg) { alert("修改数据: " + msg); $("#table")trigger("reloadGrid"); } }); } //向后台ajax请求删除数据 function Delete(id) { var UserId = $("#table")getCell(id "UserId"); $ajax({ type: "POST" url: "/Home/Delete" data: "UserId=" + UserId success: function (msg) { alert("删除数据: " + msg); $("#table")trigger("reloadGrid"); } }); }
二实现控制层业务
在Controllers目录下新建控制器“HomeControllercs”Indexjs中产生了四个ajax请求对应控制层也有四个业务方法HomeController代码如下
复制代码 代码如下:public class HomeController : Controller { UserModel userModel = new UserModel(); public ActionResult Index() { return View(); } /// <summary> /// 获取全部用户列表通过json将数据提供给jqGrid /// </summary> public JsonResult UserList(string sord string sidx string rows string page) { var list = userModelFindAll(); int i = ; var query = from u in list select new { id = i++ cell = new string[]{ u["UserId"]ToString() u["UserName"]ToString() u["Age"]ToString() u["Tel"]ToString() u["Email"]ToString() "" } }; var data = new { total = queryCount() / ConvertToInt(rows) + page = ConvertToInt(page) records = queryCount() rows = querySkip(ConvertToInt(rows) * (ConvertToInt(page) ))Take(ConvertToInt(rows)) }; return Json(data JsonRequestBehaviorAllowGet); } /// <summary> /// 响应Js的“Add”ajax请求执行添加用户操作 /// </summary> public ContentResult Add(string UserId string UserName int Age string Tel string Email) { Document doc = new Document(); doc["UserId"] = UserId; doc["UserName"] = UserName; doc["Age"] = Age; doc["Tel"] = Tel; doc["Email"] = Email; try { userModelAdd(doc); return Content("添加成功"); } catch { return Content("添加失败"); } } /// <summary> /// 响应Js的“Delete”ajax请求执行删除用户操作 /// </summary> public ContentResult Delete(string UserId) { try { userModelDelete(UserId); return Content("删除成功"); } catch { return Content("删除失败"); } } /// <summary> /// 响应Js的“Update”ajax请求执行更新用户操作 /// </summary> public ContentResult Update(string UserId string UserName int Age string Tel string Email) { Document doc = new Document(); doc["UserId"] = UserId; doc["UserName"] = UserName; doc["Age"] = Age; doc["Tel"] = Tel; doc["Email"] = Email; try { userModelUpdate(doc); return Content("修改成功"); } catch { return Content("修改失败"); } } }
三实现模型层数据访问
最后我们在Models新建一个Home文件夹添加模型“UserModelcs”实现MongoDB数据库访问代码如下
复制代码 代码如下:public class UserModel { //链接字符串(此处三个字段值根据需要可为读配置文件) public string connectionString = "mongodb://localhost"; //数据库名 public string databaseName = "myDatabase"; //集合名 public string collectionName = "userCollection"; private Mongo mongo; private MongoDatabase mongoDatabase; private MongoCollection<Document> mongoCollection; public UserModel() { mongo = new Mongo(connectionString); mongoDatabase = mongoGetDatabase(databaseName) as MongoDatabase; mongoCollection = mongoDatabaseGetCollection<Document>(collectionName) as MongoCollection<Document>; mongoConnect(); } ~UserModel() { mongoDisconnect(); } /// <summary> /// 增加一条用户记录 /// </summary> /// <param name="doc"></param> public void Add(Document doc) { mongoCollectionInsert(doc); } /// <summary> /// 删除一条用户记录 /// </summary> public void Delete(string UserId) { mongoCollectionRemove(new Document { { "UserId" UserId } }); } /// <summary> /// 更新一条用户记录 /// </summary> /// <param name="doc"></param> public void Update(Document doc) { mongoCollectionFindAndModify(doc new Document { { "UserId" doc["UserId"]ToString() } }); } /// <summary> /// 查找所有用户记录 /// </summary> /// <returns></returns> public IEnumerable<Document> FindAll() { return mongoCollectionFindAll()Documents; } }
四小结
代码下载MongoDB_rar
自此为止一个简单MongoDB表格数据操作的功能就实现完毕了相信读者在看完这篇文章后差不多都可以轻松实现MongoDB项目的开发应用了聪明的你一定会比本文做的功能更完善更好下篇计划讲解linq的方式访问数据集合
孤单寂寞与被遗弃感是最可怕的贫穷
