加载 ASP.Net MVC JSONResult jQuery DataTables

Posted 2023-05-07

【中文标题】加载 ASP.Net MVC JSONResult jQuery DataTables

【英文标题】：Load ASP.Net MVC JSONResult jQuery DataTables

【发布时间】：2011-12-11 18:23:24

【问题描述】：

我正在尝试让 DataTables(http://datatables.net) 与 ASP.Net MVC 控制器返回的 JsonResult 一起工作。我不断收到“DataTables 警告（表 id = 'example'）：从第 0 行的数据源请求未知参数 '0'”错误，根据文档，这意味着它无法找到列。

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

    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 只是一个普通的 C# 类，具有 2 个属性，Number 和 Description。

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

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

html 看起来像：

<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>

我故意将 sAjaxDataProp 设置为空字符串，这样 DataTables 就不会查找 aaData。即使我在控制器中像这样明确设置 aaData：

return Json(new  aaData = phoneNumbers );

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

谢谢！

【参考方案1】：

以下内容对我很有用：

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

我已删除 sAjaxDataProp 属性。

使用此数据源：

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

【讨论】：

好的，所以问题在于 PhoneNumbers 类的序列化方式。如果您查看提琴手，JSON 看起来像这样：["Number":"555 123 4567","Description" :"George","Number":"555 765 4321","Description":"Kevin","Number":"555 555 4781","Description":"Sam"] 怎么走关于删除属性名称编号和描述？

@PW763，是的，问题在于您格式化 JSON 的方式。请参阅我的更新答案，其中包含如何正确格式化电话号码的示例。

嗨，Dari，我也遇到过类似的问题。我相信你会知道答案，我提出了新问题，这是链接***.com/questions/14352736/…

脚本因 'aDataSort' 缺少参数而失败。

您需要在 DataTable 脚本代码中添加 "columns":[your col values] 参数。

【参考方案2】：

在这个example 中，控制器方法返回的数据似乎需要采用特定格式。他实际上将列表作为 aaData 的一部分返回。它还解释了每个参数的用途。也许您只是没有将返回格式化为 DataTables 可以理解的 json 格式。

public class HomeController : Controller

    public ActionResult AjaxHandler(jQueryDataTableParamModel param)
    
        return Json(new
                sEcho = param.sEcho,
                iTotalRecords = 97,
                iTotalDisplayRecords = 3,
                aaData = new List<string[]>() 
                    new string[] "1", "a1", "a2", "a3",
                    new string[] "2", "b1", "b2", "b3",
                    new string[] "3", "c1", "c2", "c3"
                    
            ,
        JsonRequestBehavior.AllowGet);
    

【讨论】：

另外，您的 HTML 标记是关闭还是只是复制/粘贴错误。