javascript - 从索引视图中的部分视图重新渲染索引视图?
问题描述
索引视图带有分页的部分视图。如果单击按钮 btnRowsPerPage,_pagination 部分视图会调用主控制器中的 Index ActionResult。使用正确的变量调用控制器方法,但视图(索引)未更新。我想念什么?
<div>
@Html.Partial("_Pagination", new { offset = ViewBag.Offset, take = ViewBag.Take, count = ViewBag.Count } )
</div>
索引视图中局部视图的静态集成。
<ul class="pagination pagination-sm">
<li class="page-item @(ViewBag.Offset==0 ? "disabled" : "")">
@Html.ActionLink("<<", "Index", new { po = 0, sk = ViewBag.Take }, new { @class = "page-link" })
</li>
<li class="page-item @(ViewBag.PageCount==0 ? "disabled" : "")">
@Html.ActionLink("<", "Index", new { po = ViewBag.Offset == 0 ? 0 : ViewBag.Offset - 1, sk = ViewBag.Take }, new { @class = "page-link" })
</li>
@for(int i = 0; i < ViewBag.PageCount; i++) {
<li class="page-item @(ViewBag.Offset==i ? "active" : "")">
@Html.ActionLink((i + 1).ToString(), "Index", new { po = i, sk = ViewBag.Take }, new { @class = "page-link" })
</li>
}
<li class="page-item @(ViewBag.Offset==ViewBag.PageCount ? "disabled" : "")">
@Html.ActionLink(">", "Index", new { po = ViewBag.Offset == ViewBag.PageCount ? ViewBag.Offset : ViewBag.Offset + 1, sk = ViewBag.Take }, new { @class = "page-link" })
</li>
<li class="page-item @(ViewBag.Offset==ViewBag.PageCount ? "disabled" : "")">
@Html.ActionLink(">>", "Index", new { po = (int)(ViewBag.PageCount), sk = ViewBag.Take }, new { @class = "page-link" })
</li>
<li class="page-item">
<input class="col-sm-5" type="number" placeholder="@ViewBag.Take" id="RowsPerPageValue" />
</li>
<li class="page-item" id="RowsPerPageLi">
<button type="button" class="btn btn-primary" onclick="updateRowsPerPage()" id="btnRowsPerPage">Requery</button>
</li>
<script type="text/javascript">
var updateRowsPerPage = function () {
$.ajax({
url: '@Url.Action("Index", "TParts")',
data: {
po: @ViewBag.Offset,
sk: $('#RowsPerPageValue').val()
},
success: function (data) {
},
error: function () {
alert('Error');
}
});
}
使用 JavaScript 的局部视图
public ActionResult Index(int? po, int? sk)
{
int offset = po ?? 0;
int take = sk ?? 5;
if(offset < 0) offset = 0;
if(take < 1) take = 1;
ViewBag.Take = take;
int count = db.TParts.Count();
ViewBag.PageCount = (int)(count / take) + ((count % take) > 0 ? 1 : 0);
if(offset > ViewBag.PageCount) offset = ViewBag.PageCount;
ViewBag.Offset = offset;
var tParts = db.TParts.Include(t => t.PartType).OrderBy(o => o.Title).Skip(offset * take).Take(take);
return View(tParts.ToList());
}
主控制器的索引方法
解决方案
看起来您没有在 ajax 调用中处理来自服务器的响应。
<div id="page-details">
@Html.Partial("_Pagination", new { offset = ViewBag.Offset, take = ViewBag.Take, count = ViewBag.Count } )
</div>
然后在你的 JS 文件中
$.ajax({
url: '@Url.Action("Index", "TParts")',
data: {
po: @ViewBag.Offset,
sk: $('#RowsPerPageValue').val()
},
success: function (data) {
$('#page-details').html(data);
},
error: function () {
alert('Error');
}
});
}
推荐阅读
- c++ - 点云库不适用于 Visual Studio 2019
- python - python检查两个对象是否具有相同的内存地址
- amazon-web-services - 从 AWS Rekognition 中存储的视频中存储检测到的人脸
- python - 在 Python 中使用 Peewee 创建 AVG 查询
- python - 虽然不是错误 - 如何做出替代
- excel - 从 10 个文本框中输入数据,但不要将空文本框值提交到单元格中(使用 excel vba 用户表单)
- php - MySql或php中varchar长度超过150时如何做断线
- python - 如何在列表中找到某些元素列表中最常见的位置?
- java - 在加载数据之前指定要添加到数据库的日期
- javascript - 在 GULP 系列的上一个任务中复制后找不到文件