Ajax辅助方法

利用ajax技术可以帮助网站减少切换页面的机会,加快网速响应速度,降低网络下载流量,也能让用户经验更好。aspnet mvc中内建了ajax的辅助方法,可以方便快速的做到许多ajax互动效果。

在使用ajax之前,要在页面先载入jq以及mvc4.0专案模板内附的jquery.unobtrusive-ajax.js文件才能正常执行,

为了让网站载入适当的js函数库,必须现在Layout页面载入适当的js文件,事实上在mvc4..0的网际网路专案模板中已经在_Layout.cshtml页面上加入了jq载入,可以开启主版页面的最下方看到

@Scripts.Render("~/bundles/jquery")

@RenderSection("scripts",required:false)

第一句的意思就是载入专案里的jquery-1.7.1.js文件,因为ajax功能并不是每一页都需要使用,所以预设并没有载入,可以通过主版页面预留的@RenderSection区域来载入jquery.unobtrusive-ajax.js文件

如果需要在页面中使用ajax辅助方法

那么在这个页面最上方加上以下这段@section语法

@section scripts{

}

使用ajax超链接功能

ajax辅助方法会比html辅助方法多出一个AjaxOptions类型的参数,用来控制Ajax执行时的各种参数,

public ActionResult GetTime(){

return Content(Datetime.Now.ToString(F""))

}

@Html.ActionLink("取得目前时间",“GetTime”)

输出

<标签a href="/Home/GetTime">取得目前时间</标签a>

当这个超链接被点击后,会链接到另一个/Home/GetTime页面,如果希望改用ajax的方式动态地将/Home/GetTime网页的执行结果回传到目前网页的其中一个div里,那么可以这样改写

@Ajax.ActionLink("取得目前时间",“GetTime”,new AjaxOptions{UpdateTargetId = "now"})

<标签div id="now"></标签div>

输出

<标签a data-ajx="true" data-ajax-mode="replace" data-ajax-update="#now" href="/Home/GetTime"> 取得目前时间</标签a>

<标签div id="now"></标签div>

开启网页之后,点击这个超链接,浏览器便会自动取得/Home/GetTime网页的完整内容,并填入now的div块中。

注意:

通过ajax远端取得网页内容的过程中,浏览器会为了让执行效率提升,会预设通过ajax取得的网页内容只要ajax调用网址没有改变,且远端的http没有包含缓存相关标头,那么浏览器不会再次发出ajax要求,以刚刚的为例。,当第一次点击取得时会回传当下的服务器时间,当第二次点选同一个网址,案例应该看到更新的时间才对,但是结果却永远没法更新,除非清空浏览器缓存,

如果需要ajax回传的数据必须及时更新,那么就必须调整你的Action方法定义,新增一个OutputCache属性,强迫浏览器不要缓存这一页的要求

[OutputCache(NoStore=true,Duration=0)]

public ActionResult GetTime(){

return Content(Datetime.Now.ToString(F""))

}

使用ajax表单功能

比如原本是

