在MVC模式下通过Jqgrid表格操作MongoDB数据
1、环境搭建:
安装MongoDB数据库,并启动服务。
创建一个新的ASP.NET MVC项目。
安装MongoDB C#驱动,可以通过NuGet包管理器进行安装。
安装JqGrid插件,可以通过下载jqGrid的JS和CSS文件到项目中。
2、配置MongoDB连接:
在Web.config文件中添加MongoDB的连接字符串。
<connectionStrings> <add name="MongoDB" connectionString="mongodb://localhost:27017" /> </connectionStrings>
3、创建Model:
创建一个类来表示MongoDB中的文档,创建一个名为Person的类,包含姓名、年龄等属性。
public class Person { public ObjectId Id { get; set; } public string Name { get; set; } public int Age { get; set; } }
4、创建Repository:
创建一个Repository类来处理与MongoDB的数据交互,使用MongoDB C#驱动来执行CRUD操作。
public class PersonRepository { private readonly IMongoCollection<Person> _persons; public PersonRepository(IMongoDatabase database) { _persons = database.GetCollection<Person>("people"); } public List<Person> GetAll() { return _persons.Find(new BsonDocument()).ToList(); } // 其他CRUD方法... }
5、创建Controller:
创建一个Controller来处理HTTP请求,并与Repository交互获取数据。
public class PersonController : Controller { private readonly PersonRepository _repository; public PersonController() { var client = new MongoClient(ConfigurationManager.ConnectionStrings["MongoDB"].ConnectionString); var database = client.GetDatabase("testdb"); _repository = new PersonRepository(database); } public ActionResult Index() { return View(); } public JsonResult GetData() { var data = _repository.GetAll(); return Json(data, JsonRequestBehavior.AllowGet); } // 其他Action方法... }
6、创建View:
创建一个视图来显示JqGrid表格,并通过Ajax调用Controller的方法来加载数据。
@{ ViewBag.Title = "Index"; } <h2>People</h2> <table id="jqGrid"></table> <div id="jqGridPager"></div> <script src="~/Scripts/jquery3.3.1.min.js"></script> <script src="~/Scripts/jquery.jqGrid.min.js"></script> <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> <script type="text/javascript"> $(function () { $("#jqGrid").jqGrid({ url: '@Url.Action("GetData", "Person")', datatype: 'json', mtype: 'GET', colNames: ['Id', 'Name', 'Age'], colModel: [ { name: 'id', index: 'id', width: 55 }, { name: 'name', index: 'name', width: 90 }, { name: 'age', index: 'age', width: 80, align: "right" } ], pager: "#jqGridPager", rowNum: 10, rowList: [10, 20, 30], sortname: 'id', sortorder: 'desc', viewrecords: true, gridview: true, autoencode: true, caption: "People Data" }); }); </script>
7、运行和测试:
运行项目,并在浏览器中打开相应的URL,查看JqGrid表格是否正确显示了MongoDB中的数据。