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 ...
随机推荐
- 如何在多个LinearLayout中添加分隔线
1.可以放置一个ImageView组件,然后将其设为分隔线的颜色或图形.分隔线View的定义代码如下: 2.在Android3.0及以上版本,LinearLayout支持直接显示分隔线. an ...
- centos LAMP第二部分apache配置 下载discuz!配置第一个虚拟主机 安装Discuz! 用户认证 配置域名跳转 配置apache的访问日志 配置静态文件缓存 配置防盗链 访问控制 apache rewrite 配置开机启动apache tcpdump 第二十节课
centos LAMP第二部分apache配置 下载discuz!配置第一个虚拟主机 安装Discuz! 用户认证 配置域名跳转 配置apache的访问日志 配置静态文件缓存 配置防盗链 ...
- 005-线程sleep、join、yield、wait、notify、notifyAll、run、start、synchronized
一.线程sleep join yield wait 1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchroni ...
- [py]django的manytomany字段和后台搜索过滤功能
我本来想搞下Django之select_related和prefetch_related的区别,看到这里有djangoapi的知识, 之前搞过django restfulapi,http://blog ...
- angry_birds_again_and_again(2014年山东省第五届ACM大学生程序设计竞赛A题)
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2877 题目描述 The problems ca ...
- hdu5012 圆环相交面积
题中给了 两个同心圆, 一个大圆一个小圆,然后再给了一个大圆一个小圆也是同心圆,求这两个圆环相交的面积,用两个大圆面积减去两倍大小圆面积交加上两个小圆面积交,就ok了 这里算是坑明白了 使用acos的 ...
- 20155305乔磊2016-2017-2《Java程序设计》第九周学习总结
20155305 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC入门 JDBC简介 1.JDBC是java联机数据库的标准规范,它定义了一组标准类与 ...
- 2017-2018-2 20165207 实验三《敏捷开发与XP实践》实验报告
java 实验三 实验报告 实验内容 代码规范 不规范的代码可能妨碍阅读,在粘贴下来老师在云班课中设置的提交点一的代码之后,我首先使用了IDEA中Code选项卡的Reformat Code功能规范代码 ...
- Python面试题目之列表取值超出范围
# 下面列表取值超出范围,会报错还是有返回值: L1 = [',]print(L1[10]) print(L1[10:]) 第一个打印会报错: 第二个打印会返回一个空列表
- P3327/bzoj3994 [SDOI2015]约数个数和(莫比乌斯反演)
P3327 [SDOI2015]约数个数和 神犇题解(转) 无话可补 #include<iostream> #include<cstdio> #include<cstri ...