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