MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据

下面我们将逐步讲解怎么在MVC模式下将MongoDB数据读取，并展示在前台Jqgrid表格上。这个“简易系 统”的基本设计思想是这样的：我们在视图层展示表格，Jqgrid相关Js逻辑全部放在一个Js文件中，控制层实现了“增删查改”四个业 务，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>

接着新建ScriptsHome文件夹，在该目录新建“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;
}
}

四、小结

代码下载：MongoDB_003.rar

自此为止一个简单MongoDB表格数据操作的功能就实现完毕了，相信读者在看完这篇文章后，差不多都可以轻松实现MongoDB项目的开发应用了。聪明的你一定会比本文做的功能更完善，更好。下篇计划讲解linq的方式访问数据集合。

作者：李盼（Lipan）
出处：[Lipan] （http://www.cnblogs.com/lipan/）

赞 (0)

相关推荐

  • 如何转换wps模式下的excel表格

    如何转换wps模式下的excel表格呢?下面小编来教大家. 操作方法 01 首先,我们打开一个wps表格文件: 02 之后我们点击左上角wps表格边上的下拉箭头: 03 弹出的界面,我们点击文件,之后 ...

  • MongoDB学习笔记(二) 通过samus驱动实现基本数据操作

    传统的关系数据库一般由数据库（database）、表（table）、记录（record）三个层次概念组成，MongoDB是由 （database）、集合（collection）、文档对象（docume ...

  • MongoDB学习笔记(一) MongoDB介绍与安装方法

    最近开始学习非关系型数据库MongoDB，却在博客园上找不到比较系统的教程，很多资料都要去查阅英文网站，效率比较低下。本人不才，借着自学的机会把心得体会都记录下来，方便感兴趣的童鞋分享讨论 一、前言 ...

  • MongoDB学习笔记(六) MongoDB索引用法和效率分析

    MongoDB中的索引其实类似于关系型数据库，都是为了提高查询和排序的效率的，并且实现原理也基本一致。由于集合中的键(字段)可以是普通数据 类型，也可以是子文档。MongoDB可以在各种类型的键上创建 ...

  • MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

    MongoDB的集合（collection）可以看做关系型数据库的表，文档对象（document）可以看做关系型数据库的一条记录。但两者并 不完全对等。表的结构是固定的，MongoDB集合并没有这个约 ...

  • MongoDB学习笔记(五) MongoDB文件存取操作

    由于MongoDB的文档结构为BJSON格式（BJSON全称：Binary JSON），而BJSON格式本身就支持保存二进制格式的数据，因此可以把文件的二进制格式的数据直接保存到MongoDB的文档结 ...

  • linux学习日记三 文件权限与目录配置

    ===一个简单的ls -al的例子：=== -rw-r–r–. 1 root root 57494 Oct 1 08:08 install.log 第一列表示文件的权限，共有10个字符组成。第一个字符 ...

  • 小米手机FastBoot模式下无法连接小米助手怎么办

    小米手机在FastBoot模式下无法连接小米助手怎么办呢?当小米手机因误操作(刷错ROM.操作非法)导致变砖时,我们通过需要在FastBoot模式下执行一键刷机操作.但由于在小米FastBoot模式下 ...

  • 三分钟带你解析ios三种导航模式

    @五月:Ios代码库定义了三种可在应用中直接使用的导航模型:平铺页面.标签栏.树形结构.这三种模型覆盖了绝大多数的App应用需求,也立刻被用户所熟悉.但是你知道为什么微信的「发现」页面设计为树形结构模 ...