zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    pdf 转图片,提取图片研究心得
    自己总结 C++ 代码规范
    Sublime Text 配置记录
    iOS控制器之基类设计
    SublimeText配置NodeJS代码提示
    YYCache设计思路及源码学习
    关于近期项目代码整理(iOS)
    iOS中iconfont(图标字体)的基本使用
    容器转场动画
    Xcode7 模拟器安装app (转)
  • 原文地址:https://www.cnblogs.com/chenwolong/p/ActionLink.html
Copyright © 2011-2022 走看看