发布：2014/11/6 23:33:18作者：管理员来源：本站浏览次数：1466

在MVC中要实现Ajax有很多的方式，有微软自己的MicrosoftAjax，也可以用JQuery的AJax来实现，如果对其他的JavaScript框架熟悉，还可以采用其他的实现方案，比如说Prototype等等。

以下是微软自己的实现方案。

需要预先加载的JavaScript文件：

    <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>

在MVC中已经提供了下面几个现成的HTML Hepler：

Ajax.ActionLink()
Ajax.BeginForm()
Ajax.RouteLink()
Ajax.BeginRouteForm()

Ajax.ActionLink

使用ActionLink发送异步请求的方法：

View

<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div> @Ajax.ActionLink("Click Me", "GetTime", new AjaxOptions { UpdateTargetId = "myPnl" })

Controller

public ActionResult GetTime()
{ return Content(DateTime.Now.ToString());
}

以上示例使用ActionLink超链接发送请求到GetTime，返回一个ContentResult，通过AjaxOptions中的UpdateTargetId属性指定了需要更新的页面元素。

AjaxOptions中还有其他可以指定的属性：

Confirm	等效于javascript中的return confirm(msg)，在点击该链接时先提示需要确认的信息。
HttpMethod	指定使用Get或者是Post方式发送Http请求
InsertMode	指定使用哪一种方式在指定的UpdateTargetId元素更新数据，可以有三种方式： "InsertAfter", "InsertBefore", or "Replace" 。默认为：Replace
LoadingElementDuration	Loading元素显示的时间
LoadingElementId	可以指定在Http请求期间显示的Loading元素
OnBegin	在Http请求之前执行的javascript方法
OnComplete	在Http请求结束时执行的方法
OnFailure	在Http请求失败时执行的方法
OnSuccess	在Http请求成功时执行的方法
UpdateTargetId	Http请求更新的页面元素
Url	Http请求的Url

关于AjaxOptions中各方法的使用方法，在之前关于ActionResult的介绍的文章中有相关的列子：

JsonResult

注意点

OnComplete和OnSuccess的区别：OnComplete是获取了Http请求时引发的，此时页面还没有进行更新，OnSuccess是在页面已经更新后引发的。
ActionLink中的actionName和AjaxOption中的Url的关系：两者分别产生的HTML如下，但是执行的结果相同，希望有高手能解释下这两者有无区别。

<a href="/Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a>
<a href="/" data-ajax-url="Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a>

Ajax.BeginForm

该Html Hepler可以实现使用Ajax方式提交Form，在指定的页面元素中显示提交的结果。

View

@model MvcAjax.Models.UserModel @{  ViewBag.Title = "AjaxForm"; } <div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div> @using (Ajax.BeginForm("SaveUser", new AjaxOptions { UpdateTargetId = "myPnl" }))
{ <table>
        <tr>
            <td> @Html.LabelFor(m => m.UserName) </td>
            <td> @Html.TextBoxFor(m => m.UserName) </td>
        </tr>
        <tr>
            <td> @Html.LabelFor(m => m.Email) </td>
            <td> @Html.TextBoxFor(m => m.Email) </td>
        </tr>
        <tr>
            <td> @Html.LabelFor(m => m.Desc) </td>
            <td> @Html.TextBoxFor(m => m.Desc) </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Submit" />
            </td>
        </tr>
    </table> }

Model

using System.ComponentModel.DataAnnotations; namespace MvcAjax.Models
{ public class UserModel {
        [Display(Name = "Username")] public string UserName { get; set; }

        [Display(Name = "Email")] public string Email { get; set; }

        [Display(Name = "Description")] public string Desc { get; set; }
    }
}

Controller

public ActionResult AjaxForm()
{ return View();
}

[HttpPost] public ActionResult SaveUser(UserModel userModel)
{ //Save User Code Here
    //...... return Content("Save Complete!");
}

以上示例代码实现了采用Ajax提交Form数据的大概方法，在Ajax.BeginForm中同样使用AjaxOptions来设置Ajax请求的参数，和Ajax.ActionLink中的使用方法相同。

其他：

在介绍JavaScriptResult时曾经提到了该ActionResult在普通的请求中是直接当作文件Reponse出的，但是在Ajax请求中，便可以使用该Result，并且执行Result中的JavaScript。

比如将上面的Conntroller更改为以下代码：

[HttpPost] public ActionResult SaveUser(UserModel userModel)
{ //Save User Code Here
    //......

    //return Content("Save Complete!"); return JavaScript("alert('Save Complete!');");
}

便可在执行改Ajax请求之后执行JavaScriptResult中的语句。

　MVC 使用Jquery实现AJax

MVC ActionResult -- JavaScriptResult，JsonResult　

asp.net mvc和.net core动态路由cms经常用到 jquery.ajax()操作默认为异步调用 .net core mvc 响应结果类型 Ok(),BadRequest(),NotFound() jquery ajax跨域访问实例jsonp asp.net core mvc权限控制：在视图中控制操作权限 asp.net core mvc权限控制：权限控制介绍 asp.net core mvc权限控制：分配权限 asp.net core mvc实现伪静态页面功能 asp.net mvc与asp.net core Ajax删除操作delete中带ValidateAntiForgeryToken实例 asp.net mvc ef更新部分数据或列

柏港建站平台

柏港 MVC

MVC Ajax Helpers

Ajax.ActionLink

Ajax.BeginForm

柏港为您推荐了一些相关资讯