Asp.Net MVC4 + Oracle + EasyUI 學習 第二章

--使用Ajax提升網站效能

本文連結：http://www.cnblogs.com/likeli/p/4236723.html

文章集合：http://www.cnblogs.com/likeli/category/651581.html

1、  MVC的渲染部分檢視

　　向伺服器請求HTML標籤來更新網頁的內容，這種方法就叫“部分渲染”，這是屬於Ajax的基本過程。

　　部分渲染技術包括了傳送非同步請求給伺服器，伺服器返回包含HTML程式碼的資料插入到指定的頁面區域。這種方法十分的高效而且簡單。

　　在Asp.Net MVC中，會把部分渲染當做普通的請求一樣對待：請求被路由解析到特定的控制器，控制器執行特定的操作邏輯。

 普通渲染和渲染部分檢視的區別：通常的渲染方法是使用controller.View()幫助方法返回ViewResult；而部分渲染需要呼叫Controller.Partial()幫助方法來返回PartialViewResult物件。這與ViewResult類似，PartialViewResult只渲染包含檢視的內容，不會渲染外圍佈局。

　　1）控制器呼叫Controller.View()方法：

1 return View("Auction",auction);

　　最終是整頁渲染。

　　2）控制器呼叫Controller.PartialVIew()方法：

1 return PartialView("Auction",acution);

部分渲染除了將VIew()換成PartialView()方法，其他的一樣。唯一的區別就是PartialViewResult只渲染HTML標籤內容，不包含外圍佈局和母版頁的內容。其他包括Razor語法，HTML、URL幫助類都一樣使用。

不過要注意：因為部分檢視不包含外圍佈局，所以CSS或者Javascript外部檔案一定要直接在部分檢視中引用。

　　這部分類容，可以使用Jquery的load()方法快速實現。

1 function showAuctino(id)
2 {
3      $("#content").load("/Auction/PartialAuction/"+id);  
4 }

　　上面的程式碼若是用URLHelper則可以這樣寫：'@Url("PartialAuction","Auction")' + id

2、  JavaScript渲染

　　其實從上面的部分檢視渲染可以看出，這種渲染方式非常的浪費資源，很明顯的，有些內容完全不用在服務端建立和傳回，js足矣完成。

　　但是使用客戶端渲染有兩個必須的條件：

　　1）服務端可以產生序列化的資料

　　2）客戶端知道怎麼把這些序列化的資料轉換成標準的HTML程式碼

　　這裡使用Ajax請求資料，Asp.Net MVC提供了對原生Json的支援，使用JsonResult操作結果物件。因此，我們可以直接使用Controller.Json（）方法來建立包含可序列化物件的JsonResult。

1 return Json(action,JsonRequestBehavior.AllowGet);

　　那麼這個控制器返回的應答訊息就包含了序列化的Json格式資料。

上面程式碼中的第二個引數是必須的，因為預設情況下，MVC是不允許get方式HTTP請求Json資料的。這樣就可以避免Json劫持風險。因此，這裡需要設定允許Get請求Json。

但是最好的做法還是用屬性標記限制只讓POST方法提交請求，來避免此類安全漏洞。

1 [HttpPost]
2 public ActionResult JsonAuction(int id)
3 {
4     ...
5     return Json(acution);
6 }

3、  客戶端模板

　　到這裡，Json資料已經請求回來了，那麼，我們就需要在客戶端進行處理了，這裡使用客戶端模板，也就是模板引擎來渲染。當然要是不復雜的內容，你完全可以自己拼接字串來輸出的。

