Question

我是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参数，我想从Action传递给View。我如何依靠View已经加载了多少部分视图以及每个部分视图有多少学生？或者将此参数传递给操作是不好的做法，也许我应该在其他地方处理它（例如某些服务）？请以正确的方式建议。感谢。

P.S。请随意编辑标题，因为我无法提出合适的标题。

Answer 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，让它更清晰）。

Answer 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);
    });
});

我认为这也是一个好方法！

希望这能帮到你！

使用Skip（）和Take（）使用@ Ajax.ActionLink动态加载数据

2 个答案: