mvc ajax helper,MVC 之AjaxHelper

MVC 之AjaxHelper

2020-05-26

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了MVC 之AjaxHelper，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

除了传统的Ajax方法之外，MVC提供了AjaxHelper类：

Helper method

Description

Ajax.ActionLink

Creates a hyperlink to a controller action that fires an Ajax request when clicked

Ajax.RouteLink

Similar to Ajax.ActionLink,but generates a link to a particular route instead of a named controller action

Ajax.BeginForm

Creates a form element that submits its data to a particular controller action using Ajax

Ajax.BeginRouteForm

Similar to Ajax.BeginForm,but creates a form that sub- mits its data to a particular route instead of a named control- ler action

Ajax.GlobalizationScript

Creates an HTML script element that references a script that contains culture information

Ajax.JavaScriptStringEncode

Encodes a string to make sure that it can safely be used inside JavaScript

使用AjaxHelper可以很方便的实现Ajax请求，Aps.net MVC提供了jQuery和Microsoft Ajax类库两种方式来实现，使用何种方式取决于我们Web.config配置：

当设置为@H_301_88@true时，将使用jQuery方式实现请求，生成的链接如下：

a data-ajax="true"data-ajax-method="GET"data-ajax-mode="replace"data-ajax-update="#test"href="http://www.cnblogs.com/">测试

反之则使用Microsoft Ajax类库实现

href="http://www.cnblogs.com/"οnclick="Sys.Mvc.AsyncHyperlink.handleClick(this,new Sys.UI.DomEvent(event),{ insertionMode: Sys.Mvc.InsertionMode.replace,httpMethod: 'GET',updateTargetId: 'test' });"在我们创建项目时，该值默认为@H_301_88@true。这种情况下吗，我们要在页面中引入相应的js类库：

@section scripts{scripttype="text/javascript"src=" @Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")">}

下面重点了解Ajax.ActionLink()和Ajax.BeginForm()这两个Helper.

Ajax.ActionLink()：

向客户端输入一个链接地址，当单击这个链接时可以异步调用Controller中的方法，Ajax.ActionLink()方法有许多重载，我们这里举例说明其中一个比较常用的重载：

public static string ActionLink(this AjaxHelper ajaxHelper,string linkText,string actionName,object routeValues,AjaxOptions ajaxOptions);

linkText：是显示在客户端的文本

actionName：是Action的名字，默认情况下我们会使用当前的Controller。

routeValues：将传入到Controller中方法的参数

ajaxOptions：配置Ajax的一些选项，看完下面的例子我们再详细讲解这个配置选项。

参数

获取或设置提交请求之前，显示在确认窗口中的消息。

获取或设置 HTTP 请求方法(“Get”或“Post”)。

获取或设置指定如何将响应插入目标 DOM 元素的模式。

获取或设置加载 Ajax 函数时要显示的 HTML 元素的id特性。

获取或设置更新页面之前，恰好调用的 JavaScript 函数的名称。

获取或设置实例化响应数据之后但更新页面之前，要调用的 JavaScript 函数。

获取或设置页面更新失败时，要调用的 JavaScript 函数。

获取或设置成功更新页面之后，要调用的 JavaScript 函数。

获取或设置要使用服务器响应来更新的 DOM 元素的 ID。

获取或设置要向其发送请求的 URL。

以之前的GuestBook为例，在列表页面(Index.cshtml)，使用Ajax来显示选中行的详细信息：

Index.cshtml页面源码：

@foreach (MvcApplication5.Models.GuestbookEntry item in ViewBag.Entries)

{tr>

td>@Html.DisplayFor(modelItem => item.Name)>@Html.DisplayFor(modelItem => item.Message)>@Html.DisplayFor(modelItem => item.DateAdded)>@Html.ActionLink("Edit","Edit",new { id=item.Id }) |

@Html.ActionLink("Details","Details",new { id=item.Id }) |

@Html.ActionLink("Delete","Delete",new { id=item.Id }) |

@Ajax.ActionLink("AjaxContentController","getEntry",new { id = item.Id },new AjaxOptions { HttpMethod = "Post",UpdateTargetId = "detailsID",InsertionMode = InsertionMode.Replace })

@Ajax.ActionLink("AjaxJsonController","JsonDetails",InsertionMode = InsertionMode.Replace,OnSuccess = "Show" })

@Ajax.ActionLink("AjaxPartialView",new AjaxOptions { HttpMethod = "Get",UpdateTargetId = "detailsID" })>

>}table>

divid="detailsID"div>

我们将使用ActionLink分别异步请求ContentController，Json格式的Controller和PartialView格式的Controller来显示详细信息：

1：Ajax异步请求ContentController

ContentController直接以字符串形式返回实例的内容，在Index.cshtml中使用ActionLink，如下：

@Ajax.ActionLink("AjaxContentController",InsertionMode = InsertionMode.Replace })

相应的Controller：

public string getEntry(int id = 0) {

GuestbookEntry entry= _db.Entries.First(c => c.Id ==id);returnentry.Details;

}

结果：返回的内容直接更新到ID属性为@H_301_88@detailsID的DIV中：

2： 使用Json格式返回

在Index.cshtml中使用ActionLink，如下：

@Ajax.ActionLink("AjaxJsonController",OnSuccess = "Show" })