jquery - 在mvc 4中将Json数据绑定(bind)到表

Question

我正在 mvc 4 应用程序中工作。我想使用 jquery 将 json 数据绑定(bind)到我的应用程序中的表。我能够使用 a 将数据集(我从数据库获取数据)转换为 json 数据方法并获取 json 数据。但我不知道如何使用 jquery 将其绑定(bind)到表。请告诉我解决此问题的方法..

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>

Controller :

   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);
    }

Answer 1

首先，您应该将返回的 json string 解析为 json object:

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.
        });                
    });

});