Ajax.ActionLink()方法的使用
第一句话都会这么去写:程序猿就是苦逼,除了开发还要会写博文!哎,今天就和大家一起讨论下Ajax的辅助方法ActionLink的使用,如果有讲的不好的地方或错的地方,请大家务必扔板砖,要投准哦,砸死我算了!
1、引入JS文件:Ajax辅助方法依赖于非侵入式JavaScript,所谓非侵入式JavaScript是指:在HTML中不包含任何的JavaScript代码。如果要使用Ajax的辅助方法,就必须引用相关的JS文件。如下:
首先引入JQ:<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
其次引入和AJax相关的JS文件: <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
至于这些与Ajax相关的JS文件,在项目的Script文件夹中,自己找哈!
2、引入了这些JS文件以后,我们就可以在视图中调用Ajax.ActionLink()方法了,在此声明下哈,我这里用的视图是Razor视图,即:csHTML文件!
在Index视图中,我们可以通过Ajax的属性访问ActionLink方法,废话不多说,咱们直接看代码吧!嘻嘻~_~
@Ajax.ActionLink("Click Here", "Hello", "Home", new { name="天才卧龙"}, new AjaxOptions { UpdateTargetId = "myDiv2", HttpMethod = "GET", InsertionMode = InsertionMode.Replace }, new { Title = "点击我,实现异步!" })
<div id="myDiv2">
@* 用于异步加载返回结果*@
</div>
参数注解:Click Here 是指链接所要显示的文本。
Hello 对应构造方法中的 action 是指调用的操作的名称
Home 对应构造方法中的Controller 是指异步操作调用的控制器名称
new { name="天才卧龙"} 对应构造方法中的routeValues 是指传递的参数 参数名为:name 值为:天才卧龙
new AjaxOptions {.....} 对应构造方法中的AjaxOptions 在此详细介绍下参数AjaxOptions
对于HTML辅助方法与Ajax辅助方法,显著不同的就是AjaxOptions。该参数指定了发送请求的方式及处理服务器返回结果的方式。下面分别介绍各个属性的意义。
一、UpdateTargetId = "myDiv2" 是指用来接收服务器返回结果的容器ID
二、HttpMethod = "GET" 不必多说,大家都知道,以GET方式请求数据。
三、InsertionMode = InsertionMode.Replace 指定使用哪一种方式在指定的UpdateTargetId元素更新数据,可以有三种方式: "InsertAfter", "InsertBefore", or "Replace" 。默认为:Replace
new { Title = "点击我,实现异步!" } 是指:HtmlAttributes 不做解释
3、根据上述的解析,找到Home控制器,添加名为Hello的action,代码如下:
[HttpGet]
public string Hello(string name)
{
return "Hello:" + name;
}
最后运行程序,点击下:Click Here 就会在ID为myDiv2的容器中显示:Hello:天才卧龙
其实实现Ajax.ActionLink()方法很简单,通过上述的例子,我相信大家都明白怎样用Ajax.ActionLink()方法实现异步了。
最后将上述知识在做下总结(仅仅总结参数AjaxOptions对应属性用法,其他的和HTML辅助方法大同小异。自己学哈。)
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 |
Ajax.ActionLink()方法的使用的更多相关文章
- Ajax的ActionLink方法(适用于异步加载)
8.2.1 AJAX的ActionLink方法 在Razor视图中,AJAX辅助方法可以通过Ajax属性访问.和HTML辅助方法类似,Ajax属性上的大部分AJAX辅助方法都是扩展方法(除了Ajax ...
- Ajax.ActionLink参数详解
该语法会生成一个a标签,点击a标签会执行一个Ajax请求. 有12个方法重载,下面详解方法中的各项参数: 参数一:linkText string类型 说明:链接显示的文字内容 参数二:actionNa ...
- 【ASP.NET MVC 】让@Ajax.ActionLink获取的数据不进Cache
刚玩这个东西的时候,发现IE会进Cache,不管怎么删除,修改,后台删除了,前台还是一样,找了一下,HTML5只提供了 <meta http-equiv="pragma" c ...
- Ajax辅助方法
目前为止,我们已经考察了如何编写客户端JavaScript代码,以发送并接受服务器的数据.然而,在使用ASP.NET MVC时,还有另一种方法可用来执行Ajax调用,这就是Ajax辅助方法. Ajax ...
- Ajax.ActionLink 用法
Ajax.ActionLink 用法 Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称 ...
- MVC学习十二:Ajax.ActionLink用法
Ajax.ActionLink用法 <!--使用Ajax.BeginForm必须引用的js文件--> <script type="text/javascript" ...
- Ajax.ActionLink用法
必须要引用的JS库: <script type="text/javascript" src="@Url.StaticFile("/Assets/Conte ...
- [MVC]Ajax辅助方法
在开始使用Ajax辅助方法前,必须在页面中载入jQuery以及jquery.unobtrusive-ajax.js文件才能正常执行. 为了让网站载入适当的JS函数库,必须先让Layout页面载入适当的 ...
- @Ajax.ActionLink跳转页面的问题解决方案 MVC Ajax不支持问题
[JavaScriptResult]在客户端执行服务器返回的JavaScript代码当一个内置的Ajax辅助方法请求一个操作方法,该方法会返回一个在客户端执行立即的脚本. public ActionR ...
随机推荐
- twitter storm 源码走读之5 -- worker进程内部消息传递处理和数据结构分析
欢迎转载,转载请注明出处,徽沪一郎. 本文从外部消息在worker进程内部的转化,传递及处理过程入手,一步步分析在worker-data中的数据项存在的原因和意义.试图从代码实现的角度来回答,如果是从 ...
- HTTP 笔记与总结(3 )socket 编程:发送 GET 请求
使用 PHP + socket 模拟发送 HTTP GET 请求,过程是: ① 打开连接 ② 构造 GET 请求的数据:写入请求行.请求头信息.请求主体信息(GET 请求没有主体信息) ③ 发送 GE ...
- 纯PHP实现定时器任务(Timer)
纯PHP实现定时器任务(Timer) 定时器任务,在WEB应用比较常见,如何使用PHP实现定时器任务,大致有两种方案:1)使用Crontab命令,写一个shell脚本,在脚本中调用PHP文件,然后 ...
- 20145235 《Java程序设计》第5周学习总结
教材学习内容总结 8.1语法与继承架构 try和catch语法,如果被try{}的语句出现了catch()的问题就执行catch{}的语句. 错误的对象都继承于java.long.Throwable, ...
- Bootstrap页面布局7 - Bootstrap响应式布局的实用类
在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visib ...
- flink - 反压
http://wuchong.me/blog/2016/04/26/flink-internals-how-to-handle-backpressure/ https://ci.apache.org/ ...
- [daily][network] NAT原理(转)
写在转发之前: 一直以来,我一直有一个疑惑,SNAT的时候,如果两个内网主机恰巧使用了相同的源端口号该怎么办呢? 我自己猜测的方法是改掉一个端口号,把端口一起映射(当然还有另一个设想,就是把包同时广播 ...
- <from>;<input>;readonly:只读;disabled:不可用;checked:用来做选中;selected:用在下拉列表中,设置那一项被选中
表单元素: ①②③④⑤⑥⑦★ 一.<from> 1. 代表表单 2 . action:提交为哪个页面 method:① get :显示提交,由长度限制 ② post: 隐藏提交 二.文 ...
- SQL查询的几种方式
/* 左连接 left join 或者 left outer join */ /* 左连接 Table_A表数据全部显示,Table_B根据条件匹配Table_A 匹配上显示,否则显示NULL */ ...
- PowerDesigner生成SQL Server 2008脚本注释乱码的问题
[%OWNER%?[.O:[execute ][exec ]]sp_addextendedproperty [%R%?[N]]'MS_Description', N[%R%?[N]]%.q:COMME ...