将 jQuery DataTable 与 ASP.NET MVC 结合使用的正确 AJAX 模式是什么？

Question

我有一个 jQuery 数据表 配置为针对 ASP.NET MVC 服务器的服务器端处理。

为了实现渐进增强，将呈现 HTML 表，然后升级为 DataTable。当 DataTable 进行 AJAX 调用来检索更多数据时，它期望返回的 JSON 元素与现有的表列布局相关联。

这 似乎 造成一些架构摩擦，因为：

在初始页面渲染期间：

• Controller将数据库数据转换为DTO并建立ViewData模型。
• ViewPage借助HtmlHelper等将ViewData模型转换为HTML。

AJAX 期间更新：

• 控制器将数据库数据转换为表格单元格数据，带有超链接等。
• DataTable 将返回的数据直接呈现到表格单元格中。

这里的要点是，控制器现在被迫了解表格渲染布局，当它有责任时 应该 仅限于回传 DTO。

什么是 正确的 这里的图案？如何支持 AJAX 调用并遵守控制器中的单一职责原则？

---

一些清晰度：

我的 DTO 具有三个属性：

public class AccountListing
{
    public int Id { get; set; }
    public string AccountCode { get; set; }
    public string AccountName { get; set; }
}

渲染的 DataTable 有四列：

+--------------+--------------+------+------+
| Account Code | Account Name | View | Edit |
+--------------+--------------+------+------+
| 12345        | FooBar Inc.  | Link | Link |
+--------------+--------------+------+------+

ViewPage 将 3 个属性 DTO 呈现为 4 列表。如果控制器将与 AJAX JSON 相同的 3 个属性 DTO 传回，则数据表会抱怨缺少列...数据表期望返回的 JSON 表示单元格元素，而不是源数据。

目前我正在使用 jQuery 数组转换和自定义表格渲染来解决这个问题，这有效地复制了 ViewPage 的逻辑。

还有其他选择吗？

Answer 1

您当前的解决方案（在客户端进行渲染）对我来说听起来不错。

问题是，您的 DTO 不必与您的视图页面显示的内容相对应。流行的模式是针对这些情况使用 ViewModel 对象。

例如 ：

public class AccountListingViewModel {
    public string AccountCode { get; set; }
    public string AccountName { get; set; }
    public string ViewLink { get; set; }
    public string EditLink { get; set; }
    public static AccountListingViewModel FromAccountListing(AccountListing o) {
        AccountListingViewModel returnObj = new AccountListingViewModel();
        //populate the properties from the parameter
        return returnObj;
    }
}

看 [视图模型], [模型-视图-视图模型].