　　這裡我使用的是賢心的laytpl模板渲染引擎（http://sentsin.com/layui/laytpl/）：

 1 //第一步：編寫模版。你可以使用一個script標籤存放模板，如：
 2 <script id="demo" type="text/x-template">
 3 <h1>{{ d.title }}</h1>
 4 <ul>
 5 {{# for(var i = 0, len = d.list.length; i < len; i++){ }}
 6     <li>
 7         <span>姓名：{{ d.list[i].name }}</span>
 8         <span>城市：{{ d.list[i].city }}</span>
 9     </li>
10 {{# } }}
11 </ul>
12 </script>
13 
14 //第二步：建立檢視。用於呈現渲染結果。
15 <div id="view"></div>
16 
17 //第三步：渲染模版
18 function updateAuctionInfo(id)
19 {
20     $.ajax({
21         url:"/Auction/JsonAuction/" + id,
22         sucction:function(result){
23               var gettpl = document.getElementById('demo').innerHTML;
24               laytpl(gettpl).render(result, function(html){
25               document.getElementById('view').innerHTML = html;
26          }
27     })
28 }

　　那麼到這裡，以上程式碼就完成了一個Ajax的效能提升功能，不過這裡還是可以改進的。我們繼續...

      作為MVC框架，很重要的一點就是“分離關注點”，正常情況下，MVC的應用邏輯是不應該繫結到檢視中的。在上面寫的例子程式碼中，存在這一個情況，給同一個檢視輸出的內容中，我們使用了PartialView、View，我們是做的同一個動作--輸出HTML標籤內容，唯一不一樣的就是返回的內容不一樣。

　　因此，我們可以想辦法減去這些重複的邏輯程式碼，幸運的是，MVC提供了Request.IsAjaxRequest()擴充套件方法，這個方法可以幫我們來驗證當前的請求是否是Ajax。那麼靈感來了。

 1 Public ActionResult Auction(int id)
 2 {
 3     //獲取資料來源
 4     ...
 5     if(Request.IsAjaxRequest())
 6     {
 7         return PartialView("Auction",auction);
 8     }
 9     else
10     {
11         return View("Auction",auction);
12     }
13 }

　　那麼，這樣修改之後，Auction控制器就可以同時響應兩種請求了：HTTP get 和Ajax，而邏輯程式碼不變。

4、  處理Json

　　這裡，我的需求又有點兒變化，我在請求的時候，想要能夠請求完整HTML程式碼，也想能夠請求Json資料。咋辦？

　　這點MVC沒辦法，並沒有提供像上面驗證Ajax的方法類似的，用來驗證是否請求Json的方法。不過，這點兒其實也難不倒聰明的程式猿。在Ajax請求的時候，外加一個引數，指定請求內容為Json就行了。例：/Auctions/Auction/1?IsJson=Json

　　檢視原始碼，發現AjaxRequestExtensions是靜態類，不能繼承。

　　那麼，將這個自己定義的驗證是否請求Json的方法擴充套件一下：

1     public static class JsonRquestExtensions
2     {
3         public static bool IsJsonRquest(this HttpRequestBase request)
4         {
5             return string.Equals(request["IsJson"], "Json");
6         }
7      }

1     if (Request.IsJsonRquest())
2     {
3         return Json(auction);
4     }
5     else
6     {
7         return View("Auctino", auction);
8     }

　　這樣就行了，再整合一下之前寫的內容：

 1       if (Request.IsJsonRquest())
 2       {    //Json請求
 3            return Json(auction);
 4       }
 5       else if (Request.IsAjaxRquest())
 6       {    //Ajax請求
 7            return PartialView("Auxtion", auction);
 8       }
 9       else
10       {    //預設使用佈局的請求
11            return View("Auctino", auction);
12       }

　　通過上面的一連串邏輯判斷，讓一個控制器Action完成了部分檢視渲染和判斷Json請求返回資料的判斷邏輯。

　　說到這裡，又要引入一個新的東西了：過濾器。具體的說應該是操作過濾器。

　　原諒我再次無恥的盜圖一張（雖然圖是我自己畫的），此圖引用了《Asp.Net MVC5框架揭祕》的圖，這裡說明了這個過濾器的執行過程。

　　操作過濾器涉及到ActionFilter型別的使用。如上圖所示，所有的ActionFilter型別都實現了IActionFilter介面，這個介面的兩個方法OnActionExecution和OnActionExecuted會分別在目標Action方法執行前後被呼叫。如圖：

　　既然有在Action方法執行前呼叫，那麼我們就可以在這裡做文章了。

　　重寫一下OnActionExecuted方法，將Ajax、Json等請求方式判斷邏輯加入其中。

 　　那麼，這樣就構建了一個操作過濾器，這個操作過濾器的作用就是在多個控制器上重用統一的邏輯規則。

5、  最後

　　好叻，到這裡使用Ajax提升網站效能和互動就基本完成了，當然實際操作中並不是這麼簡單的，此處僅做入門。

　　舉個例子，假如是複雜的Json的話，那就需要做很多工作了。下一章繼續來弄這個，基本上說說複雜Json如何操作、如何提高Json的收發效率、跨域的Ajax請求等。

6、  參考文獻

　　《Asp.Net MVC5 框架揭祕》、《Asp.Net MVC4 Web程式設計》