MongoDB學習筆記(三) 在MVC模式下通過Jqgrid表格操作MongoDB資料

　　看到，是通過Jqgrid實現表格式資料的基本增刪查改的操作。表格式資料增刪改是一般公司專屬應用程式系統開發的常見功能，不過不同的是這個表格式資料來源是非關係型的資料庫MongoDB。nosql雖然概念新穎，但是MongoDB基本應用實現起來還是比較輕鬆的，甚至代碼比基本的ADO.net訪問關係資料來源還要簡潔。由於其本身的“非關係”的資料存放區方式，使得對象關係映射這個環節對於MongoDB來講顯得毫無意義，因此我們也不會對MongoDB引入所謂的“ORM”架構。

　　

　　下面我們將逐步講解怎麼在MVC模式下將MongoDB資料讀取，並展示在前台Jqgrid表格上。這個“簡易系統”的基本設計思想是這樣的：我們在視圖層展示表格，Jqgrid相關Js邏輯全部放在一個Js檔案中，控制層實現了“增刪查改”四個業務，MongoDB的基本資料訪問放在了模型層實現。下面我們一步步實現。

系列目錄

    MongoDB學習筆記(一) MongoDB介紹及安裝
    MongoDB學習筆記(二) 通過samus驅動實現基本資料操作
    MongoDB學習筆記(三) 在MVC模式下通過Jqgrid表格操作MongoDB資料
    MongoDB學習筆記(四) 用MongoDB的文檔結構描述資料關係
    MongoDB學習筆記(五) MongoDB檔案存取操作
    MongoDB學習筆記(六) 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的方式訪問資料集合。

作者：李盼（Lipan）
出處：[Lipan] （http://www.cnblogs.com/lipan/）
著作權聲明：本文的著作權歸作者與部落格園共有。轉載時須註明本文的詳細連結，否則作者將保留追究其法律責任。