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/xml）xhrsetRequestHeader（ContentTypeGBK）xhronreadystatechange=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 $（formhijax）submit（function （event） { eventpreventDefault（） //prevent the actual form post hijack（this update_sessions html）}）
function hijack（form callback format） { $（#indicator）show（）$ajax（{ url formactiontype thoddataType formatdata $（form）serialize（）completed $（#indicator）hide（）success callback }）}
function update_sessions（result） { //clear the form $（formhijax）[]reset（）$（#comments）append（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=VS）aspx其中一個重要的參數為AjaxOption存在有以下幾個屬性主要是來規定Ajax的行為的
名稱 描述Confirm 獲取或設置提交請求之前顯示在確認窗口中的消息
HttpMethod 獲取或設置 HTTP 請求方法（Get或Post）
InsertionMode 獲取或設置指定如何將響應插入目標 DOM 元素的模式
LoadingElementDuration 獲取或設置一個值（以毫秒為單位）該值控制顯示或隱藏加載元素時的動畫持續時間
LoadingElementId 獲取或設置加載 Ajax 函數時要顯示的 HTML 元素的 id 特性
OnBegin 獲取或設置更新頁面之前恰好調用的 JavaScript 函數的名稱
OnComplete 獲取或設置實例化響應數據之後但更新頁面之前要調用的 JavaScript 函數
OnFailure 獲取或設置頁面更新失敗時要調用的 JavaScript 函數
OnSuccess 獲取或設置成功更新頁面之後要調用的 JavaScript 函數
UpdateTargetId 獲取或設置要使用服務器響應來更新的 DOM 元素的 ID Url 獲取或設置要向其發送請求的 URL
From:http://tw.wingwit.com/Article/program/net/201311/12836.html
