Table presentation of client pagination using jquery and Jtemplates plug-ins

It's always been a hassle to use JSON and JavaScript to bind data to a table or grid in the client. Microsoft asp.net ajax provides classes like Sys.Date.DataTable and Sys.Dat.DataView to help implement client bindings, or you can use a for loop to dynamically build tables, but these are cumbersome and inflexible. The jquery Jtemplates plug-in implements a flexible way to control the display, which allows us to define a display template that jquery dynamically generates based on the template that is selected when presenting the data. This is similar to the ItemTemplate in ASP.net, and it is somewhat similar to XSLT. In this way, you can easily display list data in a flexible way on the client through a custom template.

The jquery official website defines jtemplates as: Jtemplates is a template engine 100% in JavaScript. More information can be referred to http://jtemplates.tpython.com/. Next we'll implement a small example to show how to use Jtemplate to build an RSS reader.

Create an RSS reader

RSS feeds are usually located in another domain, and in Ajax browsers typically prohibit Cross-domain access, where we can get data from the server to avoid this problem. Usually we can put these methods into the WebMethod method into the webservices, but here we can put these methods in the page of the CS file. It should be noted that this method must be declared as a static method and be annotated with a WebMethod. The purpose of this is that the client can normally access this method only if the annotation is WebMethod. The static tag identifies that the method is not related to any instance of the page, but rather that the page itself is relevant and is the same for any one instance. So when you call, you don't need to be associated with any instance of the page class.

[WebMethod]
public static IEnumerable GetFeeds (int PageSize,int PageNumber)
{
　　string strFeedUrl = System.Configuration.ConfigurationManager.AppSettings["FeedUrl"];
　　XDocument feedXML = XDocument.Load(strFeedUrl);

　　var feeds = from feed in feedXML.Descendants("item")
　　　　　　　　select new
　　　　　　　　{
　　　　　　　　　　Date = DateTime.Parse (feed.Element("pubDate").Value).ToShortDateString(),
　　　　　　 　　　　Title = feed.Element("title").Value,
　　　　　　　　　　 Link = feed.Element("link").Value,
　　　　　　　　　　Description = feed.Element("description").Value,
　　　　　　　　};

　　//paging... (LINQ)
　　return feeds.Skip((PageNumber - 1) * PageSize).Take(PageSize);
}

The RSS address is set in the method above, and LINQ to XML is used to get the attributes we want. The Skip and take functions combine to implement a paging function.

Call page method through jquery

The Jquery.ajax method implements an AJAX way to request a page and set a callback function to handle the corresponding state and result. In our case, we need to request the Pagemethod written above and process the returned results.

function DisplayRSS(page) {
　　 $.ajax({
　　　　type: "POST",
　　　　url: "Default.aspx/GetFeeds",
　　　　data: " {'PageSize':'" + pageSize + "', 'PageNumber':'" + page + "'}",
　　　　 contentType: "application/json; charset=utf-8",
　　　　dataType: "json",
　　　　success: function(msg) {
　　　　　 　//TODO:Show the result as a table.
　　　　　　alert(msg);
　　　　}
　　});
}

We didn't do anything in the success callback function to see what the result was. Set the Allow debug script in the browser, define a function to call in the callback function, and then set the breakpoint in the new function.

We see that when the server returns the data to IEnumerable, it actually contains a JSON-represented collection of data in result. Each object contains the date, Description, link, and title attributes, which are consistent with the preceding LINQ XML field. Because you already have the data set, the next thing to do is to show it in some way on the client. You might think of using a dynamic splicing table, but that's not flexible. Jtemplates provides a more elegant way to achieve this.