@using(Html.BeginForm()){

若要改成ajax

@using(Ajax.BeginForm(new AjaxOptions{ UpdateTargetId="now"}))

@Ajax.ActionLink执行流程

1,用户单点击超链接

2,对超链接上的href属性定义的Action网址发出HTTP要求

3,取回内容后再将内容填入AjaxOptions物件的UpdateTargetId属性所指定的id元素中

@Ajax.BeginForm执行流程

1,用户送出表单

2,对表单元素上的action属性的Action网址发出http要求,并将表单所有数据传过去,

3,取回内容后再将内容填入ajaxOptions物件的UpdateTargetId属性所指定的id元素中。

了解AjaxOptions类型

无论使用Ajax.ActionLink 或者Ajax.BeginForm,都需要传入AjaxOptions的物件当参数,这个参数将决定asp.net mvc的ajax如何运作。

AjaxOptions属性名称

Confirm执行ajax之前会跳出一个确认对话框

HttpMethod设定http的设定方法

InsertionMode设定通过Ajax的辅助方法取回数据时,要如何将数据新增至UpfateTargetId(缩写为UTI)指定的元素中,有以下三种:

InsertionMOde.Replace:取代UTI的内容(预设)

InsertionMOde.InsertBefore:在UTI之前插入

InsertionMOde.InsertAfter 在UTI之后插入

LoadingElementId 在ajax尚未完成所有工作前显示的元素id值

OnBegin设定开始时要执行的js函数名称

OnComplete设定结束时要执行的js函数名称

OnFailure设定失败时执行的

OnSuccess 设定完成时要执行的js函数名称

UpdateTargetId设定回传值要显示在哪一个id上

URL 设定ajax的请求网址

当使用OnBegin,OnComplete,OnFailure,OnSuccess 这四个属性时,如果指定的函数名称不存在网页中,就会发生js错误

实例:

@Ajax.ActionLink("删除数据",“GetTime”,new {controller="Home",id=3,new AjaxOptions{OnSuccess="Delete" ,Confirm="您确定要删除吗?", HttpMethod="POST",LoadingElementId="ajaxLoad"}})

<<span >标签script标签>

function Delete(data){

alert(data);

}

</</span>标签script标签>

时间: 2024-10-06 18:19:20

Ajax辅助方法的相关文章

[MVC]Ajax辅助方法

在开始使用Ajax辅助方法前,必须在页面中载入jQuery以及jquery.unobtrusive-ajax.js文件才能正常执行. 为了让网站载入适当的JS函数库,必须先让Layout页面载入适当的JS文件,在MVC4模板中,默认已将Jquery文件加入,代码如下: 1 @Scripts.Render("~/bundles/jquery") 2 @RenderSection("scripts", required: false) 其中@Scripts.Render

(转)表单和HTML辅助方法 - ASP.NET MVC 3

——选自<ASP.NET MVC3 高级编程(第5章)  孙远帅 译> ——微软ASP.NET MVC系列书籍地址: http://www.wrox.com/WileyCDA/WroxTitle/Professional-ASP-NET-MVC-3.productCd-1118076583.html 第5章 表单和HTML辅助方法  本章内容简介: * 理解表单 * 如何利用HTML辅助方法 * 编辑和输入的辅助方法 * 显示和渲染的辅助方法 顾名思义,HTML辅助方法是用来辅助HTML开发的

ASP.NET MVC3学习心得-----表单和HTML辅助方法

5.1表单的使用 5.1.1  action和method的特性 表单是包含输入元素的容器,包含按钮.复选框.文本框等元素,表单的这些输入元素使得用户能够向页面中输入信息,并把输入信息提交给服务器.Action特性告知浏览器将URL提交到哪里,method特性来说明用何种方式告知浏览器,默认为get方法 5.1.2Get和Post方法 1.如果不想让浏览器把输入值放入查询字符串中,而是想放入HTTP请求的主体中,可以为method赋值post,post可以用来提交信用卡信息.向购物车添加专辑或者

ASP.NET MVC5 高级编程 第5章 表单和HTML辅助方法

参考资料<ASP.NET MVC5 高级编程>第5版 第5章 表单和HTML辅助方法 5.1 表单的使用 5.1.1 action 和 method 特性 默认情况下,表单发送的是 HTTP Post 请求 EF 对于外键关系,数据库名称等也有约定.这些约定取代了以前需要提供给一个关系对象映射框架的所有映射和配置. GET 方法:GET 请求的所有参数都在URL中,因此可以为GET 请求建立书签. POST 方法:浏览器把输入值放入 HTTP 请求的主体中. 5.2 辅助方法 可以通过视图的H

Ajax.ActionLink()方法的使用

第一句话都会这么去写:程序猿就是苦逼,除了开发还要会写博文!哎,今天就和大家一起讨论下Ajax的辅助方法ActionLink的使用,如果有讲的不好的地方或错的地方,请大家务必扔板砖,要投准哦,砸死我算了! 1.引入JS文件:Ajax辅助方法依赖于非侵入式JavaScript,所谓非侵入式JavaScript是指:在HTML中不包含任何的JavaScript代码.如果要使用Ajax的辅助方法,就必须引用相关的JS文件.如下: 首先引入JQ:<script src="../../Scripts

004.MVC视图、辅助方法

一.视图基础- 视图定义: 用户界面,是显示应用程序用户界面(UI)组件 Web应用程序:页面 作用: 1.输出/显示模型数据 2.出入提交 视图建议在View文件夹位置存储视图 视图引擎(了解):本意发动机,这里指的是:处理视图的软件(框架内部) ASP.NET Web窗体提供了一种视图引擎,称为Web窗体引擎 ASP.NET MVC1及MVC2版本中支持Web窗体引擎 ASP.NET MVC3版本除了支持Web窗体引擎,还提供了一种新的视图引擎,称为Razor(视图)引擎 Razor引擎更加

MVC5高级编程_表单和html辅助方法

使用HTML辅助方法关键在于 确保HTML页面链接中的URL指向正确的位置.表单元素拥有适用于模型绑定的合适名称和值,以及当模型 绑定失败时其他元素能够显示相应的错误提示消息. 1.表单的使用     @using(Html.BeginForm("Searhch", "Home", FormMethod.Get,new { target = "_blank", @class="editForm", data-validatab

asp.net mvc 3.0 知识点整理 ----- (4).HtmlHelper(Html 辅助方法)介绍

在View视图中,Html的类型是System.Web.Mvc.HtmlHelper<T>, 所有的辅助方法都需要和ModelState交互.那么,ModelState是什么呢?它是模型绑定的附属品,并且存有模型绑定期间检测到的所有验证错误.以及用户提交用到来更新模型的原始值.本篇博文,我们主要来介绍下一些常用的html辅助方法的主要作用和使用方法. 1. Html.BeginForm()和Ajax.BeginForm().   Html.BeginForm(): 同于传统的表单提交,主要是生

MVC HTML辅助方法

HTML辅助方法(HTML Helper)用来辅助产生HTML,在开发View的时候会面对许多HTML标签,处理这些HTML标签非常繁琐,为了降低View的复杂度,可以使用HTML辅助方法帮助你产生一些HTML标签或内容,因这些HTML标签都有固定标准的写法,所以将其包装成HTML辅助方法,可让View开发更快速,也可以避免不必要的语法错误. ASP.NET MVC中内建了许多HTML辅助方法,这些HTML辅助方法都是利用C#3.0的扩充方法特性,将各种不同的HTML辅助方法扩充在HtmlHel