Question

我的应用程序显示两个列表数据集：主表和主数据，以及在呈现的局部视图中包含相关记录的子表。

对于主表，我实现了一个简单的分页功能。我使用PageInfo类来存储实际页面，最大页面，所有页面的数量等信息。所有这些都返回到ViewModel中的View。我还使用隐藏控件和POST表单方法将更改的页面发送回Controller。首先，我将当前页面存储在隐藏控件中，然后使用jQuery更改页面（+ 1，-1，frist，l; ast）并将控件的更新值发送给Controller。我努力将页面信息发送到Controller，因此添加了一个隐藏的表单字段，并使用ModelBinder在Action中检索其值。

问题是我渲染部分View也是列表数据。我想在这个子表中应用独立的内页导航。但是，如果可能的话，我不知道如何使用第二种形式。看起来POST方法不是最佳选择。

如何将分离的页面信息发送到部分视图。然后如何控制用户是否点击了下一个，前一个按钮等的内部版本。如何将此信息发送到部分视图的控制器？

<小时/> EDIT。

在编辑中，我添加了

表示分页信息的类的副本
具有特定操作的控制器。
查看

这就是我做的方式。第一次请求Index()时，我为SortingPagingFilteringInfo设置了默认值（目前它只包含分页信息）。所有内容都放入ViewModel并发送到View。我使用Ajax将<div id="listOfRecordings"></div>中的html替换为部分视图生成的代码，并在页面中导航。可以看出，我还在这个小代码中使用了Form Control

@using (Html.BeginForm())
{
    @Html.Hidden("page", Model.SPFInfo.CurrentPage)
}

返回更新的页面信息。我在下面的JavaScript代码中替换了它的值。目前它只是一个页码。我发现很难应用这种技术将分页添加到局部视图中，该局部视图也显示了列表数据。它们通过外键与主表相关。这是一对多的关系。我尝试将另外Form与另一个Form Control添加到PartialView，但之后我必须有两个Forms。我不知道如何POST到两个不同的动作/控制器。我没有在一个视图中使用多种形式。也许有更好的方法来解决这个问题。

分页模型：

public class SortingPagingFilteringInfo
{
    public int CurrentPage { get; set; }
    public int MaxPage { get; set; }
    public int PageSize { get; set; }
    public int PageCount { get; set; }
}

public class StudentViewModelWithFeatures
{
    public IEnumerable<StudentViewModel> Students { get; set; }
    public SortingPagingFilteringInfo SPFInfo { get; set; }
}

控制器和GET以及POST Index()操作：

#region Index
[HttpGet]
public ActionResult Index()
{
    StudentViewModelWithFeatures ViewModel =
                    new StudentViewModelWithFeatures();
    ViewModel.SPFInfo = new SortingPagingFilteringInfo();
    using (MyDBContext dbContext = new MyDBContext())
    {
        ViewModel.Students = getViewModel(dbContext).OrderBy(x => x.patient);
        ViewModel.SPFInfo.CurrentPage = 1;
        ViewModel.SPFInfo.MaxPage =
                    Convert
                    .ToInt32(Math.Ceiling((double)getViewModel(dbContext)
                    .Count() / ViewModel.SPFInfo.PageSize));
        int skipRecords =
                    (ViewModel.SPFInfo.CurrentPage - 1) * ViewModel.SPFInfo.PageSize;
        ViewModel.Students = ViewModel.Students
                                .Skip(skipRecords)
                                .Take(ViewModel.SPFInfo.PageSize)
                                .ToList();
    }
    return View(ViewModel);
}

[HttpPost, ActionName("Index")]
public ActionResult IndexPost(int? page)
{
    StudentViewModelWithFeatures ViewModel = new StudentViewModelWithFeatures();
    ViewModel.SPFInfo = new SortingPagingFilteringInfo();
    using (MyDBContext dbContext = new MyDBContext())
    {
        ViewModel.Students = getViewModel(dbContext).OrderBy(x => x.patient);
        // paging
        ViewModel.SPFInfo.MaxPage =
                    Convert
                    .ToInt32(Math.Ceiling((double)getViewModel(dbContext)
                    .Count() / GlobalPageSize.Value));
        page = page ?? 1;
        page = page < 1 ? 1 : page;
        page = page > ViewModel.SPFInfo.MaxPage ? ViewModel.SPFInfo.MaxPage : page;
        ViewModel.SPFInfo.CurrentPage = page.Value;
        int skipRecords =
                    (ViewModel.SPFInfo.CurrentPage - 1) * ViewModel.SPFInfo.PageSize;
        ViewModel.Students = ViewModel.Students
                                .Skip(skipRecords)
                                .Take(ViewModel.SPFInfo.PageSize)
                                .ToList();
    }
    return View(ViewModel);
}
#endregion

使用JavaScript查看，div用于PartialView：

@model Program.ViewModels.StudentViewModelWithFeatures

@{
    ViewBag.Title = "Students";
}

@using (Html.BeginForm())
{
    @Html.Hidden("page", Model.SPFInfo.CurrentPage)
}

<div>

    <!-- ... -->

    <div class="navigation-block">
        <span class="navigation-link" data-id="first"><<<&#160;First&#160;</span>&#160;&#160;&#160;
        <span class="navigation-link" data-id="previous"><&#160;Previous</span>&#160;&#160;
        @Model.SPFInfo.CurrentPage / @Model.SPFInfo.MaxPage
        &#160;&#160;<span class="navigation-link" data-id="next">Next&#160;></span>&#160;&#160;&#160;
        <span class="navigation-link" data-id="last">Last&#160;>>></span>
    </div>
</div>

<div id="listOfRecordings"></div>  <!-- Partial view is placed here -->

<script>
    // for better readability I put this java code below!
</script>

视图中的JavaScript代码

$('.navigation-link').click(function (evt) {
    var id = $(this).data('id');
    var url = '@Url.Action("Index", "Students")';
    var MaxPage = "@Model.SPFInfo.MaxPage";
    var CurPage = "@Model.SPFInfo.CurrentPage";
    if (id == 'first') {
        $('#page').val(1);
    }
    if (id == 'last') {
        $('#page').val(parseInt(MaxPage));
    }
    if (id == 'next') {
        $('#page').val(parseInt(CurPage) + 1);
    }
    if (id == 'previous') {
        $('#page').val(parseInt(CurPage) - 1);
    }
    $('form').submit();
});

$('.show-list').click(function () {
    $('.show-list').click(function () {
        var id = $(this).data('id');
        url = '@Url.Action("List", "Recordings")';
        $('#listOfRecordings').html("Retrieveing data ...");
        $.get(url, { StudentID: id }, function (data) {
            $('#listOfRecordings').html(data);
        });
    });
});

主视图和部分视图中的MVC分页

0 个答案: