天天看点

ASP.NET MVC之Unobtrusive Ajax(五)前言

这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQuery来进行表单Ajax请求也不例外,但是相对于Unobtrusive Ajax来进行表单请求则Unobtrusive Ajax代码量显得更加精简,所以基于这点本文来讲讲这个Unobtrusive Ajax。

我们首先一步一步深入来讲述我们本节的话题,我们在Models文件夹下建立如下一个类:

接下来我们建立一个Blog控制器并且初始化数据,如下:

我们现在的场景是显示博客中所有数据,然后通过下拉框中的类别来筛选对应的数据。我们来看看:

显示博客所有数据 GetBlogs 

根据类别筛选数据:

在视图中,我们给出如下代码:

(1)获取所有博客数据:

(2)生成下拉分类列表:

我们运行程序结果如下:

ASP.NET MVC之Unobtrusive Ajax(五)前言

一切都如正常的进行,但是这样做页面会重新加载页面。

那么问题来了,如果我们想根据下拉列表不重新加载页面又该如何呢?我们就利用本节要讲的Unobtrusive Ajax!

我们需要在Web.Config进行如下启动:

ASP.NET MVC之Unobtrusive Ajax(五)前言

接下来我们通过NuGet下载Unobtrusive Ajax,如下:

ASP.NET MVC之Unobtrusive Ajax(五)前言

然后在视图中引入如下脚本:

接下来我们对控制器方法进行相应的调整,结合我们之前学到的分部视图:

此时我们重点在视图中利用Unobtrusive Ajax。

利用AjaxOptions中的UpdateTargetId对应我们需要筛选的数据。接下来我们利用Ajax请求

接下来我们看看运行结果:

ASP.NET MVC之Unobtrusive Ajax(五)前言

接下来我们来看看AjaxOptions其他参数 :

上述 LoadingElementId  为加载数据时显示加载中, LoadingElementDuration  为显示加载中时间。我们看看其显示效果,通过将时间延长。

ASP.NET MVC之Unobtrusive Ajax(五)前言

显示加载中:

ASP.NET MVC之Unobtrusive Ajax(五)前言

如上我们是通过下拉框点击提交按钮进行获取数据。

那么问题来了,我们如何通过链接来获取数据呢?请往下看。

我们在视图中添加如下:

我们运行看看效果:

ASP.NET MVC之Unobtrusive Ajax(五)前言

我们点击C试试效果,如下:

ASP.NET MVC之Unobtrusive Ajax(五)前言

本节我们利用Unobtrusive Ajax来实现类似JQuery的Ajax提交,利用Unobtrusive Ajax也是一种还不错的方式,而且Unobtrusive Ajax中AjaxOptions还有其他参数有兴趣的童鞋可以去了解了解。本节利用这个去请求分部视图并填充,但是这种方式还不是最优的方案,我们完全可以利用JSON来返回数据,对吧,下节我们利用JsonResult来返回数据。晚安,世界。【说明:有关MVC系列代码已全部托管于Github,可以点击右上角(Fork me on Github)下载代码】。