在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="">
<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 Helpers的更多相关文章

  1. MVC Ajax Helper或jQuery异步方式加载部分视图

    Model: namespace MvcApplication1.Models { public class Team { public string Preletter { get; set; } ...

  2. ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers

    阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helpers 创建Fluent Helpers 创建自动闭合的Helper ...

  3. (转)MVC语法-@helpers和@functions(Razor内定义函数)

    (转)MVC语法-@helpers和@functions(Razor内定义函数) 转自:http://www.mikesdotnetting.com/Article/173/The-Differenc ...

  4. MVC Bootstrap Helpers

    ASP.NET MVC Bootstrap Helpers   阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helper ...

  5. ASP.NET Core MVC – Tag Helpers 介绍

    ASP.NET Core Tag Helpers系列目录,这是第一篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...

  6. MVC Ajax.BeginForm重复提交解决方法

    mvc使用MVC Ajax.BeginForm提交的时候有重复提交结果的时候检查相关js文件引用情况, 其中mvc4注意 1 2 3 4 @Scripts.Render("~/bundles ...

  7. Asp.Net MVC ajax调用 .net 类库问题

    如果你还在为 ajax 调用 .net 类库还束手无策的话,相信这篇博客将帮助你解决这个世纪问题! 因为Visual Studio 内置了asp.net mvc ,不过当你添加asp.net mvc项 ...

  8. ASP.NET MVC Ajax.ActionLink 简单用法

    ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...

  9. 爱上MVC~ajax调用分部视图session超时页面跳转问题

    回到目录 这个问题出现了很多年了,都没有解决,问题是这样的,有一个需要授权才可以访问的分部视图,在一个view中使用ajax的方法去调用它,然后更新页面的局部DIV,这时,如果你长时间不操作,sess ...

随机推荐

  1. 如何在多个LinearLayout中添加分隔线

      1.可以放置一个ImageView组件,然后将其设为分隔线的颜色或图形.分隔线View的定义代码如下:   2.在Android3.0及以上版本,LinearLayout支持直接显示分隔线. an ...

  2. centos LAMP第二部分apache配置 下载discuz!配置第一个虚拟主机 安装Discuz! 用户认证 配置域名跳转 配置apache的访问日志 配置静态文件缓存 配置防盗链 访问控制 apache rewrite 配置开机启动apache tcpdump 第二十节课

    centos    LAMP第二部分apache配置  下载discuz!配置第一个虚拟主机 安装Discuz! 用户认证 配置域名跳转  配置apache的访问日志  配置静态文件缓存  配置防盗链 ...

  3. 005-线程sleep、join、yield、wait、notify、notifyAll、run、start、synchronized

    一.线程sleep join yield wait 1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchroni ...

  4. [py]django的manytomany字段和后台搜索过滤功能

    我本来想搞下Django之select_related和prefetch_related的区别,看到这里有djangoapi的知识, 之前搞过django restfulapi,http://blog ...

  5. angry_birds_again_and_again(2014年山东省第五届ACM大学生程序设计竞赛A题)

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2877 题目描述 The problems ca ...

  6. hdu5012 圆环相交面积

    题中给了 两个同心圆, 一个大圆一个小圆,然后再给了一个大圆一个小圆也是同心圆,求这两个圆环相交的面积,用两个大圆面积减去两倍大小圆面积交加上两个小圆面积交,就ok了 这里算是坑明白了 使用acos的 ...

  7. 20155305乔磊2016-2017-2《Java程序设计》第九周学习总结

    20155305 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC入门 JDBC简介 1.JDBC是java联机数据库的标准规范,它定义了一组标准类与 ...

  8. 2017-2018-2 20165207 实验三《敏捷开发与XP实践》实验报告

    java 实验三 实验报告 实验内容 代码规范 不规范的代码可能妨碍阅读,在粘贴下来老师在云班课中设置的提交点一的代码之后,我首先使用了IDEA中Code选项卡的Reformat Code功能规范代码 ...

  9. Python面试题目之列表取值超出范围

    # 下面列表取值超出范围,会报错还是有返回值: L1 = [',]print(L1[10]) print(L1[10:]) 第一个打印会报错: 第二个打印会返回一个空列表

  10. P3327/bzoj3994 [SDOI2015]约数个数和(莫比乌斯反演)

    P3327 [SDOI2015]约数个数和 神犇题解(转) 无话可补 #include<iostream> #include<cstdio> #include<cstri ...