MVC Ajax Helpers
在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的介绍的文章中有相关的列子:
注意点
- 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的更多相关文章
- MVC Ajax Helper或jQuery异步方式加载部分视图
Model: namespace MvcApplication1.Models { public class Team { public string Preletter { get; set; } ...
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helpers 创建Fluent Helpers 创建自动闭合的Helper ...
- (转)MVC语法-@helpers和@functions(Razor内定义函数)
(转)MVC语法-@helpers和@functions(Razor内定义函数) 转自:http://www.mikesdotnetting.com/Article/173/The-Differenc ...
- MVC Bootstrap Helpers
ASP.NET MVC Bootstrap Helpers 阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helper ...
- ASP.NET Core MVC – Tag Helpers 介绍
ASP.NET Core Tag Helpers系列目录,这是第一篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...
- MVC Ajax.BeginForm重复提交解决方法
mvc使用MVC Ajax.BeginForm提交的时候有重复提交结果的时候检查相关js文件引用情况, 其中mvc4注意 1 2 3 4 @Scripts.Render("~/bundles ...
- Asp.Net MVC ajax调用 .net 类库问题
如果你还在为 ajax 调用 .net 类库还束手无策的话,相信这篇博客将帮助你解决这个世纪问题! 因为Visual Studio 内置了asp.net mvc ,不过当你添加asp.net mvc项 ...
- ASP.NET MVC Ajax.ActionLink 简单用法
ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...
- 爱上MVC~ajax调用分部视图session超时页面跳转问题
回到目录 这个问题出现了很多年了,都没有解决,问题是这样的,有一个需要授权才可以访问的分部视图,在一个view中使用ajax的方法去调用它,然后更新页面的局部DIV,这时,如果你长时间不操作,sess ...
随机推荐
- xutil3 post 和 get请求
https://i.cnblogs.com/EditPosts.aspx?postid=7001253 compile 'org.xutils:xutils:3.3.36' 注册xutil3 < ...
- windos 查看指定端口,将指定进程杀死
>netstat -aon | findstr “80″ Proto Local Address Foreign Address State ...
- 前端迭代取出 后台map返回的数据
<body> <div th:each="map : ${response}"> <span th:text="${map.key}&quo ...
- mysqldump 导出统一限制每张数据表导出的记录数
mysqldump 导出统一限制每张数据表导出的记录数 在工作过程中,需要将生产的数据导出到本地开发环境,我希望可以导出部分数据.而服务器数据量比较大(上千万),如果选择直接从服务器导出数据, 正在运 ...
- [sql] 同库表(结构)的备份和sql聚合&navicat使用
同库表的备份-赋值表结构和数据SQL语句 参考 有时候我们处理某个表时,需要先备份下这个表到当前这个库,然后再执行sql. 站在sql角度,就无需在mysqldump或者诸如导出sql的方式来备份了. ...
- 【PGM】Representation--Knowledge Engineering,不同的模型表示,变量的类型,structure & parameters
Part 1. 重要的区别: Template based vs. specific Directed vs. undirected Generative vs. discrimina ...
- What do you think the coming adidas NMD Singapore
adidas NMD Singapore is surprising everybody with a lot of completely new NMD choices combined with ...
- 5.1 Components — Introduction
1. HTML被设计的时候,浏览器是一个简单的文件浏览器.开发构建大的Web应用程序需要更多的东西. 2. 不是试图取代HTML,然而,Ember.js拥抱它,然后增加了许多新功能使得构建web应用程 ...
- 特定于类的内存管理---《C++必知必会》 条款36
我们可以量身定制 operator new 和 operator delete 用于某个类类型,而不是必须使用标准版的 operator new 和 operator delete. 注意:我们不可以 ...
- VS2010/MFC编程入门之十三(对话框:属性页对话框及相关类的介绍)
前面讲了模态对话框和非模态对话框,本节开始鸡啄米讲一种特殊的对话框--属性页对话框.另外,本套教程所讲大部分对VC++各个版本均可适用或者稍作修改即可,但考虑到终究还是基于VS2010版本的,所以将& ...