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 Controller操作，用于构建数据并将其发送到部分

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

简而言之，只需更改填充数据表的方式即可。您可以使用datatables 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>

您需要一个新的Controller方法，将数据返回为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

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

定义初始UI

return PartialView();

将数据返回到网格

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

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

success(data) { bindGrid(data); }

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

2 个答案: