MVC 之AjaxHelper

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了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
@H_502_52@


@H_502_52@

@H_502_52@

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

@H_502_52@ 

 <add key="UnobtrusiveJavaScriptEnabled" value="true" />
@H_502_52@ 当设置为true时，将使用jQuery方式实现请求，生成的链接如下：

a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#test" href="http://www.cnblogs.com/">测试</a>
@H_502_52@ 反之则使用Microsoft Ajax类库实现

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

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

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

Ajax.ActionLink()：

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

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

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

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

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

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

参数
Confirm 获取或设置提交请求之前，显示在确认窗口中的消息。
HttpMethod 获取或设置 HTTP 请求方法（“Get”或“Post”）。
InsertionMode 获取或设置指定如何将响应插入目标 DOM 元素的模式。
LoadingElementId 获取或设置加载 Ajax 函数时要显示的 HTML 元素的id特性。
OnBegin 获取或设置更新页面之前，恰好调用的 JavaScript 函数的名称。
OnComplete 获取或设置实例化响应数据之后但更新页面之前，要调用的 JavaScript 函数。
OnFailure 获取或设置页面更新失败时，要调用的 JavaScript 函数。
OnSuccess 获取或设置成功更新页面之后，要调用的 JavaScript 函数。
UpdateTargetId 获取或设置要使用服务器响应来更新的 DOM 元素的 ID。
Url 获取或设置要向其发送请求的 URL。
@H_502_52@ 以之前的GuestBook为例，在列表页面（Index.cshtml），使用Ajax来显示选中行的详细信息：

@H_502_52@ 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>
div id="detailsID"div>
@H_502_52@ 我们将使用ActionLink分别异步请求ContentController，Json格式的Controller和PartialView格式的Controller来显示详细信息：

@H_502_52@ 1：Ajax异步请求ContentController

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

@Ajax.ActionLink("AjaxContentController",InsertionMode = InsertionMode.Replace })
@H_502_52@ 相应的Controller：

public string getEntry(int id = 0) { GuestbookEntry entry = _db.Entries.First(c => c.Id == id); return entry.Details; }
@H_502_52@ 结果：返回的内容直接更新到ID属性为detailsID的DIV中：

@H_502_52@ 2： 使用Json格式返回

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

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

 public ActionResult JsonDetails(int id = 0)
        {
            GuestbookEntry entry = _db.Entries.First(c => c.Id == id);
            return Json(entry,JsonRequestBehavior.AllowGet);
        }
@H_502_52@ 注意：在使用Json格式返回数据时，由于安全原因，只接收Post请求，因此在这里使用JsonRequestBehavior.AllowGet来允许Get方式请求。

@H_502_52@ 同时需要在Index.cshtml中添加请求成功的相应函数Show：

@H_502_52@ <script type="text/javascript">
function Show(data) {
$("#detailsID").html("姓名：" + data.Name + " 消息：" + data.Message);
}
</script>

@H_502_52@ 结果：在响应函数中更新ID属性为detailsID的DIV内容：

@H_502_52@ 3使用PartialView来返回数据

@H_502_52@ PartialView类似于WebForms中的用户自定义控件，可以用来显示一些公共的信息。在Index.cshtml中

@Ajax.ActionLink("AjaxPartialView",UpdateTargetId = "detailsID" })

public ActionResult Details(int id = 0)
        {
            GuestbookEntry entry = _db.Entries.First(c => c.Id == id);
            if (Request.IsAjaxRequest())
            {
                return PartialView(entry);
            }
            return View(entry);
        }
@H_502_52@ 在这里我们使用Request.IsAjaxRequest()来判断是否为Ajax请求，如果是则返回PartialView，否则返回View

Ajax.BeginForm

@H_502_52@ 打开Create.cshtml页面，现在的页面使用的是Html.BeginForm()进行表单提交的，下面我们将它修改为Ajax方式提交

@model MvcApplication5.Models.GuestbookEntry

@{
    ViewBag.Title = "Create";
}

h2>Create>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    fieldsetlegend>GuestbookEntry>

        class="editor-label">
            @Html.LabelFor(model => model.Name)
        ="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        >
            @Html.LabelFor(model => model.Message)
        >
            @Html.EditorFor(model => model.Message)
            @Html.ValidationMessageFor(model => model.Message)
        p>
            input ="submit"="Create" />
        >
}
@H_502_52@ 修改后的页面如下：

@model MvcApplication5.Models.GuestbookEntry
="text/javascript">
    function success(data) {
        alert(data);
    }
>
@{
    ViewBag.Title = "Create";
}

>

@using (Ajax.BeginForm(new AjaxOptions { 
    HttpMethod="Post",OnSuccess = "success"
}))
{
    @Html.ValidationSummary(true)

     而相应的Controller没有任何变化。
 

 
 
 
   
 
 
 
[HttpPost]
        public ActionResult Create(GuestbookEntry entry)
        {

            if (ModelState.IsValid)
            {
                entry.DateAdded = DateTime.Now;
                _db.Entries.Add(entry);
                _db.SaveChanges();
                return Content("New Entry successfully added.");
            }
            else {
                return View();
            }
        }
@H_502_52@ 附注：

在web.config中增加client side validation and unobtrusive javascript 两个配置
<add key="ClientValidationEnabled" value="true" />
="UnobtrusiveJavaScriptEnabled" ="true" />
客户端验证是基于jquery.validate.js和jquery.validate.unobtrusive.js的，当你在一个view中包含了这两个文件时，你在Model中声明的data annotation才会被解析。这时你打开你表单查看页面的源代码，可以看到相应的input fields都具有包含验证规则的HTML5的data-*属性，这些属性将被Microsoft unobtrusive validation script读取并配置jquery validate.
unobtrusive javascript 是基于jQuery的，在使用AjaxHelper时（ActionLink 或者BeginForm），他会自动向你的控件中添加data-属性（HTML5 属性），这些属性之后会被jquery.unobtrusive-ajax.js进行解析，所以要在页面中引入该文件。
例如：
@Ajax.ActionLink("UTC","GetTime",new { zone = "utc" },new AjaxOptions { UpdateTargetId = "myResults" })
生成的代码是：
="#myResults"="/Home/GetTime?zone=utc">UTC>
jquery.unobtrusive-ajax.js作用就是解析data-ajax-mode等属性，然后发出ajax请求的（可以看下这个文件的代码），乱码就是因为你没有引入该文件
如果不想使用jquery，改为false即可
<add key="UnobtrusiveJavaScriptEnabled" value="false" />
同时需要在页面中引入MicrosoftAjax.js，MicrosoftMvcAjax.js

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作