jQuery DataTables doesn't display data with ASP.NET MVC 4 Razor

Question

My script produces data but jQuery DataTables doesn't load it and shows the following error:

DataTables warning: table id= example - Requested unknown parameter 'FTR_Kno' for row 0

Should I use mvc-datatables?

View:

<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/dataTables.jqueryui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<!DOCTYPE html>

<html>
<body>
    <div>
        <input id="Button1" type="button" value="button" />
    </div>
    <div>
        <form>
            <table id="example">
                <thead>
                    <tr>
                        <td>FTR_Kno</td>
                        <td>FTR_KodBelge</td>
                        <td>FTR_TarihBelge</td>
                        <td>TDR_KodTedarikci</td>
                        <td>KRM_AckAd</td>
                        <td>FTR_Ack</td>
                        <td>FTS_Ack</td>
                    </tr>
                </thead>
                <tbody>
                    @*<tr>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    </tr>*@
                </tbody>
            </table>
        </form>
    </div>

</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {
        $("#Button1").click(function () {
            alert("bas");
            $.ajax({
                url: '/DataTables/jsonIndex',
                type: "POST",
                dataType: "json",
                success: function (gdata) {
                    alert(gdata);
                    $('#example').DataTable({
                        data: gdata,
                        paging: false,
                        columns: [
                            { "data": "FTR_Kno" },
    { "data": "FTR_KodBelge" },
    { "data": "FTR_TarihBelge" },
    { "data": "TDR_KodTedarikci" },
    { "data": "KRM_AckAd" },
    { "data": "FTR_Ack" },
    { "data": "FTS_Ack" }

                        ]

                    });
                }
            });
        });

    });

</script>

> Controlller :

   [HttpPost]
        public JsonResult jsonIndex()
        {
            CultureInfo c = Thread.CurrentThread.CurrentCulture;
            string userLanguage = c.TwoLetterISOLanguageName;
            Session["language"] = userLanguage;
            string language = Session["language"].ToString();

            ServiceReference1.Service1Client client = new ServiceReference1.Service1Client();
            ServiceReference1.Grid grid = new ServiceReference1.Grid();
            grid = client.GetGridInformation("TUR", "lst_afhFTR");
            List<ServiceReference1.Column> column = new List<ServiceReference1.Column>();
            column.AddRange(grid.columnList);
            //Dim columnName As List(Of String) = grid.columnList.Select(Function(f) f.columnName).ToList()
            ViewBag.ColumnList = grid.columnList;
            ViewBag.GridWidth = grid.gridWidth;
            ViewBag.GridHeader = grid.gridHeader;
            client.Close();

            ServiceReference1.Service1Client client1 = new ServiceReference1.Service1Client();
            grid.gridCode = grid.gridCode.Insert(6, " top " + grid.gridMaxRecord.ToString());
            string[] array = grid.gridCode.Split("\r\n".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
            string code = "";
            foreach (string item in array)
            {
                code = code + " " + item;
            }
            grid.gridCode = code;
            List<Dictionary<string, object>> result = new List<Dictionary<string, object>>();
            result.AddRange(client1.GetTable(grid.gridCode));
            ////WebGrid içine gönderilecek data oluşturulması 
            //IList<object> asildata = new List<object>();
            //dynamic data = new List<ExpandoObject>();
            //foreach (var Pairs in result)
            //{
            //    var row = new ExpandoObject();
            //    List<object> row2 = new List<object>();
            //    foreach (var Pair in Pairs)
            //    {
            //        ((IDictionary<string, object>)row).Add(Pair.Key, Pair.Value);
            //        row2.Add(Pair.Value);
            //    }
            //    data.Add(row);
            //    asildata.Add(row2);
            //};
            JavaScriptSerializer js = new JavaScriptSerializer();
            return Json(js.Serialize(result),JsonRequestBehavior.AllowGet);

        }
    }

Answer 1

You're encoding into JSON twice, first with Serialize() and then with Json() .

Replace:

JavaScriptSerializer js = new JavaScriptSerializer();
return Json(js.Serialize(result),JsonRequestBehavior.AllowGet);

with:

return Json(result, JsonRequestBehavior.AllowGet);

jQuery DataTables doesn't display data with ASP.NET MVC 4 Razor

Question

1 answers

solution1
1 ACCPTED 2015-10-12 11:35:22

jQuery DataTables doesn't display data with ASP.NET MVC 4 Razor

Question

1 answers

solution1 1 ACCPTED 2015-10-12 11:35:22

solution1
1 ACCPTED 2015-10-12 11:35:22