mvc中实现异步刷新页面

最新推荐文章于 2023-06-27 16:26:45 发布

换个什么名字

最新推荐文章于 2023-06-27 16:26:45 发布

阅读量7.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hailang9027/article/details/48519997

本文展示了如何在MVC应用中利用Ajax技术实现页面的异步刷新。通过Controller层获取数据，视图层展示内容，并在JavaScript中定义函数ajaxList()进行分页请求，更新页面内容，实现无刷新的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Controller:层

var pubshList = BFactory.CreateBussiness<IThreadBussiness>().GetPublishList(MemberId, pageIndex, PageSize, out Counts);

if (Request.IsAjaxRequest())
{
return PartialView("PageList", pubshList); --直接返回数据视图层
}
else
{
ViewBag.Count = Counts;
return View(pubshList);

}

--分页内容层

@model List<Vip.Common.ViewModel.ThreadViewModel>
@foreach (var item in Model)
{
<div class="ys">
<div class="tiezi"><a href="#">@item.发表的帖子.Title</a></div>
<div class="bkname">@item.板块.Name</div><div class="hc"><span>@item.回复数量</span><br>1780</div><div class="ftime">@string.Format("{0:yyyy-MM-dd}", item.发表的帖子.OperateTime) </div>
</div>
}

PublishList视图层：

@using Webdiyer.WebControls.Mvc
@model List<Vip.Common.ViewModel.ThreadViewModel>
<div class="post_content">
<div class="post_content_box">
<div class="post_content_nav_box">
<ul class="post_content_nav">
<li><a class="post_content_hui" href="@Url.Action("PublishList", "Thread")">发表 |</a></li>
<li><a href="@Url.Action("ReplyList", "Thread")">回复</a></li>
<li><a href="@Url.Action("CollectionList", "Thread")">| 收藏</a></li>
</ul>
<div class="post_content_category">
<span class="post_mokuai">板块</span>
<span class="post_chakan">回复/查看</span>
<span class="post_time">发表时间</span>
</div>
</div>
<div id="List">
@foreach (var item in Model)
{
<div class="ys">
<div class="tiezi"><a href="#">@item.发表的帖子.Title</a></div>
<div class="bkname">@item.板块.Name</div><div class="hc"><span>@item.回复数量</span><br>1780</div><div class="ftime">@string.Format("{0:yyyy-MM-dd}", item.发表的帖子.OperateTime) </div>
</div>
}
</div>
<dl class="next">
<dt><a href="#">上一页</a></dt>
<dt class="next_number">
<a href="javascript:void(0)" onclick="ajaxList(1)">1</a>
<a href="javascript:void(0)" onclick="ajaxList(2)">2</a>
<a href="javascript:void(0)" style="border-right:none;" onclick="ajaxList(3)">3</a>
</dt>
<dt><a href="#">下一页</a></dt>
</dl>
</div>
</div>
<script type="text/javascript">
function ajaxList(pageIndex) {
$.ajax({
type: "POST",
async: false,
url: Controller地址url,
data: { pageIndex: pageIndex },
success: function (data) {
$("#List").html(data);
}
});
}
</script>