0

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>

ページ入力クラス:

  public class PageInput
    {
        public string ActionName { get; set; }
        public string Controller { get; set; }
        public int CountPage { get; set; }
        public int AllRecord { get; set; }
        public string NameIdParametr { get; set; }
        public short ValueIdParametr { get; set; }
        public decimal CountryNo { get; set; }
        public int CountRecordInPage { get; set; }
        public bool IsSearch { get; set; }
        public string TextSearch { get; set; }
        public int CurrentPage { get; set; }
    }

この作業のアイデアがありません。何を使用すればよいかわかりません。jQueryから使用する必要がありますか? この作業のアイデアがありません。何を使用すればよいかわかりません。jQueryから使用する必要がありますか?

アップデート :

私は次のことを試しました。ただし、常に2ページ目が表示されます

@{
    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

        })
4

1 に答える 1