Question

使用ASPNET MVC，引导程序4。我尝试使用Chrome和Firefox 我试图手动提交我的Ajax请求，而不使用提交按钮。每次单击新的分页链接时，都应触发javascript来捕获单击的页面，然后发布到控制器。但是，此javascript click处理程序仅参与一次（第一行的断点仅被命中一次），并且只有在第一次时才会发布到服务器。后续点击不会得到处理。

处理请求的控制器代码 .....

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

Bootstrap 4分页的Click处理程序仅触发一次

1 个答案: