Bootstrap 4分页的单击处理程序仅触发一次
Bootstrap 4分页的单击处理程序仅触发一次
提问于 2018-09-12 03:01:49
使用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>回答 1
Stack Overflow用户
发布于 2018-09-12 03:27:50
看起来您正在进行一个异步调用，以获取要更新的数据(新页面)，而不是刷新回页面顶部。
乍一看，您遇到的错误是没有为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>希望这能为您指明所需的方向。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52282610
复制相关文章
相似问题