Javascript 页面导航MVC5

我有一个包含问题的页面，在generate中有一个foreach循环来存储每个问题。所以我不知道会提前产生多少问题。我想把问题的数量限制在20个左右，每20个问题你就可以进入下一页。如何将每页的问题数量限制为20个，并使用工具栏按钮组，按钮1、2、3、，。。。下一步按钮

您需要参考引导来完成此操作。例如：

这是假设您有一个名为“QuestionController”的控制器，在视图文件夹中有两个名为“Question”和“QuestionSpatial”的文件夹，在“Question”文件夹中有一个名为“QuestionView”的视图，在“QuestionSpatial”文件夹中有一个名为“_questionResults”的局部视图

这就是你的观点：

@using PageResource = ProjectName.Resources.Question
@model ProjectName.Models.Question

@{
    ViewBag.Title = PageResource.PageTitle; 
}

<div> 

@if(Model.Questions.Any())
{
    using (Ajax.BeginForm("QuestionView", "Question", new AjaxOptions
        {
            UpdateTargetId = "questionList",
            HttpMethod = "get",
            LoadingElementId = "loading",
            OnSuccess = "addPaginationStyle",
            OnFailure = "failurePaging"
        }))                
    {
        <div id="questionList">
            @{ Html.RenderPartial("QuestionsPartial/_questionResults", Model); }
        </div>
    }
}
else
{
    <br/>
    <p class="lead text-danger">@string.Format(PageResource.NoQuestionsFound)</p>
}
</div>

然后将其添加到App_Start文件夹内的“BundleConfig.cs”：

编辑：添加了一些我忘记的Javascript函数

将以下内容添加到“global.js”文件：

---

我在ASP.NET的一个网站上找到了答案。我需要安装一个名为Mvc pagedlist的额外软件包：install package pagedlist。Mvc您需要一个常量来定义我每页需要的问题数。并定义您在哪一页的位置

@using MvcPaging
@model ProjectName.Models.Question

@if (Model.TotalItemCount > 0)
{
<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Question</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Title</td>
                <td>@item.Description</td>   @* The actual question *@
            </tr>
        }
    </tbody>
</table>

  if (Model.HasNextPage || Model.HasPreviousPage)
  {
  <!-- Paging Bar -->
    <div>
        @Html.Raw(Ajax.Pager(
            new Options
                {
                    PageSize = Model.PageSize,
                    TotalItemCount = Model.TotalItemCount,
                    CurrentPage = Model.PageNumber,
                    ItemTexts = new ItemTexts { Next = "Next", Previous = "Previous", Page = "P" },
                    ItemIcon = new ItemIcon { First = "glyphicon glyphicon-backward", Previous = "glyphicon glyphicon-chevron-left", Next = "glyphicon glyphicon-chevron-right", Last = "glyphicon glyphicon-forward" },
                    Size = Size.normal,
                    Alignment = Alignment.centered,
                    IsShowControls = true,
                    IsShowFirstLast = true,
                },
            new AjaxOptions
                {
                    UpdateTargetId = "questionList",
                    OnSuccess = "addPaginationStyle",
                    OnFailure = "failurePaging"
                }, new { controller = "Question", action = "QuestionView", questionId = Model.QuestionId  }))

        <div class="well">
            Showing <span class="badge">@Model.ItemStart</span> to <span class="badge">@Model.ItemEnd</span>
            of <span class="badge">@Model.TotalItemCount</span> entries.
        </div>
    </div>
    }
}

    @Scripts.Render("~/bundles/bootstrap")

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  // other Bootstrap components you want, e.g.:
                  "~/Scripts/bootstrap-multiselect.js"));

$(document).ready(function () {
    // Ajax.Pager method doesn't place the bootstrap class on the correct element
    // Add pagination class to "ul" element and remove it from the "div" element
    ($('.pagination').length) {
        addPaginationStyle();
});

function failurePaging() {
    alert("Could not retrieve paged list.");
}

function addPaginationStyle() {
    $('.pagination ul:first').addClass('pagination');
    $('.pagination:first').removeClass();
}