jQuery and jTemplates - how to get the proper values?

Question

I have problems constructing the right format of a jTemplates - hoping for some help. This is what I have: an ASP.NET page with a WebMethod. This WebMethod returns data to jQuery. The data should then be processed by jTemplates, but I am unsure of the format for the jTemplate.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
using Microsoft.Practices.EnterpriseLibrary.Data;
using System.Data.Common;
using System.Web.Services;
using System.Linq;
using System.Web.Script.Services;

public partial class jpaging : System.Web.UI.Page
{
    [WebMethod]
    public static IEnumerable PagingData(int Page, int PageSize)
    {
        // talk to database and return datatable
        Database db = DatabaseFactory.CreateDatabase();
        using (DbCommand cmd = db.GetStoredProcCommand("Paging"))
        {
            db.AddParameter(cmd, "@Page", DbType.Int32, 4, ParameterDirection.Input, true, 10, 0, null, DataRowVersion.Default, Page);
            db.AddParameter(cmd, "@PageSize", DbType.Int32, 4, ParameterDirection.Input, true, 10, 0, null, DataRowVersion.Default, PageSize);
            using (DataTable dt = (db.ExecuteDataSet(cmd)).Tables[0])
            {
                var t = from data in dt.AsEnumerable() select data.ItemArray;
                return t;
            }
        }
    }
}

Data returned from "return t" is in the following format.

{"d":[
 [1,1,"First 1","Last 1",301],
 [2,2,"First 2","Last 2",301],
 [3,3,"First 3","Last 3",301],
 [4,4,"First 4","Last 4",301],
 [5,5,"First 5","Last 5",301],
 [6,6,"First 6","Last 6",301],
 [7,7,"First 7","Last 7",301],
 [8,8,"First 8","Last 8",301],
 [9,9,"First 9","Last 9",301],
 [10,10,"First 10","Last 10",301]
]}

I am using the following code to parse the data to jTemplates:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jpaging.aspx.cs" Inherits="jpaging" EnableViewState="false" %>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="paging/jquery-jtemplates.js" type="text/javascript"></script>
<script type="text/javascript">

var currentPage = 1;
var pageSize = 10;

$(document).ready(function () {
   loadData(1); 
});

function loadData(page) {
   currentPage = page;
   $.ajax({
       type: "POST",
       url: "jpaging.aspx/PagingData",
       data: "{'Page':'" + page + "', 'PageSize':'" + pageSize + "'}",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (msg) {
           doTemplating(msg); 
           // ....
       }
   });
}

function doTemplating(msg) {
    $('#cont').setTemplateURL('/mytemplate.htm', null, { filter_data: false });
    $('#cont').processTemplate(msg);
}

</script>
</head>
<body>

   <table id="rsstable" cellspacing="0">
    <thead>
       <tr><th>ID</th><th>First</th><th>Last</th></tr>
    </thead>
    <tbody id="cont"></tbody>
   </table>

</body>
</html>

I am unsure how mytemplate.htm should be constructed:

{#foreach $T.d as post}
<tr>      
  <td> <-- what to write here for column1? --> </td>
  <td> <-- what to write here for column2? --> </td>
  <td> <-- what to write here for column3? --> </td>
</tr>
{#/for}

I have tried with something like {$T.post[0]} but that does not work.

As a side note I want to avoid returning something like this from the WebMethod:

    var feeds = from feed in dt.AsEnumerable()
            select new
            {
                EmployeeID = feed["EmployeeID"],
                FirstName = feed["FirstName"],
                LastName = feed["LastName"],
                Total = feed["TotalRows"]
            };
     return feeds;

If that was the case I would just do something like this:

{#foreach $T.d as post}
<tr>
  <td>{$T.post.EmployeeID}</td>
  <td>{$T.post.FirstName}</td>
  <td>{$T.post.LastName}</td>
</tr>
{#/for}

...but I want to avoid this to make the template more generic/usable for other returned data.

Any suggestions? :-)

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

I am unsure of where JSONP fits into what you are doing? JSONP only supports the GET HTTP action, ie not POST. See here: Post data to JsonP

You can do cross domain posts with CORS, see here: http://enable-cors.org/

I would recommend either using firebug and using a debug point to inspect your return variable or use this style of logging: How can I display a JavaScript object? . That will allow you to see what is being returned. After that, you can then narrow your issue to being specifically to do with JTemplate. You could alternatively try the templating built into jquery called jquery.tmpl http://api.jquery.com/jquery.tmpl/

edited May 23 '17 at 12:03

Community

1
1

answered Dec 22 '11 at 00:50

Dessus

2,147
1
14
24

Thanks for getting back - OK, I guess I used the wrong terms (JSONP) - still on the steep learning curve. Basically what I want to do is to loop through the data returned from the return variable `return t` - no need for debugging using firebug since I know what the data returned is (as described above). Basically I do not want to reference columns name in the loop, but rather the item/value properties - is that possible either with jTemplate or jquery.tmpl? – Sha Dec 22 '11 at 13:39
Its definately possible in at least jquery.tmpl. Probably in jTemplate too? What I did is I setup templates and got it to display it in small parts to verify I had each part of the template working. Ie try to get it to print out a string version of each row. Then try to work on printing out each cell. etc. Templating is a pain and takes a while. Its best to take it tiny bit by tiny bit, verifying as you go. – Dessus Dec 22 '11 at 20:57

jQuery and jTemplates - how to get the proper values?

1 Answers1