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 提供正确的ID。

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

那么你的 html 需要有相应的 id。

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

希望这可以为您指明所需的方向。

Check out some MSDN help here