使用 javascript 将 JSON 对象绑定到 asp.net gridview 控件答案

【问题标题】：Bind JSON object to asp.net gridview control using javascript使用 javascript 将 JSON 对象绑定到 asp.net gridview 控件
【发布时间】：2012-07-09 02:37:30
【问题描述】：

我的 jquery ajax 调用了我的代码行为静态 WebMethod，我使用 System.Web.Script.Serialization.JavaScriptSerializer 来获取 JSON 对象，输出是这样的。

[{"ProductId":"9","Category":"TV","Products":"Discovery","Price":15.97},{"ProductId":"25","Category":"TV","Products":"HBO","Price":15.97}]

我有具有 ProductId、Category、Products、Price 列的 GridView（asp.net 控件）。我应该使用 JavaScript 将此 json 对象绑定到 gridview。

我什至不知道如何在上面的 Json 字符串上申请循环。请对此有所了解。

【问题讨论】：

标签： javascript jquery asp.net html json

【解决方案1】：

您可以像这样遍历您的 JSON 数据

var data=[{"ProductId":"9","Category":"TV","Products":"Discovery","Price":15.97},
          {"ProductId":"25","Category":"TV","Products":"HBO","Price":15.97}];

$.each(data,function(index,item){
    alert(item.ProductId);
    alert(item.Category);
});

要替换 Grid，您可以为表格构建 HTML 标记并将其注入 DOM。

 var itemRow="<table>";  
 $.each(data,function(index,item){
    itemRow+="<tr><td>"+item.ProductId+"</td><td>"+item.Category+"</td></tr>";
 });        
 itemRow+="</table>";  

 $("#divItems").html(itemRow);

工作样本http://jsfiddle.net/qS7uD/6/

但是在此之后您将不会获得 ASP.NET 网格事件，因为它是用于显示的纯 HTML 标记

【讨论】：

【解决方案2】：

使用默认的 asp.net 网格无法做到这一点，请查看 jQGrid 以获取基于 json 的网格

【讨论】：

【解决方案3】：

要反序列化您的 JSON，您应该创建一个具有相同属性的类并像这样使用 JavascriptSerilzier。

public class Product
{
  public int ProductId{get;set;}
  public string Category{get;set;} 
  public string Products{get;set;} 
  public decimal Price{get;set;}
} 


myProducts List<Product> = new JavaScriptSerializer().Deserialize<List<Project>>(myJson);

然后，您可以使用简单的 for-each 循环遍历您的产品列表。您还可以使用 List 作为数据源来绑定控件。

【讨论】：