mvc中实现异步刷新页面

本文展示了如何在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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值