网站 开发 周期,wordpress mu 下载,网页设计与网站开发素材,网站网址怎么写在Asp.net MVC中#xff0c;我们能非常方便的使用Ajax。这篇文章将介绍三种Ajax使用的方式#xff0c;分别为原始的Ajax调用、Jquery、Ajax Helper。分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留言板。首先看一下原始的Ajax的调用的:定义CommentController我们能非常方便的使用Ajax。这篇文章将介绍三种Ajax使用的方式分别为原始的Ajax调用、Jquery、Ajax Helper。分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留言板。首先看一下原始的Ajax的调用的:定义CommentController代码如下publicclassCommentController : Controller{privateIList_commentsnewList();publicActionResult Index(){returnView();}publicvoidAddCommentServer(){stringcommentRequest[comment].ToUpper();_comments.Add(comment);Response.ContentTypetext/html;Response.Write(string.Join(\n, _comments.ToArray()));}}在Asp.net MVC中添加一个custom_ajax.js加入下面使用ajax的脚本代码调用AddCommentServer方法。function getXmlHttpRequest() {var xhr;//check for IE implementation(s)if(typeofActiveXObject!undefined) {try{xhrnewActiveXObject(Msxml2.XMLHTTP);}catch(e) {xhrnewActiveXObject(Microsoft.XMLHTTP);}}elseif(XMLHttpRequest) {//this works for Firefox, Safari, OperaxhrnewXMLHttpRequest();}else{alert(对不起你的浏览器不支持ajax);}returnxhr;}function getMessage() {//get our xml http request objectvar xhrgetXmlHttpRequest();//prepare the requestxhr.open(GET,Comment/AddCommentServer?commentdocument.getElementById(Comment).value,true)//setup the callback functionxhr.onreadystatechangefunction() {//readyState 4 means were doneif(xhr.readyState!4)return;//populate the page with the resultdocument.getElementById(comments).innerHTMLdocument.getElementById(comments).innerHTMLxhr.responseText;};//fire our requestxhr.send(null);}在View中引入此脚本创建一个简单的表单并添加触发的代码CommentsAdd Comment效果如下第二种方式利用Jquery在控制器中添加代码IndexJquery方法和AddComment方法的代码CommentController代码如下所示:publicclassCommentController : Controller{privateIList_commentsnewList();publicActionResult Index(){returnView();}publicActionResult IndexJquery(){returnView();}publicActionResult AddComment(stringcomment){_comments.Add(comment);returnContent(string.Join(\n, _comments.ToArray()));}publicvoidAddCommentServer(){stringcommentRequest[comment].ToUpper();_comments.Add(comment);Response.ContentTypetext/html;Response.Write(string.Join(\n, _comments.ToArray()));}}根据IndexJquery创建View表单IndexJquery.aspxCommentsAdd Comment在View中引用Jquery添加下面脚本});});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);}效果与方式一效果一样。第三种方式Ajax Helper将最简单的留言板修改成Ajax Helper的方式。1、首先了解一下Ajax Helper下面四种方法。a、Ajax.ActionLink()它将渲染成一个超链接的标签类似于Html.ActionLink()。当它被点击之后将获取新的内容并将它插入到HTML页面中。b、Ajax.BeginForm()它将渲染成一个HTML的Form表单类似于Html.BeginForm()。当它提交之后将获取新的内容并将它插入到HTML页面中。c、Ajax.RouteLink()Ajax.RouteLink()类似于Ajax.ActionLink()。不过它可以根据任意的routing参数生成URL,不必包含调用的action。使用最多的场景是自定义的IController里面没有action。d、Ajax.BeginRouteForm()同样Ajax.BeginRouteForm()类似于Ajax.BeginForm()。这个Ajax等同于Html.RouteLink()。这个例子中使用Ajax.BeginForm()下面具体了解Ajax.BeginForm()的参数。看下面代码{HttpMethodPOST,UpdateTargetIdcomments,InsertionModeInsertionMode.InsertAfter})) {%actionNameAddComment(action的名字)controllerNameCommentController(Controller的名字)ajaxOptionsHttpMethodAjax的请求方式,这里为POSTUpdateTargetId :Ajax请求的结果显示的标签的ID这里为commentsInsertionMode将Ajax结果插入页面的方式这里将ajax的结果放置到comments的后面2、实现在CommentController中添加IndexAjaxHelp方法。publicActionResult IndexAjaxHelp(){returnView();}根据IndexAjaxHelp生成View表单IndexAjaxHelp.aspx定义表单Comments{HttpMethodPOST,UpdateTargetIdcomments,InsertionModeInsertionMode.InsertAfter})) {%Add Comment要在此View中添加下面两个脚本文件这样就行了我们发现比用Jquery方便很多但是使用Jquery将灵活很多。3、效果和方式一样。总结本文非常的简单在asp.net mvc中实现了3中ajax的调用方式实现了一个最简单的留言板程序。推荐使用Jquery和Ajax Helper这两种。Ajax Helper使用非常简单Jquery比较灵活。更新三种方式都实现了一个最简单的留言板程序参考ASP.NET MVC 2 In ActionPro ASP.NET MVC 2 Framework, Second Edition
