mvc ajax定时刷新数据库,通过Ajax.ActionLink()在ASP.NET MVC5中实现无刷新加载操作方法...

第1节. Ajax辅助方法

#NET编程#在ASP.NET MVC 5中除了支持HTML辅助方法之外，还支持另外一套与Ajax相关的辅助方法，称为Ajax辅助方法。这些Ajax辅助方法是异步进行的。

ASP.NET MVC 5 ActionLink()方法

要想使用Ajax辅助方法，需要引入文件：jquery.unobtrusive-ajax.js，此文件是支持ajax的基础，微软的MVC 5 Ajax辅助方法是借助于jquery实现的。

在创建MVC 5 Web应用程序之后，项目的根目录下会存在script的文件夹，其中就存在与jquery相关的js文件，如果需要的js文件不存在，可以通过NuGet添加。

jquery.unobtrusive-ajax.js文件如果不存在项目中，可以使用如下方法添加，右击Web项目，弹出右键菜单。

在菜单中找到“管理NuGet程序包”，以可视化的方式添加需要的组件，微软现在也是推荐大家通过NuGet添加组件，支持添加和删除，实现可插拔的方式使用第三方或自己开发的组件。

NuGet包管理器

输入需要安装组件的关键字，就可以在NuGet中查找出结果，然后使用NuGet程序包即可安装需要的功能包。

功能包安装完成之后，就可以将程序集或文件添加到需要的程序中。

一、 Ajax的ActionLink方法

对于Ajax的ActionLink()方法是一个非常重要的方法，使用该方法完全可以实现异步加载数据，也就是无刷新的数据，并且可以直接将控制器中的数据返回给视图。

@Ajax.ActionLink()方法的基本语法如下：

@Ajax.ActionLink("异步加载", "SyncLoad", new AjaxOptions{UpdateTargetId = "div1",InsertionMode = InsertionMode.Replace,HttpMethod = "GET"});

此代码要全部掌握牢，非常之重要，说明如下：

(1). 首先最外层的div1表示通过Ajax.ActionLink()方法将服务器端的数据异步加载到id=“div1”的div标记中。

(2). Ajax.ActionLink()方法的第一个参数表示超链接的文本信息。

(3). Ajax.ActionLink()方法的第二个参数用于指定加载数据的控制器中的操作方法名称，当然也可以在重载中指定控制器，不指定控制器，默认是当前视图所在方法的控制器。

(4). Ajax.ActionLink()方法的第三个参数是new AjaxOptions()对象，其中的参数说明如下：

A. UpdateTargetId属性表示返回的数据要更新哪那个HTML标记中，使用标记的ID指定。

B. InsertionMode属性表示从服务器返回的数据以什么样的方式添加到HTML元素中，InsertionMode.Replace表示替换。

ActionLink()方法的参数

C. HttpMethod属性表示设置的HTTP请求方式。

在控制器中编写一个简单的方法，并使用Ajax.ActionLink()方法调用，该方法是被异步加载的。

这里的SyncLoad()方法只是返加一个简单的字符串。上面的Ajax.ActionLink()方法中调用的就是SyncLoad()方法，现在运行一下结果：

运行后的页面上出现了一个超链接，该超链接点击后不会跳转页面，也不会刷新页面，是一个无刷新的页面。点击一下此链接，看一下运行结果。

当点击过链接之后，页面并没有刷新，而是通过异步的方式加载服务器的数据，将SyncLoad()方法返回的结果显示在页面上了。

二、 HTML 5特性

在具有@Ajax.ActionLink()方法的页面调用后，查看一下网页源代码，我们看看最终被翻译成了什么Html代码？

微软使用了HTML5特性完整的实现了异步加载。并且是非侵入式的，没有任何的JS代码。

三、 Ajax表单

在ASP.NET MVC 5中，可以使用异步表单功能实现表单数据的无刷新提交，也就是Ajax表单。

@{Layout = null;}

@*异步提交数据*@@using (Ajax.BeginForm("Add", new AjaxOptions(){InsertionMode = InsertionMode.Replace,HttpMethod = "POST",OnFailure = "searchFaild",OnSuccess = "searchSuccess",LoadingElementId = "ajax-loader"})){@Html.TextBox("q") }

这是一段完整的视图代码，并且将@Ajax.ActionLink()方法的参数都用上，我们来测试一下会发生什么样的效果。

从运行的结果上看，我们还添加了动画效果，由于页面没有刷新，所以我们可以放一个gif的图片，让加载具有动态性，给用户一种友好的体验。

第2节. 返回JSON

对于ASP.NET MVC 5控制器中的操作方法，也是可以直接给视图返回JSON字符串的，这样在其它页面就可以使用Jquery的$.ajax()方法获取JSON数据，这里的操作方法返回的JSON字符串相当于一般处理程序ASHX返回JSON字符串来使用。

/// /// 返回JSON数据/// /// [HttpGet]public JsonResult GetJSON(){InfoDev.DBHelper db = new InfoDev.DBHelper();System.Data.DataTable dt = db.GetDataTable("select * from StudentInfo");return Json(JsonConvert.SerializeObject(dt), JsonRequestBehavior.AllowGet);}

在控制器中，编写的返回JSON字符串的方法与其它方法是有区别的。区别如下：

(1). 返回类型是JsonResult。

(2). 将数据库返回的数据使用SerializeObject()序列化，且还要指定允许HTTP Get提交。

当在视图中使用@Ajax.ActionLink()方法调用GetJSON()方法后，返回的JSON字符串是由数组组成的原始字符串，不容易理解，需要进一步的处理获取有用的数据。

在其它的任何平台上可以使用$.ajax()方法获取JSON数据，然后再进一步处理。如下是通过$.ajax()在html页面上调用的代码：

此段代码是使用了jQuery的ajax技术获取GetJSON()方法中返回的JSON字符串，得到结果后，可以进一步的处理，将需要的数据遍历出来，并显示在页面上或再提交给其它服务器处理。

举报/反馈