4

私はmvc 4アプリケーションで作業しています.jqueryを使用してアプリケーションのテーブルにjsonデータをバインドしたい.メソッドを使用してデータセット(データベースからデータを取得する)をjsonデータに変換して取得することができますjsonデータ。しかし、jqueryを使用してテーブルにバインドする方法がわかりません。この問題を解決する方法を教えてください..

JSON データ:

私のjsonデータはこのようなものです..

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

Jクエリ：

$('#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);
    }
4

2 に答える 2

4

まず、返された 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.
        });                
    });

});
于 2013-07-20T06:24:42.150 に答える
0

jsonをhtmlテーブルに直接バインドできないと思います

次のようなjqueryプラグインを使用する必要があります

Jqgrid

データテーブル

または、独自のプラグインを作成することもできます。または、json から html テーブルを生成する必要があります。

于 2013-07-20T06:24:57.980 に答える