asp.net

位置:IT落伍者 >> asp.net >> 浏览文章

Asp.net MVC 中Ajax的使用


发布日期:2019年08月14日
 
Asp.net MVC 中Ajax的使用

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

第一直接写JS代码实现Ajax

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

参考代码如下

JS代码

view plain var xhrfunction getXHR()

{ try { xhr=new ActiveXObject(MsxmlXMLHTTP} catch (e) { try { xhr=new ActiveXObject(MicrosoftXMLHTTP} catch (e) { xhr=false} if(!xhr&&typeof XMLHttpRequest!=undefined

{ xhr=new XMLHttpRequest()} return xhr} function openXHR(methodurlcallback)

{ getXHR()xhropen(methodurl)xhronreadystatechange=function()

{ if(xhrreadyState!=)returncallback(xhr)} xhrsend(null)} function loadXML(methodurlcallback)

{ getXHR()xhropen(methodurl)xhrsetRequestHeader(ContentTypetext/xmlxhrsetRequestHeader(ContentTypeGBKxhronreadystatechange=function()

{ if(xhrreadyState!=)returncallback(xhr)} xhrsend(null)}

后台代码

view plain public ActionResult GetNews(int CategoryID)

{ NewsCollectionModel newnewsCollection = new NewsCollectionModel()…………

JsonResult myJsonResult = new JsonResult()myJsonResult = newsCollectionreturn myJsonResult}

第二种使用Jquery进行Ajax调用

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

大概的实现代码如下

view plain <% using (HtmlBeginForm(AddCommentCommentFormMethodPostnew {@class=hijax})) { %> <%= HtmlTextArea(Comment new{rows= cols=}) %> <button type=submit>Add Comment</button> <span id=indicator ><img src= alt=loading…… /></span> <% } %>在View中引用Jquery<script src=minjs 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 $(formhijaxsubmit(function (event) { eventpreventDefault() //prevent the actual form post hijack(this update_sessions html})

function hijack(form callback format) { $(#indicatorshow()$ajax({ url formactiontype thoddataType formatdata $(form)serialize()completed $(#indicatorhide()success callback })}

function update_sessions(result) { //clear the form $(formhijax)[]reset()$(#commentsappend(result)}

</script>

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

view plain <% using (AjaxBeginForm(AddComment new AjaxOptions { HttpMethod = POSTUpdateTargetId = commentsInsertionModeInsertionMode = InsertionModeInsertAfter })) { %>

<%= HtmlTextArea(Comment new{rows= 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有几个用法

AjaxActionLink()它将渲染成一个超链接的标签类似于HtmlActionLink()当它被点击之后将获取新的内容并将它插入到HTML页面中

AjaxBeginForm()它将渲染成一个HTML的Form表单类似于HtmlBeginForm()当它提交之后将获取新的内容并将它插入到HTML页面中

AjaxRouteLink()AjaxRouteLink()类似于AjaxActionLink()不过它可以根据任意的routing参数生成URL不必包含调用的action使用最多的场景是自定义的IController里面没有action AjaxBeginRouteForm()同样AjaxBeginRouteForm()类似于AjaxBeginForm()这个Ajax等同于HtmlRouteLink()

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

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

HttpMethod获取或设置 HTTP 请求方法(GetPost

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

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

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

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

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

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

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

UpdateTargetId获取或设置要使用服务器响应来更新的 DOM 元素的 ID Url获取或设置要向其发送请求的 URL

               

上一篇:ASP.NET中备份SQL Server数据库的方法

下一篇:asp.net获取URL和IP地址