MongoDB學(xué)習(xí)筆記(三) 在MVC模式下通過Jqgrid表格操作MongoDB數(shù)據(jù)

下面我們將逐步講解怎么在MVC模式下將MongoDB數(shù)據(jù)讀取，并展示在前臺Jqgrid表格上。這個“簡易系 統(tǒng)”的基本設(shè)計思想是這樣的：我們在視圖層展示表格，Jqgrid相關(guān)Js邏輯全部放在一個Js文件中，控制層實現(xiàn)了“增刪查改”四個業(yè) 務(wù)，MongoDB的基本數(shù)據(jù)訪問放在了模型層實現(xiàn)

看到下圖，是通過Jqgrid實現(xiàn)表格數(shù)據(jù)的基本增刪查改的操作。表格數(shù)據(jù)增刪改是一般企業(yè)應(yīng)用系統(tǒng)開發(fā)的常見功能，不過不同的是這個表格數(shù)據(jù)來源是非關(guān) 系型的數(shù)據(jù)庫MongoDB。nosql雖然概念新穎，但是MongoDB基本應(yīng)用實現(xiàn)起來還是比較輕松的，甚至代碼比基本的ADO.net訪問關(guān)系數(shù)據(jù) 源還要簡潔。由于其本身的“非關(guān)系”的數(shù)據(jù)存儲方式，使得對象關(guān)系映射這個環(huán)節(jié)對于MongoDB來講顯得毫無意義，因此我們也不會對MongoDB引入 所謂的“ORM”框架。

下面我們將逐步講解怎么在MVC模式下將MongoDB數(shù)據(jù)讀取，并展示在前臺Jqgrid表格上。這個“簡易系統(tǒng)”的基本設(shè)計思想是這樣的：我們 在視圖層展示表格，Jqgrid相關(guān)Js邏輯全部放在一個Js文件中，控制層實現(xiàn)了“增刪查改”四個業(yè)務(wù)，MongoDB的基本數(shù)據(jù)訪問放在了模型層實 現(xiàn)。下面我們一步步實現(xiàn)。

一、實現(xiàn)視圖層Jqgrid表格邏輯

　　首先，我們新建一個MVC空白項目，添加好jQuery、jQueryUI、Jqgrid的前端框架代碼：
然后在Views的Home文件夾下新建視圖“Index.aspx”，在視圖的body標(biāo)簽中添加如下HTML代碼：

復(fù)制代碼 代碼如下:

<div>
    <table id="table1">
    </table>
    <div id="div1">
    </div>
</div>

接著新建ScriptsHome文件夾，在該目錄新建“Index.js”文件，并再視圖中引用，代碼如下：

復(fù)制代碼 代碼如下:

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 type='button' value='提交' /><input type='button' value='取消' />");
                }
            }).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 type='button' value='提交' /><input type='button' value='取消' />");
                }
            });
});

//取消編輯狀態(tài)
function Cancel(id) {
    if (id == "newId") $("#table1").delRowData("newId");
    else $("#table1").restoreRow(id);
}

//向后臺ajax請求新增數(shù)據(jù)
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("新增數(shù)據(jù): " + msg);
            $("#table1").trigger("reloadGrid");
        }
    });
}

//向后臺ajax請求更新數(shù)據(jù)
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("修改數(shù)據(jù): " + msg);
            $("#table1").trigger("reloadGrid");
        }
    });
}

//向后臺ajax請求刪除數(shù)據(jù)
function Delete(id) {
    var UserId = $("#table1").getCell(id, "UserId");
    $.ajax({
        type: "POST",
        url: "/Home/Delete",
        data: "UserId=" + UserId,
        success: function (msg) {
            alert("刪除數(shù)據(jù): " + msg);
            $("#table1").trigger("reloadGrid");
        }
    });
}

二、實現(xiàn)控制層業(yè)務(wù)

　　在Controllers目錄下新建控制器“HomeController.cs”，Index.js中產(chǎn)生了四個ajax請求，對應(yīng)控制層也有四個業(yè)務(wù)方法。HomeController代碼如下：

復(fù)制代碼 代碼如下: