Binding Json data to a table in mvc 4

Question

I am working in an mvc 4 application..I want to bind a json data to a table in my application using jquery.I am able to convert a dataset (for which i get data from database) to json data using a method and get the json data.But i dont know how to bind it to a table using jquery.Please tell me way to solve this problem..

JSon data:

My json data is something like this..

[{"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                
        });
    });

View:

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

your code helped me alot, thanks – HarshSharma Feb 27 '14 at 10:41 — HarshSharma, Feb 27 '14 at 10:41

score 4 · Accepted Answer · answered Jul 20 '13 at 06:24

4

First, you should parse the return json string to a json object:

data = $.parseJSON(data);

Then, iterate through it and create your table. The complete solution is like the following:

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

});

answered Jul 20 '13 at 06:24

Amin Saqi

18,549
7
50
70

I don't think that you'll have problem to binding date like other fields. Do you have any problem? pls explain – Amin Saqi Jul 20 '13 at 06:51
ya for date fields i get undefined when binding..others all are binding perfectly.. – coder Jul 20 '13 at 06:54
remove white spaces from `Date of Birth` in your data definition to becomes like `DateOfBirth`. You also may have a problem to show the DateTime correctly. If so, define this function and use it to convert json date `function date(s) { return new Date(parseFloat(/Date\(([^)]+)\)/.exec(s)[1])); }` – Amin Saqi Jul 20 '13 at 07:03
where to use this function? – coder Jul 20 '13 at 07:08
I cant Convert using this function. – coder Jul 20 '13 at 07:26
This may be works too: `var thedate = Date(item.DateOfBirth);` then use `thedate` variable to bind to table cell. – Amin Saqi Jul 20 '13 at 09:08
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/33823/discussion-between-coder-and-aminsaghi) – coder Jul 20 '13 at 09:10
its is like this 'Sat Jul 20 2013 14:43:21 GMT+0530 (India Standard Time)' but i need like this ' 12/31/1899 12:00:00 PM' – coder Jul 20 '13 at 09:16
maybe you can find an approach here: `http://stackoverflow.com/questions/206384/how-to-format-a-json-date` – Amin Saqi Jul 20 '13 at 09:29

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

I Think You can't directly bind json into html table

You need to use any jquery plugins like

Jqgrid

DataTables

Or you can write your own plugins. Or you need to generate html table from the json.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 20 '13 at 06:24

Nithesh Narayanan

11,481
34
98
138

Binding Json data to a table in mvc 4

2 Answers2

Linked