Asp.net MVC 中Ajax的使用

作者:   出处:互联网   2015-06-03 04:09:18   阅读:1

Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让们跟底层的HTML有了更多的亲近。可以更自由、更灵活的去控制HTML的结构、样式和行为。而这点对于Ajax 的应有来说,Asp.net MVC确实要比WebForm优秀很多。对Asp.net MVC更便捷的使用Ajax做了一下探讨,拿出来分享,欢迎拍砖。以下采用三种方式演示ajax的使用,两种都以简单demo展示希望大家多研究、提问和分享经验。


第一、直接写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 2015中,IDE全面支持Jquery的智能显示,在开发中使用Jq来实现JS效果非常的棒,而且可以节省很多精力和时间。所以在Ajax中使用JQuery进行开发,也是一种不错的方法。


大概的实现代码如下:


 % using (Html.BeginForm("AddComment","Comment",FormMethod.Post,new {@ })) { % 

%= Html.TextArea("Comment", new{rows=5, cols=50}) %
button type="submit" Add Comment /button
span id="indicator" 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/2015/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的行为的。


Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat