在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中要实现Ajax的更多相关文章

  1. 在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图

    开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...

  2. ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

    前言:写这篇随笔的时候,在url上漏写了斜线,找了好久错误,整个人都很不好.#我是猪系列 背景:之前介绍过一篇如何构建 MVC&AJax&JSon示例,这一篇单独讲解如何在View和A ...

  3. Asp.net mvc中的Ajax处理

    在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...

  4. APS.NET MVC + EF (10)---使用AJAX

    在Web系统中,Ajax技术已经成为提高用户体验的必备技术.开发Ajax程序,涉及两方面的内容:一是客户端技术,二是服务器端技术. (1)客户端技术 核心工作是通过JavaScript向服务器发送数据 ...

  5. MVC中处理表单提交的方式(Ajax+Jquery)

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  6. CS0234: 命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Html、Ajax”(是否缺少程序集引用?)

    从SVN上down下来的程序,编译报了一大堆的错,发现是缺少引用,但是明明引用了,后来打开引用,发现system.web.mvc这个引用打着叹号,如图: 后来重新引用了本机的system.web.mv ...

  7. MVC中前台如何向后台传递数据------$.get(),$post(),$ajax(),$.getJSON()总结

    一.引言 MVC中view向controller传递数据的时候真心是一个挺让人头疼的一件事情.因为原理不是很懂只看一写Dome,按葫芦画瓢只能理解三分吧. 二.解读Jquery个Ajax函数 $.ge ...

  8. ASP.NET MVC中使用ASP.NET AJAX异步访问WebService

    使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...

  9. MVC中的Ajax(AjaxHelper)

    authour: chenboyi updatetime: 2015-04-30 20:47:49 friendly link:   目录 1,思维导图 2,ActionLink() 3,BeginF ...

随机推荐

  1. NSLog中的%@

    [NSLog中的%@] There is one additional substitution token available in Objective-C, %@, used to denote ...

  2. leveldb

    [LevelDB] LevelDB is a fast key-value storage library that provides an ordered mapping from string k ...

  3. 时隔3年,再次折腾BlackBerry 8830!

    2010年手头换得8830,之后就是好几番刷机.解SPC.倒腾各种软件..算软件注册码..那个时候记得最难弄的注册码就是crunchSMS.需要运行虚拟机来从内存地址读取注册码..不过黑莓真的很经得起 ...

  4. HDU 1242 Rescue (BFS(广度优先搜索))

    Rescue Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  5. HDU 5443 The Water Problem (水题,暴力)

    题意:给定 n 个数,然后有 q 个询问,问你每个区间的最大值. 析:数据很小,直接暴力即可,不会超时,也可以用RMQ算法. 代码如下: #include <cstdio> #includ ...

  6. CCD摄像机与CMOS摄像机区别

    CCD摄像机 什么是CCD摄像机? CCD是Charge Coupled Device(电荷耦合器件)的缩写,它是一种半导体成像器件,因而具有灵敏度高.抗强光.畸变小.体积小.寿命长.抗震动等优点. ...

  7. 基于MySQL协议的数据库中间层项目Atlas - 360团队

    一.简介 Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本的基础上,修改了 ...

  8. getName()、getCanonicalName()、getSimpleName()异同

    package classes; class Box { class Inner { } } public class TestGetName { public static void main(St ...

  9. 如何解除Windows XP的IIS连接数限制

    方法一: 开始 - 设置 - 控制面板 - 管理工具 - Internet 信息服务 - 默认网站 - 右键属性,把“网站”选项卡中“连接超时”下的复选框"保持HTTP连接"前的勾 ...

  10. MySQL alter

    1:删除列 ALTER TABLE [表名字] DROP [列名称] 2:增加列 ALTER TABLE [表名字] ADD [列名称] INT NOT NULL  COMMENT '注释说明' 3: ...