MongoDB學習筆記(三) 在MVC模式下通過Jqgrid表格操作MongoDB數據
作者：李盼（Lipan）
在上一篇MongoDB學習筆記 中筆者帶領我們學習了如何通過samus驅動實現基本數據操作，本篇中筆者帶領我們學習在MVC模式下通過Jqgrid表格操作MongoDB數據。
在上一篇MongoDB學習筆記 中筆者帶領我們學習了如何通過samus驅動實現基本數據操作，本篇中筆者帶領我們學習在MVC模式下通過Jqgrid表格操作MongoDB數據。
看到下圖，是通過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”文件，并再視圖中引用，代碼如下：
- jQuery(document).ready(function () {
- //jqGrid初始化
- jQuery("#table1").jqGrid({
- url: '/Home/UserList',
- datatype: 'json',
- mtype: 'POST',
- colNames: ['登錄名', '姓名', '年齡', '手機號', '郵箱地址', '操作'],
- colModel: [
- { name: 'UserId', index: 'UserId', width: 180, editable: true },
- { name: 'UserName', index: 'UserName', width: 200, editable: true },
- { name: 'Age', index: 'Age', width: 150, editable: true },
- { name: 'Tel', index: 'Tel', width: 150, editable: true },
- { name: 'Email', index: 'Email', width: 150, editable: true },
- { name: 'Edit', index: 'Edit', width: 150, editable: false, align: 'center' }
- ],
- pager: '#div1',
- postData: {},
- rowNum: 5,
- rowList: [5, 10, 20],
- sortable: true,
- caption: '用戶信息管理',
- hidegrid: false,
- rownumbers: true,
- viewrecords: true
- }).navGrid('#div1', { edit: false, add: false, del: false })
- .navButtonAdd('#div1', {
- caption: "編輯",
- buttonicon: "ui-icon-add",
- onClickButton: function () {
- var id = $("#table1").getGridParam("selrow");
- if (id == null) {
- alert("請選擇行！");
- return;
- }
- if (id == "newId") return;
- $("#table1").editRow(id);
- $("#table1").find("#" + id + "_UserId").attr("readonly","readOnly");
- $("#table1").setCell(id, "Edit", "<input id='Button1' type='button' value='提交' onclick='Update(\"" + id + "\")' /><input id='Button2' type='button' value='取消' onclick='Cancel(\"" + id + "\")' />");
- }
- }).navButtonAdd('#div1', {
- caption: "刪除",
- buttonicon: "ui-icon-del",
- onClickButton: function () {
- var id = $("#table1").getGridParam("selrow");
- if (id == null) {
- alert("請選擇行！");
- return;
- }
- Delete(id);
- }
- }).navButtonAdd('#div1', {
- caption: "新增",
- buttonicon: "ui-icon-add",
- onClickButton: function () {
- $("#table1").addRowData("newId", -1);
- $("#table1").editRow("newId");
- $("#table1").setCell("newId", "Edit", "<input id='Button1' type='button' value='提交' onclick='Add()' /><input id='Button2' type='button' value='取消' onclick='Cancel(\"newId\")' />");
- }
- });
- });
- //取消編輯狀態
- function Cancel(id) {
- if (id == "newId") $("#table1").delRowData("newId");
- else $("#table1").restoreRow(id);
- }
- //向后臺ajax請求新增數據
- function Add() {
- var UserId = $("#table1").find("#newId" + "_UserId").val();
- var UserName = $("#table1").find("#newId" + "_UserName").val();
- var Age = $("#table1").find("#newId" + "_Age").val();
- var Tel = $("#table1").find("#newId" + "_Tel").val();
- var Email = $("#table1").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);
- $("#table1").trigger("reloadGrid");
- }
- });
- }
- //向后臺ajax請求更新數據
- function Update(id) {
- var UserId = $("#table1").find("#" + id + "_UserId").val();
- var UserName = $("#table1").find("#" + id + "_UserName").val();
- var Age = $("#table1").find("#" + id + "_Age").val();
- var Tel = $("#table1").find("#" + id + "_Tel").val();
- var Email = $("#table1").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);
- $("#table1").trigger("reloadGrid");
- }
- });
- }
- //向后臺ajax請求刪除數據
- function Delete(id) {
- var UserId = $("#table1").getCell(id, "UserId");
- $.ajax({
- type: "POST",
- url: "/Home/Delete",
- data: "UserId=" + UserId,
- success: function (msg) {
- alert("刪除數據: " + msg);
- $("#table1").trigger("reloadGrid");
- }
- });
- }
二、實現控制層業務
在Controllers目錄下新建控制器“HomeController.cs”，Index.js中產生了四個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 = userModel.FindAll();
- int i = 0;
- 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 = query.Count() / Convert.ToInt32(rows) + 1,
- page = Convert.ToInt32(page),
- records = query.Count(),
- rows = query.Skip(Convert.ToInt32(rows) * (Convert.ToInt32(page) - 1)).Take(Convert.ToInt32(rows))
- };
- return Json(data, JsonRequestBehavior.AllowGet);
- }
- /// <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
- {
- userModel.Add(doc);
- return Content("添加成功");
- }
- catch
- {
- return Content("添加失敗");
- }
- }
- /// <summary>
- /// 響應Js的“Delete”ajax請求，執行刪除用戶操作
- /// </summary>
- public ContentResult Delete(string UserId)
- {
- try
- {
- userModel.Delete(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
- {
- userModel.Update(doc);
- return Content("修改成功");
- }
- catch
- {
- return Content("修改失敗");
- }
- }
- }
三、實現模型層數據訪問
***，我們在Models新建一個Home文件夾，添加模型“UserModel.cs”，實現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 = mongo.GetDatabase(databaseName) as MongoDatabase;
- mongoCollection = mongoDatabase.GetCollection<Document>(collectionName) as MongoCollection<Document>;
- mongo.Connect();
- }
- ~UserModel()
- {
- mongo.Disconnect();
- }
- /// <summary>
- /// 增加一條用戶記錄
- /// </summary>
- /// <param name="doc"></param>
- public void Add(Document doc)
- {
- mongoCollection.Insert(doc);
- }
- /// <summary>
- /// 刪除一條用戶記錄
- /// </summary>
- public void Delete(string UserId)
- {
- mongoCollection.Remove(new Document { { "UserId", UserId } });
- }
- /// <summary>
- /// 更新一條用戶記錄
- /// </summary>
- /// <param name="doc"></param>
- public void Update(Document doc)
- {
- mongoCollection.FindAndModify(doc, new Document { { "UserId", doc["UserId"].ToString() } });
- }
- /// <summary>
- /// 查找所有用戶記錄
- /// </summary>
- /// <returns></returns>
- public IEnumerable<Document> FindAll()
- {
- return mongoCollection.FindAll().Documents;
- }
- }
四、小結
代碼下載：http://files.cnblogs.com/lipan/MongoDB_003.rar
自此為止一個簡單MongoDB表格數據操作的功能就實現完畢了，相信讀者在看完這篇文章后，差不多都可以輕松實現MongoDB項目的開發應用了。聰明的你一定會比本文做的功能更完善，更好。下篇計劃講解linq的方式訪問數據集合。
原文出處：http://www.cnblogs.com/lipan/archive/2011/03/11/1980227.html
【編輯推薦】
- MongoDB學習筆記(一) MongoDB介紹及安裝
- MongoDB學習筆記(二) 通過samus驅動實現基本數據操作
- 拋棄關系數據庫 PHP程序員應了解MongoDB的五件事
- MongoDB，無模式文檔型數據庫簡介
- Visual Studio 2010下編譯調試MongoDB源碼
責任編輯：艾婧
來源：
博客園
