知识大全 Asp.net MVC 中Ajax的使用

Posted 2022-07-17 函数

篇首语：其实最美好的日子就是，我对你闹，你对我笑。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 Asp.net MVC 中Ajax的使用相关的知识，希望对你有一定的参考价值。

Asp.net MVC 中Ajax的使用 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　MVC 抛弃了 WebForm那种高度封装的控件让我们跟底层的HTML有了更多的亲近可以更自由更灵活的去控制HTML的结构样式和行为而这点对于Ajax的应有来说 MVC确实要比WebForm优秀很多我对 MVC更便捷的使用Ajax做了一下探讨拿出来分享欢迎拍砖

　　第一直接写JS代码实现Ajax

　　因为浏览器端的代码能更好的控制所以我们完全可以在HTML中直接通过JS发出Ajax请求而在Controller的action中返回XML或者Json 来实现Ajax效果这种方法是最原始的方法需要考虑浏览器和诸多问题不推荐使用

　　参考代码如下

　　JS代码

　　view plain var xhr function getXHR（）

　　 try xhr=new ActiveXObject（ Msxml 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！= ）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！= ）return callback（xhr） xhr send（null）

　　后台代码

　　view plain public ActionResult GetNews（int CategoryID）

　　 NewsCollectionModel newnewsCollection = new NewsCollectionModel（） …………

　　JsonResult myJsonResult = new JsonResult（） myJsonResult = newsCollection return myJsonResult

　　第二种使用Jquery进行Ajax调用

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

　　大概的实现代码如下

　　view plain <% using （Html BeginForm（ AddComment Comment FormMethod Post new @class= hijax ）） %> <%= Html TextArea（ Comment newrows= cols= ） %> <button type= submit >Add Comment</button> <span id= indicator ><img src= alt= loading…… /></span> <% %>在View中引用Jquery <script src= 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 ））

　　function hijack（form callback format） $（ #indicator ） show（） $ ajax（ url form action type thod dataType format data $（form） serialize（） pleted $（ #indicator ） hide（） success callback ）

　　function update_sessions（result） //clear the form $（ form hijax ）[ ] reset（） $（ #ments ） append（result）

　　</script>

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

　　view plain <% using （Ajax BeginForm（ AddComment new AjaxOptions HttpMethod = POST UpdateTargetId = ments InsertionModeInsertionMode = InsertionMode InsertAfter ）） %>

　　<%= Html TextArea（ Comment newrows= cols= ） %> <button type= submit >Add Comment</button>

　　<% %>

　　第二种和第三种方法在博客园有篇博客中有所讲解我直接进行了引用具体地址如下

　　主要是对Ajax helper记录下我自己的看法和注意的事项

　　第一 Ajax Helper是微软提供的一种Ajax框架为了使用Ajax Helper必须使用微软提供的两个Js框架

　　<script src= type= text/javascript ></script> <script src= 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（）

　　而每个方法里面的参数会有所不同具体的用法见 cn/library/system web mvc ajaxhelper_methods（v=VS ） aspx其中一个重要的参数为 AjaxOption 存在有以下几个属性主要是来规定Ajax的行为的

　　名称描述Confirm 获取或设置提交请求之前显示在确认窗口中的消息

　　HttpMethod 获取或设置 HTTP 请求方法（ Get 或 Post ）

　　InsertionMode 获取或设置指定如何将响应插入目标 DOM 元素的模式

　　LoadingElementDuration 获取或设置一个值（以毫秒为单位）该值控制显示或隐藏加载元素时的动画持续时间

　　LoadingElementId 获取或设置加载 Ajax 函数时要显示的 HTML 元素的 id 特性

　　OnBegin 获取或设置更新页面之前恰好调用的 JavaScript 函数的名称

　　OnComplete 获取或设置实例化响应数据之后但更新页面之前要调用的 JavaScript 函数

　　OnFailure 获取或设置页面更新失败时要调用的 JavaScript 函数

　　OnSuccess 获取或设置成功更新页面之后要调用的 JavaScript 函数

cha138/Article/program/net/201311/12836