[转]Asp.net MVC 中Ajax的使用

2022-10-19 19:51:59

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的行为的。

  名称 描述
[转]Asp.net MVC 中Ajax的使用 Confirm 获取或设置提交请求之前，显示在确认窗口中的消息。
[转]Asp.net MVC 中Ajax的使用 HttpMethod 获取或设置 HTTP 请求方法（“Get”或“Post”）。
[转]Asp.net MVC 中Ajax的使用 InsertionMode 获取或设置指定如何将响应插入目标 DOM 元素的模式。
[转]Asp.net MVC 中Ajax的使用 LoadingElementDuration 获取或设置一个值（以毫秒为单位），该值控制显示或隐藏加载元素时的动画持续时间。
[转]Asp.net MVC 中Ajax的使用 LoadingElementId 获取或设置加载 Ajax 函数时要显示的 HTML 元素的 id 特性。
[转]Asp.net MVC 中Ajax的使用 OnBegin 获取或设置更新页面之前，恰好调用的 JavaScript 函数的名称。
[转]Asp.net MVC 中Ajax的使用 OnComplete 获取或设置实例化响应数据之后但更新页面之前，要调用的 JavaScript 函数。
[转]Asp.net MVC 中Ajax的使用 OnFailure 获取或设置页面更新失败时，要调用的 JavaScript 函数。
[转]Asp.net MVC 中Ajax的使用 OnSuccess 获取或设置成功更新页面之后，要调用的 JavaScript 函数。
[转]Asp.net MVC 中Ajax的使用 UpdateTargetId 获取或设置要使用服务器响应来更新的 DOM 元素的 ID。
[转]Asp.net MVC 中Ajax的使用 Url 获取或设置要向其发送请求的 URL。
上一篇：bjfu1109 最小公倍数和


下一篇：在js中嵌套java代码