Javascript 下一页使用mvc中的ajax和jquery

如何在mvc中使用ajax和jquery创建下一页

我正在使用下面的代码

    @model DGM.Common.PageInput
@using System.Globalization
<link href="~/Content/themes/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>

<script>
    function NextPage() {
        //TODO
    }
</script>
<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">

    <div class="scroll-content" style="display: inline-table">

        @for (int i = 1; i < Model.CountPage + 1; i++)
        {
            string idParametr = Model.NameIdParametr;
            short valueIdParametr = Model.ValueIdParametr;

            var routeValueDictionary = new RouteValueDictionary
            {
                {idParametr, valueIdParametr},
                {"countryNo", Model.CountryNo},
                {"count", Model.CountRecordInPage},
                {"page", i}
            };
            if (Model.IsSearch)
            {
                routeValueDictionary.Add("search", Model.TextSearch);
            }


            @Ajax.ActionLink(i.ToString(CultureInfo.InvariantCulture), Model.ActionName, Model.Controller,
                routeValueDictionary,
                new AjaxOptions
                {
                    HttpMethod = "POST",
                    OnSuccess = "OnSuccess",
                    UpdateTargetId = "grid-list",
                    InsertionMode = InsertionMode.Replace

                }, new Dictionary<string, object>
                {
                    {"class", "scroll-content-item ui-widget-header"},
                    {"onclick", "clickfunc(this)"}
                })
        }

    </div>
    <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
        <div class="scroll-bar"></div>
    </div>

</div>
<div class="InfoPaging" style="margin: 0 auto; text-align: center;">
    <a id="LastPage"href="javascript:void(0);" style="color: blue; padding: 0 10px">Last Page</a>
    <a id="NextPage" onclick="NextPage()"  href="javascript:void(0);" style="color: blue; padding: 0 10px">Next Page</a>
    <a id="PreviousPage" href="javascript:void(0);" style="color: blue; padding: 0 10px">Previous Page</a>
    <a id="FirsPpage" href="javascript:void(0);" style="color: blue; padding: 0 10px">First Page</a>

</div>

我对这项工作没有想法。我不知道应该使用什么。是否应该使用jQuery？ 我对这项工作没有想法。我不知道应该使用什么。是否应该使用jQuery

更新：

我试过以下方法。但它总是显示第二页

@{
    idParametr = Model.NameIdParametr;
    valueIdParametr = Model.ValueIdParametr;

    routeValueDictionary = new RouteValueDictionary
    {
        {idParametr, valueIdParametr},
        {"countryNo", Model.CountryNo},
        {"count", Model.CountRecordInPage},
        {"page", ++Model.CurrentPage}
    };
    if (Model.IsSearch)
    {
        routeValueDictionary.Add("search", Model.TextSearch);
    }

}
    @Ajax.ActionLink("Next Page", Model.ActionName, Model.Controller,
        routeValueDictionary,
        new AjaxOptions
        {
            HttpMethod = "POST",
            OnSuccess = "OnSuccess",
            UpdateTargetId = "grid-list",
            InsertionMode = InsertionMode.Replace

        })

我发现：

更新局部视图：

function NextPage() {
        var dataToSend = @Html.Raw(Json.Encode(Model));
        dataToSend.CurrentPage = @Model.CurrentPage + 1;
        $.ajax({
            url: '@Url.Action("GetPageNumbers", "Class")',
            data: dataToSend,
            success: function(dataa) {
                $('#PagingList').html(dataa);
                $('#PagingListUp').html($('#PagingList').html());
            }
        });
    }

使用下一页的操作链接：

    @{
            idParametr = Model.NameIdParametr;
            valueIdParametr = Model.ValueIdParametr;

            routeValueDictionary = new RouteValueDictionary
            {
                {idParametr, valueIdParametr},
                {"countryNo", Model.CountryNo},
                {"count", Model.CountRecordInPage},
                {"page", Model.CurrentPage+1}
            };
            if (Model.IsSearch)
            {
                routeValueDictionary.Add("search", Model.TextSearch);
            }
        }



        @Ajax.ActionLink("Next Page", Model.ActionName, Model.Controller,
                    routeValueDictionary,
                    new AjaxOptions
                    {
                        HttpMethod = "POST",
                        OnSuccess = "OnSuccess",
                        UpdateTargetId = "grid-list",
                        InsertionMode = InsertionMode.Replace

                    }, new Dictionary<string, object>
                    {
                         {"onclick", "NextPage()"}


})

@{
idParametr=Model.NameIdParametr；
valueIdParametr=Model.valueIdParametr；
routeValueDictionary=新的routeValueDictionary
{
{idParametr，valueIdParametr}，
{“countryNo”，Model.countryNo}，
{“count”，Model.CountRecordInPage}，
{“页面”，Model.CurrentPage+1}
};
if（Model.IsSearch）
{
routeValueDictionary.Add（“search”，Model.TextSearch）；
}
}
@ActionLink（“下一页”，Model.ActionName，Model.Controller，
routeValueDictionary，
新选择
{
HttpMethod=“POST”，
OnSuccess=“OnSuccess”，
UpdateTargetId=“网格列表”，
InsertionMode=InsertionMode.Replace
}，新字典
{
{“onclick”，“NextPage（）”}
})

    @{
            idParametr = Model.NameIdParametr;
            valueIdParametr = Model.ValueIdParametr;

            routeValueDictionary = new RouteValueDictionary
            {
                {idParametr, valueIdParametr},
                {"countryNo", Model.CountryNo},
                {"count", Model.CountRecordInPage},
                {"page", Model.CurrentPage+1}
            };
            if (Model.IsSearch)
            {
                routeValueDictionary.Add("search", Model.TextSearch);
            }
        }



        @Ajax.ActionLink("Next Page", Model.ActionName, Model.Controller,
                    routeValueDictionary,
                    new AjaxOptions
                    {
                        HttpMethod = "POST",
                        OnSuccess = "OnSuccess",
                        UpdateTargetId = "grid-list",
                        InsertionMode = InsertionMode.Replace

                    }, new Dictionary<string, object>
                    {
                         {"onclick", "NextPage()"}


})