We are adding two extra script files: json2.js is for JSON serialization, jquery.jtable.aspnetpagemethods.js is for using jTable with ASP.NET Page Methods. Script files must be included in the order above.

Client side (HTML and JavaScript)

HTML codes for jTable is very simple, just a div tag:

<div id="StudentTableContainer"></div>

jTable creates all table, forms and other stuffs. Let's see all JavaScript codes needed:

It's not needed to define such a class, but I defined it to be more object-oriented. We will use it to get city options while editing/creating/listing students.

Getting list from server

jTable calls listAction (defined in jTable initialization options) using AJAX to load records in the table when you call load method. In the sample, we defined listAction as '/PagingAndSorting.aspx/StudentList'. This is a Page method defined in PagingAndSorting.aspx as shown below:

A Page method is a static method that is marked with WebMethod attribute (EnableSession is an optional parameter). A Page method can be called by Javascript using AJAX. It gets and returns JSON objects. In the sample above, StudentList method does not get any argument and returns an anonymous object. Return value is used by jTable to show records.

In the sample, I used paging and sorting features of jTable. jTable sends paging and sorting parameters as parameters to the method (it also sends same values as query string arguments, so you can get as like HttpContext.Current.Request["jtStartIndex"] also.). Return value of method must contain: a Result string ("OK" or "ERROR"), Records array/list (a list of student records here) and TotalRecordCount (used for paging). If you don't use paging or sorting, you can must remove appropriate method arguments.

Note that Repositories here are classes to perform database operations. You can implement it in any technology (ADO.NET, Entity framework, NHibernate... etc.).

Getting City options

We defined a CityId field in the jTable initialization code. It has an option property that ensures to show a dropdown list in create/edit form. Value of this property was '/PagingAndSorting.aspx/GetCityOptions'. jTable uses this url to get all cities. This is a Page method defined in PagingAndSorting.aspx as shown below:

An option method must return Options property that contains an array of options. A member of this array can be any type of object which has DisplayText and Value properties.

Deleting a record

jTable calls deleteAction (defined in jTable initialization options) using AJAX to delete a record in server, when user deletes a row on the table. In the sample, we defined deleteAction as '/PagingAndSorting.aspx/DeleteStudent'. This is a Page method defined in PagingAndSorting.aspx as shown below:

As you've seen, it's a simple method which gets StudentId to delete. Notice that StudentId argument is case-sensitive and must match with jTable field name. So, if you use studentId as the parameter name, it won't work.

Creating a new record

jTable calls createAction (defined in jTable initialization options) using AJAX to add a new record to server when user saves create new record form. In the sample, we defined createAction as '/PagingAndSorting.aspx/CreateStudent'. This is a Page method defined in PagingAndSorting.aspx as shown below:

Creating method is also very straightforward. It must return new created object to jTable. Note that, since this is a new record, StudentId of Student object is not set (0 as default). But returning Student object to jTable must has a valid StudentId. So, you must get StudentId after inserting database. jTable will use this Id in next operations on the record (update and delete).

Lastly, record parameter's name must be record. Otherwise, it does not work since jTable set it's name as record.

Updating a record

jTable calls updateAction (defined in jTable initialization options) using AJAX to update a record to server when user saves edit form for a record. In the sample, we defined updateAction as '/PagingAndSorting.aspx/UpdateStudent'. This is a Page method defined in PagingAndSorting.aspx as shown below:

Summary

In this tutorial, we developed a jTable with paging and sorting features enabled using ASP.NET Web Forms Page methods in the server side. jTable has direct support for Page Methods of ASP.NET Web Forms. You can see demos page for other examples.