C# MVC中ViewModel数据无法在Datatable显示且返回无效JSON问题

问题核心原因 #

你当前的/Home/TFSA接口同时承担了两个冲突的职责：响应页面加载请求返回HTML视图、响应Datatable的AJAX请求返回JSON数据，所以Datatable发起请求时拿到的是HTML代码，自然报无效JSON错误。

以下是两种可直接落地的解决方案：

方案1：拆分接口（推荐，适合数据量大、需要Datatable服务端分页/搜索的场景） #

第一步：调整原控制器Action #

原TFSA Action仅负责返回页面视图：

public ActionResult TFSA()
{
    return View();
}

第二步：新增专门返回交易数据的接口 #

新增一个独立Action专门响应Datatable的数据请求：

public ActionResult GetTFSAActiveTrades()
{
    var trades = db.Trades.Where(t => t.AccountName == "TFSA" && t.Active == true).OrderBy(l => l.TradeID).ToList();
    var activeTrades = Mapper.Map<IEnumerable<Trade>, List<ActiveTradesViewModel>>(trades);
    // 按Datatable要求返回带data字段的JSON结构
    return Json(new { data = activeTrades }, JsonRequestBehavior.AllowGet);
}

第三步：修改视图中Datatable的请求地址 #

把ajax配置的url改为新的接口地址：

"ajax": {
    "url": "/Home/GetTFSAActiveTrades",
    "type": "GET",
    "dataType": "json"
},

方案2：页面渲染时直接注入数据（适合数据量小、不需要服务端处理分页/搜索的场景） #

不需要额外接口，页面加载时直接把数据序列化后传给Datatable，少一次HTTP请求。

第一步：调整原控制器Action #

把构造好的视图模型传给视图：

public ActionResult TFSA()
{
    var trades = db.Trades.Where(t => t.AccountName == "TFSA" && t.Active == true).OrderBy(l => l.TradeID).ToList();
    TradeIndexViewModel model = new TradeIndexViewModel()
    {
        ActiveTrades = Mapper.Map<IEnumerable<Trade>, List<ActiveTradesViewModel>>(trades)
    };
    return View(model);
}

第二步：修改视图中Datatable初始化逻辑 #

去掉ajax配置，直接用Razor序列化模型数据传给Datatable：

$('#tfsaActiveTrades').DataTable({
    // 直接注入序列化后的交易数据，不需要额外AJAX请求
    "data": @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.ActiveTrades)),
    "columns": [
        // 原有columns配置保持不变即可
    ]
});

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