在 MVC 中从 sDom 格式重新加载数据表

Question

我们有一个项目（具体来说是 SmartAdmin 模板），我们试图在该项目的部分视图中重新加载有关用户某些操作的表格的数据。我只是不知道如何处理我们开始的设置。

数据表初始化代码-

function setupInProgressTable(tabletSize, phoneSize) {

    /* Data Tables */
    var responsiveHelper_in_progress = undefined;

    var breakpointDefinition = {
        tablet: Number(tabletSize),
        phone: Number(phoneSize)
    };

    /* In Progress */
    $('#in_progress').dataTable({
        "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-6 hidden-xs'C>r>" +
            "t" +
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        "autoWidth": true,
        "preDrawCallback": function () {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper_in_progress) {
                responsiveHelper_in_progress = new ResponsiveDatatablesHelper($('#in_progress'), breakpointDefinition);
            }
        },
        "rowCallback": function (nRow) {
            responsiveHelper_in_progress.createExpandIcon(nRow);
        },
        "drawCallback": function (oSettings) {
            responsiveHelper_in_progress.respond();
        },
        "order": [[2, "asc"]]

    });
}

构建数据并将其发送到部分的 MVC 控制器操作

// GET: Tier2/InProgressTable
/// <summary>
/// Gets data to supply to the In Progress Table on draw
/// </summary>
/// <returns>ActionResult - _InProgressTable Partial View</returns>
[Authorize(Roles = "Tier2.Issues.Edit.All")]
public ActionResult InProgressTable()
{
    var results = _api.Tier2.Issues.GetTier2Issue(resolved: false);
    List<Tier2IssuesViewModel> viewModel = new List<Tier2IssuesViewModel>();
    if (results.message == null)
    {
        // Get the corresponding issues for this table
        var statuses = new int[] { 2, 4 };
        var issues = results.data.Where(i => statuses.Contains(int.Parse(i.IssueStatus.id.ToString())));

        // Set items for the view model
        foreach (var item in issues)
        {
            var theIssueStatusList = GetIssueStatusList(); // Build up data for IssueStatusList

            Tier2IssuesViewModel theModel = new Tier2IssuesViewModel();
            theModel.Issue = item;
            theModel.IssueStatusList = theIssueStatusList;

            if (theModel.Issue.IssueStatus != null)
                theModel.IssueStatusList.Where(m => m.Value == theModel.Issue.IssueStatus.id.ToString()).First().Selected = true;
            viewModel.Add(theModel);
        }

        return PartialView("_InProgressTable", viewModel);
    }
    else
    {
        ModelState.AddModelError("", results.message);
    }

    return PartialView("");
}

关于我应该从哪里开始的任何想法？

Answer 1

简而言之，只需更改填充数据表的方式即可。您可以使用数据表 API 使用 Ajax 填充数据，而不是在 ViewModel 中传递数据。

一个简单的例子：

Controller 方法可以简化，因为它不处理任何数据：

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

您的视图只需要一个空表：

<table id="in_progress">
      <thead>
          <tr>
              <th>Id</th>
              <th>Name</th>
          </tr>
      </thead>
    <tbody></tbody>
</table>

您需要一个新的控制器方法，以 json 格式返回数据：

public ActionResult PopulateInProgressTable()
{
   var results = _api.Tier2.Issues.GetTier2Issue;
   // read into object array 
   var result = from r in results
                select new object[]
                {
                     r.Id,
                     r.Title
                }; 
    // Get the sEcho param  
    var _sEcho = request.QueryString["sEcho"];

    // return data to datatable
    return Json(new
    {
        _sEcho,
        iTotalRecords = result.Count(),
        iTotalDisplayRecords = result.Count(),
        aaData = result
    }, JsonRequestBehavior.AllowGet);
}

这里有几点需要注意 - datatables 需要特定格式的 json 数据，因此创建一个 json 对象，其属性名称如上例所示。 sEcho 是请求中发送的参数，您只需将其原封不动地返回即可。 iTotalRecords和iTotalDisplayRecords用于分页，aaData是实际数据。

最后你在 javascript 中初始化数据表：

var oTable = $('#in_progress').DataTable({
        'serverSide': true,
        "ajax": {
            "url": [your url] + '/PopulateInProgressTable'
        },
        'processing': true,
        'columns': [
            {
              'data': 0
            },
            {
               'data': 1
            }
       });

这需要在创建局部视图后运行，否则当数据表初始化代码运行时该表将不存在。

如前所述，这是一个非常简单的示例，但应该足以让您入门。

Answer 2

您需要在部分视图代码中设置初始配置。数据将需要在单独的端点调用中应用。

定义初始用户界面

return PartialView();

将数据返回到您的网格

return Json(Something.GetData(),JsonBehavior.AllowGet);

要设置PartialView 的初始状态并初始绑定数据，您应该绑定页面加载事件，这通常在PartialView 中定义的jquery.load() 函数中完成。 部分加载时，请确保调用控制器方法将数据返回到网格。您可能还想在网格数据函数中添加一个参数来指示用户的意图？但是，您可以通过将网格绑定到返回 json 有效负载的客户端 ajax 函数的结果来加载和重新加载网格。

success(data) { bindGrid(data); }