单击Bootstrap 4分页处理程序仅触发一次

Posted 2023-01-07

使用ASPNET MVC，bootstrap 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>

答案

您似乎正在进行异步调用以获取要更新的数据（新页面），但不会刷新回页面顶部。

乍看之下，您遇到的错误是您没有为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