.Net MVC4 使用心得（四）分页、Partial View、删除、ajax返回

最新推荐文章于 2024-10-11 15:46:53 发布

原创最新推荐文章于 2024-10-11 15:46:53 发布 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#.net #mvc #分页 #部分视图 #ajax删除

.Net历程专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何在MVC框架中利用PartialView技术，实现无页面刷新的AJAX数据刷新及分页功能，包括控制器方法、PartialView的创建与引用、以及AJAX请求的实现。

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

分页成功后，下面是ajax的页面操作。众所周知，webform中，对数据做了编辑或者删除操作后，只需调用相应控件的DataBind()方法，就可以在页面更新数据。只要将控件和触发器放在updatepanel里，便可以实现无页面刷新的ajax数据刷新，可谓easy到妈妈再也不用担心。可是到了mvc，似乎一切又回到了最原始的状态，需要手动的提交，通过接口获取刷新后的数据，然后通过js刷新部分页面…… 不胜其烦。

利用PartialView，似乎比json要好一些，因为不用精确定位每个数据应该放在哪个元素里，或者拼已经写过一遍的html，而且，初始生成View时，也可以用Html.Partial或者Html.RenderPartial载入PartialView。考虑到删除操作分页控件可能也需要更新，干脆将数据区域+分页控件完全放在PartialView里。 PartialView可以在新建View的时候勾选“创建为部分视图”生成。在VIew中使用时，可以用Html.Partial直接引用，也可以写个controller做些逻辑，然后返回PartialViewResult类型，在View上使用Html.Action或者Html.RenderAction引用。这里选择后者，从而可以直接用js访问action返回ParitialView

这样，我可以在调用delete的action时候，通过ajax返回json以告知是否成功，如果不成功，在回调js函数里弹出错误（alert），如果成功，则在回调js函数里调用ajax访问返回PartialView，并将此PartialView替换原来的PartialView区域。

看代码：

控制器添加

        public PartialViewResult IndexDataList()
        {
            int allCount = db.Users.Count();
            ViewBag.Num = allCount;
            ViewBag.PageSize = pageSize;
            int pageIndex, startIndex, endIndex;
            //获取开始和结束的记录序号，并返回当前页码
            PagerHelper.GetStartAndEndIndex(allCount, pageSize, out pageIndex, out startIndex, out endIndex);
            //调用存储过程返回指定序号范围的数据
            return PartialView("_IndexDataList", db.SelectUserList(startIndex, endIndex));
        }

添加PartialView

<table cellspacing="0" cellpadding="0" class="tbl_info">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.id)</th>
            <th>@Html.DisplayNameFor(model => model.names)</th>
            <th>@Html.DisplayNameFor(model => model.age)</th>
            <th>@Html.DisplayNameFor(model => model.sex)</th>
            <th>@Html.DisplayNameFor(model => model.videourl)</th>
            <th>@Html.DisplayNameFor(model => model.ip)</th>
            <th>@Html.DisplayNameFor(model => model.subtime)</th>
            <th>管理</th>
        </tr>
    </thead>
    <tbody class="tbl-data">

        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(model => item.id)</td>
                <td>@Html.DisplayFor(model => item.names)</td>
                <td>@Html.DisplayFor(model => item.age)</td>
                <td>@Html.DisplayFor(model => item.sex)</td>
                <td><a href="@Html.DisplayFor(model => item.videourl)">@Html.DisplayFor(model => item.videourl)</a></td>
                <td>@Html.DisplayFor(model => item.ip)</td>
                <td>@Html.DisplayFor(model => item.subtime)</td>
                <td>
                    @Ajax.ActionLink("删除", "del", new { id = item.id }, new AjaxOptions { OnSuccess = "delsuc", Confirm = "确定删除吗？", HttpMethod = "post" })
                </td>
            </tr>
        }

    </tbody>
</table>
<div class="pager">
    @Html.Pager(new PagerConfig { TotalRecord = ViewBag.Num, PageSize = ViewBag.PageSize, ShowGoTo = true })
</div>

关于pager控件，请查看我的前一篇文章。

然后将原来的列表页View相应部分替换成

    <div id="allinfo">
         @Html.Partial("_IndexDataList", Model)
    </div>

同时在本页写一个回调js函数：

        function delsuc(rsl) {
            if (rsl.success) {
                $.get('@Url.Action("IndexDataList")', { page: '@PagerHelper.GetRealPageIndex(ViewBag.Num,ViewBag.PageSize)' }, function (data) { $('#allinfo').html(data); })
            }
            else {
                alert('删除失败！');
            }
        }

这里开始遇到个问题，返回类型为JsonResult的Controller，默认不允许Get方式获取信息，会返回500，如果要获取，可以使用post、put、delete等方式，也可以将JsonResultBehavior设置为AllowGet。

OK，成功。同时，借着这个思路，可以更新一下Pager实现AjaxPager的Pager。

具体方法，仅仅是在pager设置里增加一个参数选择是否为ajax的pager，并且提供待更新的html元素id。action方式基本同上面讲的，返回partialview。相应Pager的代码已经更新到上一篇文章里。