Ajax的ActionLink方法(适用于异步加载)

8.2.1  AJAX的ActionLink方法

在Razor视图中,AJAX辅助方法可以通过Ajax属性访问。和HTML辅助方法类似,Ajax属性上的大部分AJAX辅助方法都是扩展方法(除了AjaxHelper类型之外)。

Ajax属性的ActionLink方法可以创建一个具有异步行为的锚标签。假如要在打开的页面的底部为MVC Music Store添加一个"daily deal"链接,要求在用户单击链接时是在当前页面上显示打折扣的专辑的详细信息,而不是在一个新的页面中显示。

为了实现这一效果,需要在视图"Views/Home/Index.cshtml"中已有专辑列表的后面添加如下代码:

    <div id="dailydeal">
    @Ajax.ActionLink("Click here to see today‘s special!",
                       "DailyDeal",
                       new AjaxOptions{
                            UpdateTargetId="dailydeal",
                            InsertionModeInsertionMode=InsertionMode.Replace,
                            HttpMethod="GET"
                       })
    </div> 

ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称。类似于同名的HTML辅助方法,AJAX辅助方法ActionLink也提供了各种重载版本,用来传递控制器名称、路由值和HTML特性。

对于HTML辅助方法与AJAX辅助方法,显著不同的是AjaxOptions参数。该参数指定了发送请求和处理服务器返回的结果的方式。参数中还 包括用来处理错误、显示加载元素、显示确认对话框等的选项。在这个示例中,AjaxOption参数的选项指定了要使用来自服务器的响应元素来替换id值 为"dailydeal"的元素。为了得到服务器的响应,需要在控制器HomeController上添加一个DailyDeal操作:

public ActionResult DailyDeal()
{
   var album = GetDailyDeal();  

   return PartialView("_DailyDeal", album);
}  

private Album GetDailyDeal()
{
   return storeDB.Albums
      .OrderBy(a => a.Price)
      .First();
}

AJAX操作链接的目标操作的返回值是纯文本或HTML。在这个示例中,将通过渲染一个分部视图来返回HTML。下面的Razor代码就在项目的Views/Home文件夹下的_DailyDeal. cshtml文件中。

    @model MvcMusicStore.Models.Album  

    <p>
       <img alt="@Model.Title" src="@Model.AlbumArtUrl" />
    </p> 

    <div id="album-details">
       <p>
           <em>Artist:</em>
           @Model.Artist.Name
       </p>
       <p>
           <em>Price:</em>
           @String.Format("{0:F}", Model.Price)
       </p>
       <p class="button">
           @Html.ActionLink("Add to cart", "AddToCart",
           "ShoppingCart", new { id = Model.AlbumId }, "")
       </p>
    </div> 

当用户单击链接时,就会向控制器HomeController的DailyDeal操作发送一个异步请求。一旦操作从一个渲染的视图中返回了 HTML,后台的脚本就会利用返回的HTML替换DOM中已有的dailydeal元素。在用户单击链接之前,应用程序首页的底部如图8-2所示。

 
(点击查看大图)图  8-2

在用户单击并查看折扣专辑之后,页面并没有全部刷新,显示效果如图8-3所示。

 
(点击查看大图)图  8-3

如果想查看操作中的代码,可使用NuGet安装Wrox.ProMvc3.Ajax.Action Link包。该包中的代码依赖于MVC
Music Store中的数据访问类,所以最好尝试MVC Music
Store项目中的包。一旦安装上该包,就可以导航到/ActionLink查看新的首页了。

Ajax.ActionLink生成的内容能够获取服务器的响应,并可以直接将新内容移植到页面中。这是如何发生的呢?下一节将介绍异步操作链接的工作原理。

时间: 2024-10-14 10:43:57

Ajax的ActionLink方法(适用于异步加载)的相关文章

关于异步加载的 javascript 不出现在 chrome 开发者工具的 source 中的解决方法

首先,当你看到这篇文章时,我相信你已经是一个中级甚至是高级的前端开发了. 因为异步加载 javascript 这样的做法,在一些中小型项目几乎是看不到的. 而异步加载 javascript 归根到底,是为了性能优化,防止 JS 加载造成页面阻塞. 会注意到性能,说明你已经不再是一个停留在实现层面的前端开发了,而是一个有着更高追求的人. 在此,向所有有追求的人点赞~~~ 昨天为公司的项目做前端优化,其中一项就是做脚本异步加载. 但是奇怪的是,异步加载的 js 出现在 chrome 开发者工具的 n

好程序员web前端教程分享异步加载CSS的一些方法

好程序员web前端教程分享异步加载CSS的一些方法,在我们写页面的时候,我们做最主要的任务就是提高页面的性能和弹性加载速度,以不会延迟页面的呈现的形式来加载CSS.这是因为在默认情况下, - 浏览器会同步加载外部的CSS - 在下载和解析CSS时会影响所有页面呈现 这两种情况都会导致潜在的延迟. 当然,这也是在开始渲染页面之前,应该至少加载网站的CSS的一部分,并且为了立即将该初始CSS添加到浏览器,我们建议内联css.对于整体数量较少的网站,仅此一项就足够了,但如果CSS很大(例如,大于15到

Javascript 异步加载详解(转)

本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续

Javascript 异步加载详解

本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续

javascript异步加载详解(转)

本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续

[转载]Javascript 同步异步加载详解

http://handyxuefeng.blog.163.com/blog/static/4545217220131125022640/ 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yo

UI第十七讲.图片异步加载(包括第三方), KVO, KVC

一.异步下载图片二.UITableView中图片的异步下载 示例代码: 图片解析,并利用第三方方法对图片进行异步加载 #import "ViewController.h" #import "TableViewCell.h" #import "NetWorkHandle.h" #import "Model.h" #import "UIImageView+WebCache.h" @interface ViewC

浅谈Android中的异步加载之ListView中图片的缓存及优化三

     隔了很久没写博客,现在必须快速脉动回来.今天我还是接着上一个多线程中的异步加载系列中的最后一个使用异步加载实现ListView中的图片缓存及其优化.具体来说这次是一个综合Demo.但是个人觉得里面还算有点价值的就是里面的图片的缓存的实现.因为老实说它确实能在实际的项目中得到很好的应用.主要学习来源于慕课网中的异步加载学习,来自徐宜生大神的灵感.本次也就是对大神所讲知识的一个总结及一些个人的感受吧. 这次是一个综合的Demo,主要里面涉及到的知识主要有:网络编程.异步加载.JSON解析.

cocos2d-x lua中实现异步加载纹理

原文地址:  http://www.cnblogs.com/linchaolong/p/4033118.html 前言   问题:最近项目中需要做一个loading个界面,界面中间有一个角色人物走动的动画,在显示这个loading界面的时候加载资源,项目是用cocos2d-x lua实现的,界面做出来后发现在加载资源的时候界面会卡住. 原因: 因为使用的不是异步加载,而且cocos2d-x没有绑定异步加载资源的api到lua中,其实在lua中实现不了异步. 想通过在lua中启动一个线程去加载资源