[转]Asp.net MVC 中Ajax的使用
Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让我们跟底层的HTML有了更多的亲近。可以更自由、更灵活的去控制HTML的结构、样式和行为。而这点对于Ajax的应有来说,Asp.net MVC确实要比WebForm优秀很多。我对Asp.net MVC更便捷的使用Ajax做了一下探讨,拿出来分享,欢迎拍砖。
第一、直接写JS代码实现Ajax:
因为Asp.net 浏览器端的代码能更好的控制,所以我们完全可以在HTML中直接通过JS发出Ajax请求,而在Controller的action中返回XML或者Json,来实现Ajax效果,这种方法是最原始的方法,需要考虑浏览器和诸多问题,不推荐使用。
参考代码如下:
JS代码:
- var xhr;
- function getXHR()
- {
- try {
- xhr=new ActiveXObject("Msxml2.XMLHTTP");
- } catch (e) {
- try {
- xhr=new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e) {
- xhr=false;
- }
- }
- if(!xhr&&typeof XMLHttpRequest!='undefined')
- {
- xhr=new XMLHttpRequest();
- }
- return xhr;
- }
- function openXHR(method,url,callback)
- {
- getXHR();
- xhr.open(method,url);
- xhr.onreadystatechange=function()
- {
- if(xhr.readyState!=4)return;
- callback(xhr);
- }
- xhr.send(null);
- }
- function loadXML(method,url,callback)
- {
- getXHR();
- xhr.open(method,url);
- xhr.setRequestHeader("Content-Type","text/xml");
- xhr.setRequestHeader("Content-Type","GBK");
- xhr.onreadystatechange=function()
- {
- if(xhr.readyState!=4)return;
- callback(xhr);
- }
- xhr.send(null);
- }
后台代码:
- public ActionResult GetNews(int CategoryID)
- {
- NewsCollectionModel newsCollection = new NewsCollectionModel();
- …………
- JsonResult myJsonResult = new JsonResult();
- myJsonResult = newsCollection;
- return myJsonResult;
- }
第二种:使用Jquery进行Ajax调用:
在VS 2010中,IDE全面支持Jquery的智能显示,在开发中使用Jq来实现JS效果非常的棒,而且可以节省很多精力和时间。所以在Ajax中使用JQuery进行开发,也是一种不错的方法。
大概的实现代码如下:
- <% using (Html.BeginForm("AddComment","Comment",FormMethod.Post,new {@class="hijax"})) { %>
- <%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
- <button type="submit">Add Comment</button>
- <span id="indicator" style="display:none"><img src="http://www.cnblogs.com/content/load.gif" alt="loading..." /></span>
- <% } %>
- 在View中引用Jquery:
- <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
- 添加下面脚本:
- <script type="text/javascript">
- //execute when the DOM has been loaded
- $(document).ready(function () {
- //wire up to the form submit event
- $("form.hijax").submit(function (event) {
- event.preventDefault(); //prevent the actual form post
- hijack(this, update_sessions, "html");
- });
- });
- function hijack(form, callback, format) {
- $("#indicator").show();
- $.ajax({
- url: form.action,
- type: form.method,
- dataType: format,
- data: $(form).serialize(),
- completed: $("#indicator").hide(),
- success: callback
- });
- }
- function update_sessions(result) {
- //clear the form
- $("form.hijax")[0].reset();
- $("#comments").append(result);
- }
- </script>
第三种方法:使用微软自带的Ajax Helper框架来实现.
- <% using (Ajax.BeginForm("AddComment", new AjaxOptions
- {
- HttpMethod = "POST",
- UpdateTargetId = "comments",
- InsertionMode = InsertionMode.InsertAfter
- })) { %>
- <%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
- <button type="submit">Add Comment</button>
- <% } %>
第二种和第三种方法在博客园有篇博客中有所讲解,我直接进行了引用,具体地址如下:http://www.cnblogs.com/zhuqil/archive/2010/07/18/1780285.html
主要是对Ajax helper记录下我自己的看法和注意的事项。
第一、Ajax Helper是微软提供的一种Ajax框架,为了使用Ajax Helper必须使用微软提供的两个Js框架:
<script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
第二、Ajax Helper有几个用法
Ajax.ActionLink():它将渲染成一个超链接的标签,类似于Html.ActionLink()。当它被点击之后,将获取新的内容并将它插入到HTML页面中。
Ajax.BeginForm():它将渲染成一个HTML的Form表单,类似于Html.BeginForm()。当它提交之后,将获取新的内容并将它插入到HTML页面中。
Ajax.RouteLink():Ajax.RouteLink()类似于Ajax.ActionLink()。不过它可以根据任意的routing参数生成URL,不必包含调用的action。使用最多的场景是自定义的IController,里面没有action。
Ajax.BeginRouteForm():同样Ajax.BeginRouteForm()类似于Ajax.BeginForm()。这个Ajax等同于Html.RouteLink()。
而每个方法里面的参数会有所不同,具体的用法见:http://msdn.microsoft.com/zh-cn/library/system.web.mvc.ajaxhelper_methods(v=VS.98).aspx
其中一个重要的参数为:AjaxOption,存在有以下几个属性,主要是来规定Ajax的行为的。
名称 | 描述 | |
---|---|---|
Confirm | 获取或设置提交请求之前,显示在确认窗口中的消息。 | |
HttpMethod | 获取或设置 HTTP 请求方法(“Get”或“Post”)。 | |
InsertionMode | 获取或设置指定如何将响应插入目标 DOM 元素的模式。 | |
LoadingElementDuration | 获取或设置一个值(以毫秒为单位),该值控制显示或隐藏加载元素时的动画持续时间。 | |
LoadingElementId | 获取或设置加载 Ajax 函数时要显示的 HTML 元素的 id 特性。 | |
OnBegin | 获取或设置更新页面之前,恰好调用的 JavaScript 函数的名称。 | |
OnComplete | 获取或设置实例化响应数据之后但更新页面之前,要调用的 JavaScript 函数。 | |
OnFailure | 获取或设置页面更新失败时,要调用的 JavaScript 函数。 | |
OnSuccess | 获取或设置成功更新页面之后,要调用的 JavaScript 函数。 | |
UpdateTargetId | 获取或设置要使用服务器响应来更新的 DOM 元素的 ID。 | |
Url | 获取或设置要向其发送请求的 URL。 |
[转]Asp.net MVC 中Ajax的使用的更多相关文章
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...
- ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用
Ajax的全名为:Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.Ajax技术首先向Web服务器发送 ...
- Asp.net MVC 中Ajax的使用 [分享]
文章转自 http://www.huiyoumi.wang/upload/forum.php?mod=viewthread&tid=75&extra= Asp.net MVC 抛弃了A ...
- Asp.net MVC 中Ajax的使用
Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让我们跟底层的HTML有了更多的亲近.可以更自由.更灵活的去控制HTML的结构.样式和行为.而这点对于Ajax 的应有来 ...
- Asp.net mvc中的Ajax处理
在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...
- ASP.NET MVC中使用ASP.NET AJAX异步访问WebService
使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...
- 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)
在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(1)
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
- 在Asp.Net MVC中用Ajax回调后台方法
在Asp.Net MVC中用Ajax回调后台方法基本格式: var operData = ...; //传递的参数(action中定义的) var type = ...; //传递的参数(action ...
随机推荐
- node.js和前端js有什么区别
进行前端开发工作需要掌握技能有html. css.js以及各种前端框架,把这些技术玩6就可以成为一名合格的前端开发工作者 而进行nodejs开发,需要掌握js.web服务器原理.关系数据使用, 如果玩 ...
- 对hibernate的延迟加载如何理解,在实际应用中,延迟加载与session关闭的矛盾是如何处理的?
对hibernate的延迟加载如何理解,在实际应用中,延迟加载与session关闭的矛盾是如何处理的? 解答:延迟加载就是并不是在读取的时候就把数据加载进来,而是等到使用时再加载.那么Hibernat ...
- Openstack(Kilo)安装系列之glance(六)
安装配置 Before you install and configure the Image service, you must create a database, service credent ...
- JavaScript------Throw和Try-Catch的使用
function test() { try { var x = document.getElementById("demo").value; if (x == "&quo ...
- ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[]]
今天第一次遇到Failed to start component [StandardEngine[Catalina].StandardHost[localhost].错误,并且在错误提示的后半段出现了 ...
- Kotlin——初级篇(八):关于字符串(String)常用操作汇总
在前面讲解Kotlin数据类型的时候,提到了字符串类型,当然关于其定义在前面的章节中已经讲解过了.对Kotlin中的数据类型不清楚的同学.请参考Kotlin--初级篇(三):数据类型详解这篇文章. 在 ...
- 爬虫实战【12】使用cookie登陆豆瓣电影以及获取单个电影的所有短评
昨天我们已经实现了如何抓取豆瓣上的热门电影信息,虽然不多,只有几百,但是足够我们进行分析了. 今天我们来讲一下如何获取某一部电影的所有短评论信息,并保存到mongodb中. 反爬虫 豆瓣设置的反爬虫机 ...
- react 坑总结
1.react可以在里面直接更改state的变量 例如: 2.react 数组循环
- javamail+postfix发送邮件
由于在做项目时,需要用到邮箱服务.但是不想使用163,qq的,所以就自己搭一个邮箱服务器. 在搜索资料发现postfix是个不错的选择,于是就开始配置了. 这是我搜到的最全的的教程了:http://w ...
- c# ,socket编程的一些常用方法
1 命名空间 需要添加的命名空间 using System.Net; using System.Net.Socket; 2 构造新的socket对象 socket原型: public socket ( ...