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

分页成功后，下面是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

@Html.DisplayNameFor(model => model.id)@Html.DisplayNameFor(model => model.names)@Html.DisplayNameFor(model => model.age)@Html.DisplayNameFor(model => model.sex)@Html.DisplayNameFor(model => model.videourl)@Html.DisplayNameFor(model => model.ip)@Html.DisplayNameFor(model => model.subtime)管理

@foreach (var item in Model)

{

@Html.DisplayFor(model => item.id)@Html.DisplayFor(model => item.names)@Html.DisplayFor(model => item.age)@Html.DisplayFor(model => item.sex) @Html.DisplayFor(model => item.videourl)@Html.DisplayFor(model => item.ip)@Html.DisplayFor(model => item.subtime)

@Ajax.ActionLink("删除","del",new { id = item.id },new AjaxOptions { OnSuccess = "delsuc",Confirm = "确定删除吗？",HttpMethod = "post"})

}

@Html.Pager(new PagerConfig { TotalRecord = ViewBag.Num,PageSize = ViewBag.PageSize,ShowGoTo = true })

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

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

@Html.Partial("_IndexDataList",Model)

同时在本页写一个回调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的代码已经更新到上一篇文章里。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。