加载ASP.Net MVC JSONResult jQuery DataTables [英] Load ASP.Net MVC JSONResult jQuery DataTables

问题描述

我试图让DataTables（http://datatables.net）使用ASP.Net MVC Controller返回的JsonResult。我继续收到一个DataTables警告（表id ='示例））：从数据源为第0行请求的未知参数0错误，根据文档意味着它找不到列。

返回JsonResult的控制器中的代码如下所示：

  public JsonResult LoadPhoneNumbers（）
 {
列表< PhoneNumber> phoneNumbers = new List< PhoneNumber>（）; 
 PhoneNumber num1 = new PhoneNumber {Number =555 123 4567，Description =George}; 
 PhoneNumber num2 = new PhoneNumber {Number =555 765 4321，Description =Kevin}; 
 PhoneNumber num3 = new PhoneNumber {Number =555 555 4781，Description =Sam}; 
 
 phoneNumbers.Add（num1）; 
 phoneNumbers.Add（num2）; 
 phoneNumbers.Add（num3）; 
 
 return Json（phoneNumbers，JsonRequestBehavior.AllowGet）; 
} 
  

PhoneNumber只是一个具有2个属性Number和Description的普通C＃类。 / p>

检索和加载数据的JavaScript如下所示：

  ;脚本> 
 $（document）.ready（function（）{
 $（'＃example'）。dataTable（{
bProcessing：true，
sAjaxSource帐户/ LoadPhoneNumbers /'，
sAjaxDataProp：
}）; 
}）; 
< / script> 
  

而且html看起来像：

 < table cellpadding =0cellspacing =0border =0class =displayid =example> 
< thead> 
< tr> 
< th> 
数
< / th> 
< th> 
描述
< / th> 
< / tr> 
< / thead> 
< tbody> 
< / tbody> 
< tfoot> 
< / tfoot> 
< / table> 
  

我已故意将sAjaxDataProp设置为空字符串，以便DataTables不寻找aaData。即使我在控制器中明确设置了aaData：

  return Json（new {aaData = phoneNumbers}）; 
  

我仍然收到错误。请问有什么建议吗？

谢谢！

解决方案

对我来说：

  $（function（）{
 $（'＃example'）。dataTable（{
 bProcessing：true，
 sAjaxSource：'@ Url.Action（LoadPhoneNumbers，Home）'
}）; 
}）; 
  

我已经删除了 sAjaxDataProp 属性。 / p>

与此数据源：

  public ActionResult LoadPhoneNumbers（）
 {
 return Json（new 
 {
 aaData = new [] 
 {
 new [] {Trident，Internet Explorer 4.0，Win 95，4，X}，
 new [] {Gecko，Firefox 1.5，Win 98+ / OSX.2 +，1.8，A 
 new [] {Webkit，iPod Touch / iPhone，iPod，420.1，A} 
} 
}，JsonRequestBehavior.AllowGet） 
} 
  

，而您手机的示例只是简单地：

  public ActionResult LoadPhoneNumbers（）
 {
 var phoneNumbers = new List< PhoneNumber>（new [] 
 {
 new PhoneNumber {Number =555 123 4567，Description =George}，
 new PhoneNumber {Number =555 765 4321，Description =Kevin}，
 new PhoneNumber {Number = 555 555 4781，Description =Sam} 
}）; 
 
 return Json（new 
 {
 aaData = phoneNumbers.Select（x => new [] {x.Number，x.Description}）
} JsonRequestBehavior.AllowGet）; 
} 
  

I'm trying to get the DataTables(http://datatables.net) to work with a JsonResult returned by an ASP.Net MVC Controller. I keep getting a "DataTables warning (table id = 'example'): Requested unknown parameter '0' from the data source for row 0" error which according to the docs means it cant find the columns.

The code in controller that returns the JsonResult looks like:

    public JsonResult LoadPhoneNumbers()
    {
        List<PhoneNumber> phoneNumbers = new List<PhoneNumber>();
        PhoneNumber num1 = new PhoneNumber { Number = "555 123 4567", Description = "George" };
        PhoneNumber num2 = new PhoneNumber { Number = "555 765 4321", Description = "Kevin" };
        PhoneNumber num3 = new PhoneNumber { Number = "555 555 4781", Description = "Sam" };

        phoneNumbers.Add(num1);
        phoneNumbers.Add(num2);
        phoneNumbers.Add(num3);

        return Json(phoneNumbers, JsonRequestBehavior.AllowGet);
    }

PhoneNumber is just a plain C# class with 2 properties, Number and Description.

The javascript that retrieves and loads the data looks like:

<script>
$(document).ready(function () {
    $('#example').dataTable({
        "bProcessing": true,
        "sAjaxSource": '/Account/LoadPhoneNumbers/',
        "sAjaxDataProp": ""
    });
});
</script>

And the html looks like:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
    <tr>
        <th>
            Number
        </th>
        <th>
            Description
        </th>
    </tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>

I've deliberately set sAjaxDataProp to an empty string so that DataTables does not look for aaData. Even when I explicitly set aaData like so in the controller:

return Json(new { aaData = phoneNumbers });

I still get the error. Any advice please?

Thanks!

解决方案

The following works great for me:

$(function () {
    $('#example').dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Home")'
    });
});

I have removed the sAjaxDataProp property.

with this data source:

public ActionResult LoadPhoneNumbers()
{
    return Json(new
    {
        aaData = new[] 
        {
            new [] { "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" },
            new [] { "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A" },
            new [] { "Webkit", "iPod Touch / iPhone", "iPod", "420.1", "A" }
        }
    }, JsonRequestBehavior.AllowGet);
}

and for your example with phones simply:

public ActionResult LoadPhoneNumbers()
{
    var phoneNumbers = new List<PhoneNumber>(new[] 
    {
        new PhoneNumber { Number = "555 123 4567", Description = "George" },
        new PhoneNumber { Number = "555 765 4321", Description = "Kevin" },
        new PhoneNumber { Number = "555 555 4781", Description = "Sam" }
    });

    return Json(new
    {
        aaData = phoneNumbers.Select(x => new[] { x.Number, x.Description })
    }, JsonRequestBehavior.AllowGet);
}

这篇关于加载ASP.Net MVC JSONResult jQuery DataTables的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！