0

我在构建正确格式的 jTemplates 时遇到问题 - 希望能得到一些帮助。这就是我所拥有的：一个带有 WebMethod 的 ASP.NET 页面。此 WebMethod 将数据返回给 jQuery。然后数据应由 jTemplates 处理，但我不确定 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;
            }
        }
    }
}

从“return t”返回的数据格式如下。

{"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]
]}

我正在使用以下代码将数据解析为 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>

我不确定 mytemplate.htm 应该如何构造：

{#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}

我尝试过使用 {$T.post[0]} 之类的东西，但这不起作用。

作为旁注，我想避免从 WebMethod 返回类似的内容：

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

如果是这样的话，我会做这样的事情：

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

...但我想避免这种情况，以使模板更通用/可用于其他返回的数据。

有什么建议么？:-)

4

1 回答 1

0

我不确定 JSONP 适合你在做什么？JSONP 只支持 GET HTTP 动作，即不支持 POST。请参见此处：将数据发布到 JsonP

您可以使用 CORS 进行跨域发布，请参见此处：http ://enable-cors.org/

我建议使用 firebug 并使用调试点来检查您的返回变量或使用这种日志记录方式：如何显示 JavaScript 对象？. 这将允许您查看返回的内容。之后，您可以将问题范围缩小到专门与 JTemplate 相关的问题。您也可以尝试 jquery 内置的模板，称为 jquery.tmpl http://api.jquery.com/jquery.tmpl/

于 2011-12-22T00:50:46.690 回答