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

1、  MVC的渲染部分視圖

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

　　部分渲染技術包括了發送異步請求給服務器，服務器返回包含HTML代碼的數據插入到指定的頁面區域。這種方法十分的高效而且簡單。

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

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

　　1）控制器調用Controller.View()方法：

return View("Auction",auction);

　　最終是整頁渲染。

　　2）控制器調用Controller.PartialVIew()方法：

return PartialView("Auction",acution);

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

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

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

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

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

2、  JavaScript渲染

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

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

　　1）服務端可以產生序列化的數據

　　2）客戶端知道怎么把這些序列化的數據轉換成標准的HTML代碼

　　這里使用Ajax請求數據，Asp.Net MVC提供了對原生Json的支持，使用JsonResult操作結果對象。因此，我們可以直接使用Controller.Json（）方法來創建包含可序列化對象的JsonResult。

return Json(action,JsonRequestBehavior.AllowGet);

　　那么這個控制器返回的應答消息就包含了序列化的Json格式數據。

上面代碼中的第二個參數是必須的，因為默認情況下，MVC是不允許get方式HTTP請求Json數據的。這樣就可以避免Json劫持風險。因此，這里需要設置允許Get請求Json。

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

[HttpPost]
public ActionResult JsonAuction(int id)
{
    ...
    return Json(acution);
}

3、  客戶端模板

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

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

//第一步：編寫模版。你可以使用一個script標簽存放模板，如：
<script id="demo" type="text/x-template">
<h1>{{ d.title }}</h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
    <li>
        <span>姓名：{{ d.list[i].name }}</span>
        <span>城市：{{ d.list[i].city }}</span>
    </li>
{{# } }}
</ul>
</script>

//第二步：建立視圖。用於呈現渲染結果。
<div id="view"></div>

//第三步：渲染模版
function updateAuctionInfo(id)
{
    $.ajax({
        url:"/Auction/JsonAuction/" + id,
        sucction:function(result){
              var gettpl = document.getElementById('demo').innerHTML;
              laytpl(gettpl).render(result, function(html){
              document.getElementById('view').innerHTML = html;
         }
    })
}

　　那么到這里，以上代碼就完成了一個Ajax的性能提升功能，不過這里還是可以改進的。我們繼續...

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

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

Public ActionResult Auction(int id)
{
    //獲取數據源
    ...
    if(Request.IsAjaxRequest())
    {
        return PartialView("Auction",auction);
    }
    else
    {
        return View("Auction",auction);
    }
}

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

4、  處理Json

　　這里，我的需求又有點兒變化，我在請求的時候，想要能夠請求完整HTML代碼，也想能夠請求Json數據。咋辦？

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

　　查看源碼，發現AjaxRequestExtensions是靜態類，不能繼承。

　　那么，將這個自己定義的驗證是否請求Json的方法擴展一下：

    public static class JsonRquestExtensions
    {
        public static bool IsJsonRquest(this HttpRequestBase request)
        {
            return string.Equals(request["IsJson"], "Json");
        }
     }

    if (Request.IsJsonRquest())
    {
        return Json(auction);
    }
    else
    {
        return View("Auctino", auction);
    }

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

      if (Request.IsJsonRquest())
      {    //Json請求
           return Json(auction);
      }
      else if (Request.IsAjaxRquest())
      {    //Ajax請求
           return PartialView("Auxtion", auction);
      }
      else
      {    //默認使用布局的請求
           return View("Auctino", auction);
      }

　　通過上面的一連串邏輯判斷，讓一個控制器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編程》