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

Asp.Net MVC4 + Oracle + EasyUI 第二章

--使用Ajax提高網站性能

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

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

一、  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

二、  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 }

三、  客戶端模板

　　到這裏，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，而邏輯代碼不變。

四、  處理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等請求方式判斷邏輯加入其中。

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

五、  最後

　　好叻，到這裏使用Ajax提高網站性能和交互就基本完成了，固然實際操做中並非這麼簡單的，此處僅作入門。

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

六、  參考文獻

　　《Asp.Net MVC5 框架揭祕》、《Asp.Net MVC4 Web編程》