MongoDB Learning Notes (iii) manipulating MONGODB data through Jqgrid tables in MVC mode

See the following figure, is through the jqgrid to achieve the basic table data additions and deletions to check the operation. Table data additions and deletions are common enterprise application system development features, but the difference is that this tabular data source is a relational database MongoDB. NoSQL Although the concept of novel, but MongoDB basic application to achieve it is relatively easy, even the code than the basic ado.net access relational data source and concise. Because of its own "unrelated" data storage mode, so that the object relationship mapping is meaningless to MongoDB, so we will not introduce the so-called "ORM" framework for MongoDB.

　　

Here's how to read the MongoDB data in MVC mode and show it on the foreground jqgrid table. This "simple system" basic design idea is this: we display the table in the view layer, the Jqgrid related JS logic all puts in a JS file, the control layer realizes "additions and deletions to check changes" four business, MongoDB basic data access puts in the model layer realization. Let's do this step-by-step. First, implement the View Layer Jqgrid table Logic

First, we create a new MVC blank project that adds the front-end framework code for jquery, jQueryUI, and Jqgrid:

Then create a new View "index.aspx" under the Views ' home folder and add the following HTML code to the view's Body tab: View source print?

<div>

<table id= "Table1" >

</table>

<div id= "Div1" >

</div>

</div>

Next, create a new Scripts\home folder, create a new "index.js" file in the directory, and then refer to the view in the following code: Show Source view source print?

001	JQuery (document). Ready (function () {

002

003	Jqgrid initialization

004	JQuery ("#table1"). Jqgrid ({

005	URL: '/home/userlist ',

006	DataType: ' JSON ',

007	Mtype: ' POST ',

008	Colnames: [' Login name ', ' name ', ' age ', ' mobile number ', ' email address ', ' Operation '],

009	Colmodel: [

010	{name: ' UserId ', index: ' UserId ', width:180, editable:true},

011	{name: ' UserName ', index: ' UserName ', width:200, editable:true},

012	{name: ' Age ', Index: ' Age ', width:150, editable:true},

013	{Name: ' Tel ', Index: ' Tel ', width:150, editable:true},

014	{name: ' email ', index: ' email ', width:150, editable:true},

015	{name: ' edit ', index: ' edit ', width:150, Editable:false, align: ' center '}

016

],

017	Pager: ' #div1 ',

018	PostData: {},

019

Rownum:5,

020	Rowlist: [5, 10, 20],

021	Sortable:true,

022	Caption: ' User information management ',

023	Hidegrid:false,

024	Rownumbers:true,

025	Viewrecords:true

026	}). Navgrid (' #div1 ', {edit:false, Add:false, del:false})

12V	. Navbuttonadd (' #div1 ', {

028	Caption: "Edit",

029	Buttonicon: "Ui-icon-add",

030	Onclickbutton:function () {

031	var id = $ ("#table1"). Getgridparam ("Selrow");

032	if (id = = NULL) {

033	Alert (Please select a row.) ");

034

Return

035

}

036	if (id = = "newId") return;

037	$ ("#table1"). Editrow (ID);

13Y	$ ("#table1"). Find ("#" + ID + "_userid"). attr ("ReadOnly", "ReadOnly");

039	$ ("#table1"). Setcell (ID, "Edit", "<input id= ' Button1 ' type= ' button ' value= '" Submit ' onclick= ' Update (\ "+ ID +" \ ") '/>& Lt;input id= ' Button2 ' type= ' button ' value= ' Cancel ' onclick= ' Cancel (\ "" + ID + "\") '/> ');

040

}

041	}). Navbuttonadd (' #div1 ', {

042	Caption: "Delete",

043	Buttonicon: "Ui-icon-del",

044	Onclickbutton:function () {

045	var id = $ ("#table1"). Getgridparam ("Selrow");

046	if (id = = NULL) {

047	Alert (Please select a row.) ");

048

Return

049

}

050	Delete (ID);

051

}

052	}). Navbuttonadd (' #div1 ', {

053	Caption: "New",

054	Buttonicon: "Ui-icon-add",

055	Onclickbutton:function () {

056	$ ("#table1"). Addrowdata ("NewId",-1);