将Json数据绑定到mvc 4中的表

我正在使用mvc 4应用程序..我想使用jquery将json数据绑定到我的应用程序中的表。我能够使用方法将数据集（我从数据库中获取数据）转换为json数据并获取json data.But我不知道如何使用jquery将它绑定到一个表。请告诉我解决这个问题的方法..

JSon数据 ：

我的json数据是这样的……

[{"Location":"Chennai","Duration":"15","Sno":"1", "Date of Birth":"\/Date(-2209051800000)\/","Dateofjoin":"\/Date(-2209048200000)\/"}] 

Jquery ：

 $('#btnGoNew').click(function () { var url = '@Url.Content("~/Somecontroller/GetValue")'; $.getJSON(url, { id: valz }, function (data) { //code to bind table }); }); 

查看 ：

   
 
 
 
Location
 
Duration
 
Sno
 
Date of Birth
 
Dateofjoin
 
 
 
 
 
 
 
  

控制器 ：

  public JsonResult GetValue(string id) { JsonResult json = new JsonResult(); DataSet ds = LoadDoctordetailsNew(id); /*LoadDoctordetailsNew is method where i get data from database and convert to dataset.It returns a dataset*/ string returnData = GetJson(ds.Tables[0]); json.JsonRequestBehavior = JsonRequestBehavior.AllowGet; json.Data = returnData; return json; } public static string GetJson(DataTable dt) { System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); List<Dictionary> rows = new List<Dictionary>(); Dictionary row = null; foreach (DataRow dr in dt.Rows) { row = new Dictionary(); foreach (DataColumn col in dt.Columns) { row.Add(col.ColumnName, dr[col]); } rows.Add(row); } return serializer.Serialize(rows); } 

Answer 1

首先，您应该将返回的json 字符串解析为json 对象 ：

 data = $.parseJSON(data); 

然后，遍历它并创建表。 完整的解决方案如下：

 $('#btnGoNew').click(function () { var url = '@Url.Content("~/DoctorDetail/GetValue")'; $.getJSON(url, { id: valz }, function (data) { data = $.parseJSON(data); //code to bind table $.each(data, function(i, item) { var html = "" + item.Location + ""; html += "" + item.Duration + ""; // and html += other fields... $("#grd1 tr:last").after(html); // the above line is like that because you use  // in table definition. }); }); }); 

Answer 2

我想你不能直接将json绑定到html表中

你需要使用任何jquery插件

jqGrid的

数据表

或者你可以编写自己的插件。 或者你需要从json生成html表。