.Net MVC4 使用心得(四)分页、Partial View、删除、ajax返回
来源:互联网 发布:终极一班武器淘宝 编辑:程序博客网 时间:2024/05/12 06:11
分页成功后,下面是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的代码已经更新到上一篇文章里。
- .Net MVC4 使用心得(四)分页、Partial View、删除、ajax返回
- .Net MVC4 使用心得(三)实现分页控件
- .net core partial view的一些心得
- AspNet MVC4 教学-22:Asp.Net MVC4 Partial View 技术快速应用Demo
- .net MVC4 ajax分页技术实现
- asp.net Mvc4 使用ajax结合分页插件实现无刷新分页
- asp.net Mvc4 使用ajax结合分页插件实现无刷新分页
- .net MVC4使用心得(二) Filter、EditorFor、通用类
- .Net MVC4 使用心得(五)细节问题Url.Action和Html.ActionLink
- .Net MVC4 使用心得(六)WebApi Json和Xml,razor@{}
- .Net MVC4 使用心得(五)细节问题Url.Action和Html.ActionLink
- ASP.NET MVC4自定义分页
- .net mvc4 利用 PagedList分页
- asp.net 使用ajax分页
- .Net MVC4 被坑心得(七)WebApi种种
- .Net MVC4 被坑心得(七)filter 身份验证
- AspNet MVC4 教学-21:Asp.Net MVC4 使用Ajax技术获取服务器时间快速Demo
- .Net MVC4 使用心得(一)使用uploadify和wcf存储服务时的文件上传问题
- C++中使子函数返回多个值
- 编译libtiff和libgeotiff
- TCP/IP,http,socket,长连接,短连接——小结
- atomicity and volatile
- hive交互式模式 命令大全
- .Net MVC4 使用心得(四)分页、Partial View、删除、ajax返回
- linux 环境变量设置
- 数据挖掘技术--多维数据模型
- 一张图表 看懂保险
- hive经典的入门流程操作
- 一张图表 看懂保险
- 读书笔记: 线程安全性
- Strut2 的result-type参数详解
- iOS 手势