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代码:

  1. var xhr;
  2.   function getXHR()
  3.   {
  4.   try {
  5.   xhr=new ActiveXObject("Msxml2.XMLHTTP");
  6.   } catch (e) {
  7.   try {
  8.   xhr=new ActiveXObject("Microsoft.XMLHTTP");
  9.   } catch (e) {
  10.   xhr=false;
  11.   }
  12.   }
  13.   if(!xhr&&typeof XMLHttpRequest!='undefined')
  14.   {
  15.   xhr=new XMLHttpRequest();
  16.   }
  17.   return xhr;
  18.   }
  19.   function openXHR(method,url,callback)
  20.   {
  21.   getXHR();
  22.   xhr.open(method,url);
  23.   xhr.onreadystatechange=function()
  24.   {
  25.   if(xhr.readyState!=4)return;
  26.   callback(xhr);
  27.   }
  28.   xhr.send(null);
  29.   }
  30.   function loadXML(method,url,callback)
  31.   {
  32.   getXHR();
  33.   xhr.open(method,url);
  34.   xhr.setRequestHeader("Content-Type","text/xml");
  35.   xhr.setRequestHeader("Content-Type","GBK");
  36.   xhr.onreadystatechange=function()
  37.   {
  38.   if(xhr.readyState!=4)return;
  39.   callback(xhr);
  40.   }
  41.   xhr.send(null);
  42.   }

后台代码:

  1. public ActionResult GetNews(int CategoryID)
  2. {
  3. NewsCollectionModel newsCollection = new NewsCollectionModel();
  4. …………
  5. JsonResult myJsonResult = new JsonResult();
  6. myJsonResult = newsCollection;
  7. return myJsonResult;
  8. }

第二种:使用Jquery进行Ajax调用:

在VS 2010中,IDE全面支持Jquery的智能显示,在开发中使用Jq来实现JS效果非常的棒,而且可以节省很多精力和时间。所以在Ajax中使用JQuery进行开发,也是一种不错的方法。

大概的实现代码如下:

  1. <% using (Html.BeginForm("AddComment","Comment",FormMethod.Post,new {@class="hijax"})) { %>
  2. <%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
  3. <button type="submit">Add Comment</button>
  4. <span id="indicator" style="display:none"><img src="http://www.cnblogs.com/content/load.gif" alt="loading..." /></span>
  5. <% } %>
  6. 在View中引用Jquery:
  7. <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  8. 添加下面脚本:
  9. <script type="text/javascript">
  10. //execute when the DOM has been loaded
  11. $(document).ready(function () {
  12. //wire up to the form submit event
  13. $("form.hijax").submit(function (event) {
  14. event.preventDefault();  //prevent the actual form post
  15. hijack(this, update_sessions, "html");
  16. });
  17. });
  18. function hijack(form, callback, format) {
  19. $("#indicator").show();
  20. $.ajax({
  21. url: form.action,
  22. type: form.method,
  23. dataType: format,
  24. data: $(form).serialize(),
  25. completed: $("#indicator").hide(),
  26. success: callback
  27. });
  28. }
  29. function update_sessions(result) {
  30. //clear the form
  31. $("form.hijax")[0].reset();
  32. $("#comments").append(result);
  33. }
  34. </script>

第三种方法:使用微软自带的Ajax Helper框架来实现.

  1. <% using (Ajax.BeginForm("AddComment", new AjaxOptions
  2. {
  3. HttpMethod = "POST",
  4. UpdateTargetId = "comments",
  5. InsertionMode = InsertionMode.InsertAfter
  6. })) { %>
  7. <%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
  8. <button type="submit">Add Comment</button>
  9. <% } %>

第二种和第三种方法在博客园有篇博客中有所讲解,我直接进行了引用,具体地址如下: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的使用的更多相关文章

  1. 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 ...

  2. ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用

    Ajax的全名为:Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.Ajax技术首先向Web服务器发送 ...

  3. Asp.net MVC 中Ajax的使用 [分享]

    文章转自 http://www.huiyoumi.wang/upload/forum.php?mod=viewthread&tid=75&extra= Asp.net MVC 抛弃了A ...

  4. Asp.net MVC 中Ajax的使用

    Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让我们跟底层的HTML有了更多的亲近.可以更自由.更灵活的去控制HTML的结构.样式和行为.而这点对于Ajax 的应有来 ...

  5. Asp.net mvc中的Ajax处理

    在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...

  6. ASP.NET MVC中使用ASP.NET AJAX异步访问WebService

    使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...

  7. 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)

    在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...

  8. 如何在 ASP.NET MVC 中集成 AngularJS(1)

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

  9. 在Asp.Net MVC中用Ajax回调后台方法

    在Asp.Net MVC中用Ajax回调后台方法基本格式: var operData = ...; //传递的参数(action中定义的) var type = ...; //传递的参数(action ...

随机推荐

  1. nginx配置事例

    #user nobody; worker_processes 4; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  2. 【原创】jpgraph中文乱码问题的解决

    php jpgraph库非常强大,可以在后台生成图片 后台生成在需要导出图表型报告的时候非常有用,当然,前端的可视化还是要用highcharts/echarts/anycharts等类库 比较麻烦的是 ...

  3. OkHttp+Stetho+Chrome调试android网络部分(原创)

    android网络调试一直是一个比较麻烦的部分,因为在不同序列的请求中,返回的数据会有不同的变化,如果能像web开发一样使用调试功能查看页面的访问数据该是多么美好的事情! 很幸运的是,现在Androi ...

  4. android studio 中配置androidAnnotation 的新版正确配置

    apply ].processResources.manifestFile resourcePackageName 'com.peiandsky.firstandroidstudio' }}

  5. 解决linux下/etc/rc.local开机器不执行的原因

    前不久因项目需要写了开机启动其他程序的shell脚本,因工作忙,调试完给了技术支持人员,也没去注意过. 到后来,有几台服务器突然被重启了,这时候领导问,怎么开机启动的脚本没起作用,还被批了一顿,哎,做 ...

  6. 第一百四十八节,封装库--JavaScript,菜单切换

    第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...

  7. (转)java反编译i++和++i问题

    转自:http://blog.csdn.net/junsure2012/article/details/7099222 java字节码指令集:http://www.jb51.net/article/3 ...

  8. 蓝桥杯 第三届C/C++预赛真题(2) 古堡算式(数学题)

    福尔摩斯到某古堡探险,看到门上写着一个奇怪的算式: ABCDE * ? = EDCBA 他对华生说:“ABCDE应该代表不同的数字,问号也代表某个数字!” 华生:“我猜也是!” 于是,两人沉默了好久, ...

  9. C++ 运算符 [] & *、操作符new 修饰符const inline virtual

    1. [] 这让我想到静态分配内存和动态分配内存,与数据名称无关 局部变量和临时变量会储存在静态缓存区,随着程序运行完而消亡(例如在循环体中定义的局部变量随着循环体结束,局部变量也会消亡). 内存泄漏 ...

  10. iOS-setNeedsLayout等布局方法

    列举下iOS layout的相关方法: layoutSubviews layoutIfNeeded setNeedsLayout setNeedsDisplay drawRect sizeThatFi ...