MVC中JQuery DataTables插件无法渲染JSON数据求助

首先，核心问题是你把视图渲染的Action和提供JSON数据的Action混在一起了——你的Index Action返回的是JsonResult，当你访问这个页面时，ASP.NET MVC会直接输出JSON内容，而不会渲染对应的视图页面，这就是页面只显示原始JSON的根本原因。

接下来一步步帮你修正：

1. 修改控制器代码，拆分视图与数据接口 #

保留Index Action用于返回视图，新增一个专门提供数据的Action（比如GetSubjects）：

// 用于渲染视图的Action
public ActionResult Index()
{
    ViewBag.Title = "Index";
    return View();
}

// 用于提供JSON数据的Action
public JsonResult GetSubjects()
{
    var subjects = _db.Subjects.Select(x => new SubjectViewModel() 
    { 
        SubjectName = x.SubjectName 
    }).ToList();
    return Json(subjects, JsonRequestBehavior.AllowGet);
}

2. 修正视图中的AJAX请求与DataTables配置 #

你的AJAX请求里的控制器名称写错了——应该是你的实际控制器类名（比如SubjectController，去掉Controller后缀），而不是SubjectViewModel。同时调整DataTables的配置为新版本语法（旧版的aaData/aoColumns已经不推荐使用）：

@* 这里不需要指定模型，因为数据通过AJAX加载 *@
@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<div>
    <table id="mytable" class="display">
        <thead>
            <tr>
                <th> Subject Name </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<script>
// 处理$.noConflict()的冲突问题，把$作为参数传入ready回调
jQuery(document).ready(function ($) {
    $.ajax({
        url: '@Url.Action("GetSubjects", "Subject")', // 替换成你的实际控制器名称
        type: 'GET',
        dataType: 'JSON',
        success: function (response) {
            $('#mytable').DataTable({
                data: response,
                columns: [
                    { data: 'SubjectName' } // 注意不要加多余空格
                ]
            });
        },
        // 增加错误处理，方便调试问题
        error: function(xhr, status, error) {
            console.error('加载数据失败:', error);
        }
    });
});
</script>

3. 最后检查几个细节 #

• 确保布局页面_Layout.cshtml里的资源引入顺序正确：先引入jQuery，再引入DataTables的CSS和JS文件。
• 确认SubjectViewModel类的SubjectName是公共可访问的属性（要有公开的getter）。
• 访问页面时，要指向视图对应的路由（比如/Subject/Index），而不是直接访问GetSubjects接口。

这样修改后，页面会先渲染表格框架，再通过AJAX拉取数据，最终由DataTables渲染成格式化的表格。

内容的提问来源于stack exchange，提问作者chasingD