Обработчик кликов для пагинации Bootstrap 4 срабатывает только один раз

Question

Использование ASPNET MVC, начальная загрузка 4. Я пробовал Chrome и Firefox Я пытаюсь вручную отправить запрос ajax вместо использования кнопки отправки. При каждом щелчке по новой ссылке на пагинацию должен запускаться javascript, чтобы захватить нажатую страницу и отправить сообщение в контроллер. Однако этот обработчик кликов в JavaScript включается только один раз (точка останова в первой строке попадает только один раз), и только в этот первый раз он отправит сообщение на сервер. последующие клики не обрабатываются.

Код контроллера, который обрабатывает запрос .....

int itemsperpage = 12;
            int totalitems = items.Count();
            int totalimagescurrentpage = 0;
            if (formcollection["paging"] != null)
            {
                try
                {
                    paging = System.Convert.ToInt32(formcollection["paging"]);
                }
                catch (Exception e)
                {
                    loggerwrapper.PickAndExecuteLogging("cannot convert pagingvaluefromform to integer");

                }
            }

            if ((itemsperpage * paging) > totalitems)
            {
                totalimagescurrentpage = totalitems;
            }
            else
            {
                totalimagescurrentpage = itemsperpage;
            }
            int skip = (paging - 1) * itemsperpage;


            items = items.OrderBy(item => item.CreationDate).Skip(skip).Take(totalimagescurrentpage);

            //------------------------- 
            //items needed to render _PostCards
            ViewBag.itemsperpage = itemsperpage;
            ViewBag.totalitems = totalitems;
            ViewBag.paging = paging;
            //--------------------------

            ViewBag.detailsview = true;
            ViewBag.BrowsingUserId = (string)System.Web.HttpContext.Current.Session["UserId"];

            if (Request.IsAjaxRequest()) 
            {
                return PartialView("_PostCards", await items.ToListAsync());
            }
            else
                return View(await items.ToListAsync());

JavaScript, который срабатывает только один раз

$(document).ready(function () {
    $(".page-link").click(function (event) {
        var pageid = event.target.id;
        var lastChar = pageid.substr(pageid.length - 1);
        $("#paging").val(lastChar);
        $("#pagingform").trigger('submit');
    });
}); (jQuery);

HTML визуализируется представлением

.....
<div id="grid">
<div aria-label="Page navigation example">
<ul class="pagination justify-content-center">


        <li class="page-item active"><a id="page1" class="page-link" href="#">1</a></li>
        <li class="page-item "><a id="page2" class="page-link" href="#">2</a></li>
        <li class="page-item "><a id="page3" class="page-link" href="#">3</a></li>
                <li class="page-item"><a id="n2" class="page-link" href="#">Next</a></li>
</ul>
</div>
</div>
<form action="/Items/Canada/BC/cityindex/Victoria?posttypefilter=downtown"          data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#grid" id="pagingform" method="post">
<input type="submit" class="ajaxformsubmit">
    <input type="hidden" name="paging" id="paging" />
</form>

Answer 1

Похоже, что вы после асинхронного вызова получаете данные для обновления (новая страница), но не обновляетесь до верхней части страницы.

На первый взгляд, ошибка, с которой вы столкнулись, заключается в том, что вы не указали правильный идентификатор для свойства Ajax.BeginForm UpdateTargetId.

   @using (Ajax.BeginForm("yourMethod", "yourController",
                            new AjaxOptions
                            {
                                HttpMethod = "POST",
                                InsertionMode = InsertionMode.Replace,
                                UpdateTargetId = "element_to_replace",
                            }))

Тогда ваш HTML должен иметь соответствующий идентификатор.

<div id="element_to_replace">
your list/paging here
</div>

Надеюсь, это направит вас в нужном направлении.

Проверьте справку MSDN здесь