Asp. NET in the use of Jqgrid complete implementation __.net

article outlineIntroduction & Use Scenario Jqgrid some instructions Jqgrid and asp.net consolidation detailed steps

Pre-preparation

Frame Build

Data padding

Data increase/deletion/change

Other Introduction & Usage Scenarios

Jqgrid is not a novelty, it is already a proven open source data display control.

There are some articles in the garden, why do you want to write this article?

Because I can't find a complete story about Jqgrid integration, I mean complete narration from beginning to the beginning, not some fragments or some parameters.

Just to see an article that fully describes this step: Http://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET

This article mainly refers to this article, describes Jqgrid and asp.net integration.

Usage scenarios:

When there are many and miscellaneous data, if you want to add a convenient query/delete function to the display of tabular data.

Jqgrid free, open source, easy to use, is a good choice.

Jqgrid Some of the description of the stylish, full-featured JS control, used to display and manipulate tabular data using AJAX methods can be integrated into any server-side technology, such as ASP, Javaservelets, JSP, PHP and so on. Developed by Trirand company Tony Tomov. and ASP.net integration is very simple jqgrid and asp.net consolidate detailed steps to download Jqgrid, add the required files to the ASP.net application (mainly some scripts and CSS). Initialize the Jqgrid in the page you want to use. Binding data Some other operations, such as adding or deleting changes

1. The 1th I mentioned, you can download Jqgrid and related documents at the following address

Http://www.trirand.com/blog/?page_id=6

Download Get jquery.jqgrid-4.5.2.zip.

Unzip the file, which is a few CSS and script folders, let's see how to use these files.
In order to better understand, according to international practice I created a new demo program: Jqgridpoc, to show the integration of the steps and features.

The main file we need to introduce is jquery, because Jqgrid relies on jquery.

Create a new folder Jqgridreq in your solution to put Jqgrid related files.

The first step is to add the jquery file (I added jquery 1.9).

Second step, if we're going to use any UI-related stuff in jquery? Yes, CSS files. Go to jquery's website to download.

In the final step, add Jquery-ui-1.9.2.custom.css to the program.

Make sure you add the relevant picture folders as well, because the CSS that we added may also use the relevant pictures.

So the jquery stuff is ready.

Let's start by adding our jqgrid files individually. Jquery.jqgrid-4.5.2\src\ jquery.jqGrid.js jquery.jqgrid-4.5.2\js\i18n\ grid.locale-en.js jquery.jqgrid-4.5.2\js\ i18n\ grid.locale-cn.js jquery.jqgrid-4.5.2\css\ Ui.jqgrid.css

Did you see the locale-en.js/local-en.js file you added above? They are very important and can change some of the preset parameters inside.

In the same way, we added CSS files.

Now we have finished the prerequisites.

As shown below, you can see the file and folder structure we added.

Let's go to the. aspx page to add Jqgrid bar.

In this simple example project I used a simple case of customer management, using Default.aspx as an example.

You need to refer to all required files first to the head section of the HTML page, as shown in the following figure.

All you need to do now is place the HTML table tag on the page and give the table an ID JQGRIDPOC (this table is the Jqgrid we're about to turn into).

2. Initialize the Jqgrid in the page you want to use.

The following is going to turn this table into Jqgrid.

Prepare the fields that we intend to display in the grid, and we must take these fields when we initialize the table.

What we are going to show is: UniqueID-Name Last name, "City".

You can use the following script to initialize the HTML table to grid.

Code fragment:     <script>         $ (function  ()  {            $ ("#jQgridPOC"). JqGrid ({                 url:  ' http:// Localhost:58404/jqgridhandler.ashx ',                  datatype:  "JSON,"                  colnames: [' Id ',  ' name ',  ' last name ',  ' address ',  ' city ',  ' state ' ],                 colmodel:  [                             { name:  ' id ', index:  ' Id ',  width: 20, stype:  ' text '                                {  name:  ' FirstName ', index:  ' FirstName ', width: 80, stype:  ' text ',  SORTABLE:&NBSP;TRUE,&NBSP;EDITABLE:&NBSP;TRUE&NBSP},                               { name:  ' LastName ', index:  ' LastName ', width: 80, align:  ' right ' ,  editable: true&nbsp},                              { name:   ' Address1 ', index:  ' Address1 ', width: 150, align:  ' right ',  editable:  true },                              { name:  ' city ', index:  ' city ',  width:  80, align:  "Right",  editable: true },                               { name:  ' state ', index:  ' state ',  width: 100, sortable:  false, editable: true }                  ],               &NBSP;&NBSP;&NBSP;ROWNUM:&NBSP;10,                  loadonce: true,                  sortname:  ' _id ',                  viewrecords: true,                  sortorder:  ' desc ',                  caption:  "Customer List"                });         });  

</script>

Run the program and you will get the table shown below (there is no data yet).

I want to display the content based on the table, you should be able to read the initialization script I wrote.

The colnames represents the table head.

Colmodel is a property of the JSON object data that is used to configure each column in the table.

You can say the data model that you want to display in the table. The order of the attributes in the colnames should match the order of the arrays in the Colmodel. 3. Binding Data

You may notice that the URL attribute is left blank.

That's for Ajax to call, and here's what you can do to fill this grid.

I use SQL Server's sample database PetShop as the backend.

How the URL completes populating the data.

What I do is, create an HTTP handler, handler the inside function to fetch the table [Mspetshop4profile]. [dbo]. The data in [account] and write to the HTTP response.

The HTTP response will be a JSON string, as described in the previous Colmodel format.

Our Jqgrid reads the JSON return string, which is displayed in Jqgrid with the help of Colmodel.

You need to be aware that we currently use JSON objects.

Jqgrid can use Xml,json, arrays, and we're using JSON.

As I said, I created a. ashx handler, called Jqgridhandler.ashx.

The corresponding URL address is: http://localhost:58404/JQGridHandler.ashx.

Here's how the data is read from the handler. Accessing handler from grid requires only calling URLs

Usually, if we need to pass data to handler or read from the handler, where do we find the parameters to pass?

Yes, we will obviously go to the context first. The request, isn't it.

At this point we will also see if there are form parameter data passing in the context request.
Let's go and debug and see.

By looking at the debugger (pictured above), you can see that I'm calling forms through. Get ("oper") to find the Oper value.

I hope you've noticed that the form{} property is empty.

So why would I take the Oper value?

I think you've guessed, grid. When manipulating data, it relies on oper parameters.

Keep looking down and I'll show you all the data in Oper.

Now let's assume that Oper==null represents the grid for the first time. Don't be confused.

Below I use the SQL Server database as my data store.

About Ado.net This piece I do not discuss, mainly using a class file SqlHelper and two functions