绑定JSON数据到一个表中的MVC 4 [英] Binding Json data to a table in mvc 4

问题描述

我在MVC工作4 application..I想在我的应用程序绑定一个JSON数据表使用jquery.I我能够到数据集（为此我从数据库中获取数据）转换为使用JSON数据方法并获得data.But我不知道如何使用jquery.Please告诉我的方式来解决这个问题，它绑定到一个表中的JSON ..

JSON数据

我的JSON数据是这样的..

  [{位置：奈，持续时间：15，斯诺：1
 出生日期：\\ /日期（-2209051800000）\\ /，Dateofjoin：\\ /日期（-2209048200000）\\ /}]
 

jQuery的

  $（'＃btnGoNew'）。点击（函数（）{
        VAR URL ='@ Url.Content（〜/ Somecontroller /的GetValue）';
        $ .getJSON（URL，{ID：valz}，功能（数据）{
            // code绑定表
        }）;
    }）;
 

查看

 ＆LT;输入类型=按钮级=MasterButtonID =btnGoNew/＆GT;
            ＆LT;表ID =GRD1＆GT;
             ＆LT;＆THEAD GT;
                ＆所述; TR＆GT;
                   ＆LT;第i个位置和LT; /第i
                   百分位＆gt;持续时间与LT; /第i
                   ＆LT;第i斯诺＆LT; /第i
                   ＆LT;第i出生＆LT日期; /第i个
                   ＆LT;第i Dateofjoin＆LT; /第i
                ＆LT; / TR＆GT;
             ＆LT; / THEAD＆GT;
             ＆LT;＆TBODY GT;
             ＆所述; TR＆GT;
              ＆LT; TD＆GT;＆LT; / TD＆GT;
             ＆LT; / TR＆GT;
             ＆LT; / TBODY＆GT;
           ＆LT; /表＆gt;
 

控制器

 公共JsonResult的GetValue（字符串ID）
    {
        JsonResult JSON =新JsonResult（）;
        数据集DS = LoadDoctordetailsNew（ID）;
       / * LoadDoctordetailsNew是方法，其中，我从数据库中获取数据并转换
          到dataset.It返回数据集* /
        串returnData =的getJSON（ds.Tables [0]）;
        json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
        json.Data = returnData;
        返回JSON;
    }    公共静态字符串的getJSON（DataTable的DT）
    {
        System.Web.Script.Serialization.JavaScriptSerializer串行=
           新System.Web.Script.Serialization.JavaScriptSerializer（）;
        清单＆LT;＆字典LT;字符串对象＆gt;＆GT;行数=
           新的List＆LT;＆字典LT;字符串对象＆gt;＆GT;（）;
        字典＆LT;字符串对象＆gt;排= NULL;        的foreach（在dt.Rows的DataRow博士）
        {
            行=新词典与LT;字符串对象＆gt;（）;
            的foreach（在dt.Columns的DataColumn COL）
            {
                row.Add（col.ColumnName，博士[COL]）;
            }
            rows.Add（行）;
        }
        返回serializer.Serialize（行）;
    }
 

解决方案

首先，你必须解析返回JSON的字符串以一个JSON的目标

 数据= $ .parseJSON（数据）;
 

然后，遍历并创建表。完整的解决方案是这样的：

  $（'＃btnGoNew'）。点击（函数（）{
    VAR URL ='@ Url.Content（〜/ DoctorDetail /的GetValue）';
    $ .getJSON（URL，{ID：valz}，功能（数据）{
        数据= $ .parseJSON（数据）;
        // code绑定表
        $。每个（数据，功能（I，项目）{
            变种的html =下; TR＆GT;＆下; TD＆gt;中+ item.Location +＆下; / TD＆gt;中;
            HTML + =＆LT; TD＆gt;中+ item.Duration +＆下; / TD＆gt;中;
            //和HTML + =等领域...
            $（＃GRD1 TR：最后一个）后（HTML）。
            //上面这一行就是这样，因为你使用＆lt;＆TBODY GT;
            //在表定义。
        }）;
    }）;}）;
 

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

解决方案

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

});

这篇关于绑定JSON数据到一个表中的MVC 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！