我正在MVC 4应用程序中工作..我想使用jQuery将json数据绑定到应用程序中的表。我能够使用方法将数据集(我从数据库中获取数据)转换为json数据并获取json数据。但是我不知道如何使用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 }); });
查看 :
<input type="button" class="MasterButton" id="btnGoNew"/> <table id="grd1"> <thead> <tr> <th>Location</th> <th>Duration</th> <th>Sno</th> <th>Date of Birth</th> <th>Dateofjoin</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table>
控制器 :
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<string, object>> rows = new List<Dictionary<string, object>>(); Dictionary<string, object> row = null; foreach (DataRow dr in dt.Rows) { row = new Dictionary<string, object>(); foreach (DataColumn col in dt.Columns) { row.Add(col.ColumnName, dr[col]); } rows.Add(row); } return serializer.Serialize(rows); }
首先,您应该将返回的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 = "<tr><td>" + item.Location + "</td>"; html += "<td>" + item.Duration + "</td>"; // and html += other fields... $("#grd1 tr:last").after(html); // the above line is like that because you use <tbody> // in table definition. }); }); });