这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQuery来进行表单Ajax请求也不例外,但是相对于Unobtrusive Ajax来进行表单请求则Unobtrusive Ajax代码量显得更加精简,所以基于这点本文来讲讲这个Unobtrusive Ajax。
我们首先一步一步深入来讲述我们本节的话题,我们在Models文件夹下建立如下一个类:
接下来我们建立一个Blog控制器并且初始化数据,如下:
我们现在的场景是显示博客中所有数据,然后通过下拉框中的类别来筛选对应的数据。我们来看看:
显示博客所有数据 GetBlogs
根据类别筛选数据:
在视图中,我们给出如下代码:
(1)获取所有博客数据:
(2)生成下拉分类列表:
我们运行程序结果如下:
一切都如正常的进行,但是这样做页面会重新加载页面。
那么问题来了,如果我们想根据下拉列表不重新加载页面又该如何呢?我们就利用本节要讲的Unobtrusive Ajax!
我们需要在Web.Config进行如下启动:
接下来我们通过NuGet下载Unobtrusive Ajax,如下:
然后在视图中引入如下脚本:
接下来我们对控制器方法进行相应的调整,结合我们之前学到的分部视图:
此时我们重点在视图中利用Unobtrusive Ajax。
利用AjaxOptions中的UpdateTargetId对应我们需要筛选的数据。接下来我们利用Ajax请求
接下来我们看看运行结果:
接下来我们来看看AjaxOptions其他参数 :
上述 LoadingElementId 为加载数据时显示加载中, LoadingElementDuration 为显示加载中时间。我们看看其显示效果,通过将时间延长。
显示加载中:
如上我们是通过下拉框点击提交按钮进行获取数据。
那么问题来了,我们如何通过链接来获取数据呢?请往下看。
我们在视图中添加如下:
我们运行看看效果:
我们点击C试试效果,如下:
本节我们利用Unobtrusive Ajax来实现类似JQuery的Ajax提交,利用Unobtrusive Ajax也是一种还不错的方式,而且Unobtrusive Ajax中AjaxOptions还有其他参数有兴趣的童鞋可以去了解了解。本节利用这个去请求分部视图并填充,但是这种方式还不是最优的方案,我们完全可以利用JSON来返回数据,对吧,下节我们利用JsonResult来返回数据。晚安,世界。【说明:有关MVC系列代码已全部托管于Github,可以点击右上角(Fork me on Github)下载代码】。