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

我们有一个项目（具体来说是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"]]

    });
}

函数设置程序表（TableSize，phoneSize）{
/*数据表*/
var responsiveHelper_in_progress=未定义；
变量断点定义={
tablet:编号（tabletSize），
电话：号码（电话号码）
};
/*进行中*/
$（'进行中'）.dataTable({
“sDom”：”+
“t”+
"",
“自动宽度”：正确，
“preDrawCallback”：函数（）{
//初始化响应datatables帮助程序一次。
如果（！responsiveHelper\u正在进行）{
responsiveHelper_in_progress=新的ResponsiveDatatablesHelper（$（“#in_progress”），断点定义；
}
},
“rowCallback”：函数（nRow）{
正在进行的responsiveHelper.createExpandIcon（nRow）；
},
“drawCallback”：函数（oSettings）{
responsiveHelper_正在进行中。Response（）；
},
“订单”：[[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("");
}

//GET:Tier2/InProgressTable
/// 
///获取要在绘图时提供给进行中表的数据
/// 
///ActionResult-\u可编程局部视图
[授权（Roles=“Tier2.Issues.Edit.All”）]
公共行动结果InProgressTable（）
{
var results=_api.Tier2.Issues.GetTier2Issue（已解决：false）；
列表视图模型=新列表（）；
if（results.message==null）
{
//获取此表的相应问题
var status=newint[]{2,4}；
var issues=results.data.Where（i=>status.Contains（int.Parse（i.IssueStatus.id.ToString（）））；
//为视图模型设置项目
foreach（问题中的var项目）
{
var theIssueStatusList=GetIssueStatusList（）；//为IssueStatusList建立数据
Tier2IssuesViewModel模型=新的Tier2IssuesViewModel（）；
模型问题=项目；
model.IssueStatusList=其IssueStatusList；
if（model.Issue.IssueStatus！=null）
其中（m=>m.Value==model.Issue.IssueStatus.id.ToString（））.First（）.Selected=true；
添加（模型）；
}
返回PartialView（“\u InProgressTable”，viewModel）；
}
其他的
{
ModelState.AddModelError（“，results.message”）；
}
返回部分视图（“”）；
}

---

有什么想法吗？

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

定义初始UI的步骤

return PartialView();

将数据返回到网格

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

要设置

PartialView

的初始状态并初始绑定数据，您应该绑定到页面加载事件中，这通常在

PartialView

中定义的jquery.load（）函数中完成。 部分加载时，请确保调用控制器方法将数据返回到网格。您可能还希望向网格数据函数添加一个参数，以指示用户的意图？但是，可以通过将网格绑定到返回json负载的客户端ajax函数的结果来加载和重新加载网格

success(data) { bindGrid(data); }

---

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

一个简单的例子：

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

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

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

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

这里需要注意的几件事-datatables需要特定格式的json数据，因此创建一个json对象，其属性如上例所示

sEcho

是请求中发送的一个参数，您只需原封不动地返回它

iTotalRecords

和

iTotalDisplayRecords

用于分页，

aaData

是实际数据

最后，在javascript中初始化datatable：

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

这需要在创建部分视图后运行，否则当datatables初始化代码运行时，表将不存在

---

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

不清楚您实际上是如何填充数据表的，可能您正在循环通过

列表

并手动构建它。如果是这种情况，那么我想知道为什么不使用API来加载数据？这将使后续的重新加载更加容易。@markpsmith我明白你的意思，我们正在视图中手动排序数据。首先，您将如何使用API加载数据？我想我们在这一点上迷失了方向。所以我想切换到这种格式，但对于我想用调用操作的按钮或可编辑并执行回发的下拉列表填充某些列的情况，这仍然有效吗？是的，有一个

render

选项，允许您精确指定每个单元格中输出的内容。这可以是html控件或任何您喜欢的控件。

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