使用 Skip() 和 Take() 使用 @Ajax.ActionLink 动态加载数据答案

【问题标题】：Dynamically load data with @Ajax.ActionLink using Skip() and Take()使用 Skip() 和 Take() 使用 @Ajax.ActionLink 动态加载数据
【发布时间】：2012-08-30 14:36:49
【问题描述】：

我是ASP.NET MVC 的新手，所以请帮我解决这个乍一看很简单的问题。

我的View 上有一个学生表，下面有一个Load More 链接。通过单击此链接，我需要使用 AJAX 加载更多学生记录。

这是我的View（省略不必要的数据）

<table id="studentTable">
    <thead>
        ...
    </thead>
    <tbody>
        @Html.Partial("_StudentDetailsList", Model)
    </tbody>
</table>
@Ajax.ActionLink("Load More", "LoadMoreStudents", new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "studentTable"
})

_StudentDetailsList局部视图显示学生

@model IEnumerable<MvcApplication1.Models.Student>
@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
    </tr>
}

动作

public ActionResult LoadMoreStudents(int skip = 0)
{
    return PartialView("_StudentDetailsList", studentRepository.Get(orderBy: s => s.OrderBy(st => st.FirstName).OrderBy(st => st.LastName)).Skip(skip).Take(10));
}

如您所见，我想每次加载接下来的 10 个学生，但我必须知道已经加载了多少。所以问题是：我应该从哪里得到这个skip 参数，我想从View 传递给Action。我怎么能指望View 已经加载了多少部分视图以及每个部分有多少学生？或者将此参数传递给操作是一种不好的做法，也许我应该在其他地方处理它（例如某些服务）？请建议正确的方法来做到这一点。谢谢。

附：请随意编辑标题，因为我想不出合适的标题。

【问题讨论】：

标签： c# ajax asp.net-mvc asp.net-mvc-3 asp.net-mvc-4

【解决方案1】：

最简单的方法是为您创建一个包含这些变量的 ViewModel。

视图模型

public class YourViewModel(){

    public int skip {get;set;}

    public IEnumerable<StudentDetails> StudentDetailList {get;set;}

}

控制器/动作方法

public ActionResult LoadMoreStudents(int skip = 0)
{
    return PartialView("_StudentDetailsList", new YourViewModel{
      StudentDetailList = studentRepository.Get(orderBy: s => s.OrderBy(st => st.FirstName).OrderBy(st => st.LastName)).Skip(skip).Take(10),
      skip = skip + 10});
}

观点 @Html.Partial("_StudentDetailsList", Model.StudentDetailList)

局部视图

@model MvcApplication1.Models.YourViewModel
<table id="studentTable">
    <thead>
        ...
    </thead>
    <tbody>    
  @foreach (var item in Model.StudentDetailList)
   {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
    </tr>
}
    </tbody>
    </table>
    @Ajax.ActionLink("Load More", "LoadMoreStudents", new {skip = Model.skip}, new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.InsertAfter,
        UpdateTargetId = "studentTable"
    })

基本上，您必须能够使用从控制器返回的值动态更新 Ajax.ActionLink。在这里，我已经将它移到了 PartialView 中（可以说您可以将整个表格（包括获取更多链接）移到 PartialView 中，并让它更干净）。

【讨论】：

如果没有 ajax 并且我总是返回 View 就不会有问题。但是你将ViewModel 传递给skip，而不是View。而View 有它自己的ViewModel，其中skip 始终等于10。如何从View 中的PartialView 获得“跳过”？
将您的 Ajax.ActionLink 放在 _StudentDetailsList 的 Partial 视图中。
我认为这样拆分表格不是一个好主意。第一次加载 View 时没问题，但随后我将拥有一个 <table> 标签和多个带有多个 Load More 链接的 </table> 标签。

【解决方案2】：

你在路上。您应该将链接的 Ajax.ActionLink 替换为 $.get，并通过计算您已经拥有的 tbody 处的行数来检索跳过：

首先将 ActionLink 替换为：

<a href="#" id="mylink">Load More Students here!</a>

其次，创建这个函数来做get：

$('mylink').click(function (e) {
    e.preventDefault();
    //Gets the number of rows that you alredy have loaded
    var rowCount = $('studentTable').find('tbody > tr').length;
    //The URL for the get, with the number of rows
    var url = "http://www.myurl.com/controller/action?skip=" + rowCount;

    $.get(url, function (data) {
       //Append the content from the partial view to the tbody
       $('studentTable').find('tbody').append(data);
    });
});

我觉得这也是个好办法！

希望对您有所帮助！

【讨论】：