MVC 3 Partial Output Cache - Simple Demo

在MVC 3中，我們可以使用PartialView()的方式來完成對網頁局部資料進行Output Cache，而不是全部網頁內容都Output Cache。

下面範例我們要建立兩個區域，兩個區域各顯示目前的時間字串，一個區域沒有進行Output Cache處理，所以當網頁refresh時，時間會一直被更新成最新時間;另外一個區域我們設定10秒鐘的Output Cache，所以雖然網頁一直被refresh，但時間字串經過10秒後，才被更新，故舊的時間字串被cache了10秒鐘，以下為實際範例程式碼描述。

建立Controller

我們建立一個MVC 3專案檔，並建立一個名為CacheDemoController的Controller，在其中我們建立一個可產生PartialView()的Action，就取名為PartialCache()，並且設定OutputCache的時間為10秒鐘。程式碼如下：

   1:  public class CacheDemoController : Controller

   2:  {

   3:      public ActionResult Index()

   4:      {

   5:          return View();

   6:      }

   7:   

   8:      [OutputCache(Duration = 10)]

   9:      public ActionResult PartialCache()

  10:      {

  11:          ViewBag.Time2 =

  12:              DateTime.Now.ToLongTimeString();

  13:          return PartialView();

  14:      } 

  15:  }

建立兩個View

這裡我們需要建立兩個View()，分別是Index.cshtml與PartialCache.cshtml。
Index.cshtml這個View用來顯示同一個網頁中，上半部時間字串內容沒有Cache；
下半時間字串內容被設定Cache.Index這個View內容如下：

   1:  <h2>OutputCache Demo</h2>

   2:  <p>--下行為沒有Cache區段(<b>No Cache</b>)</p>

   3:  <div class="bar1">@DateTime.Now.ToLongTimeString()

   4:  </div><br /><br />

   5:   

   6:  <p>--下行設定10秒鐘的Cache(<b>Partial Cache 10 mins</b>)

   7:  </p>

   8:  <div class="bar2">@Html.Action("PartialCache",

   9:      "CacheDemo",null)</div>

PartialCache.cshtml這個Partial View用來產生被設定Output Cache的時間字串內容，其內容就一行，如下：

   1:  <p>@ViewBag.Time2</p>

執行結果

我們執行上面建立好的MVC 3專案檔，可看到一開始時，上下兩個字串時間都一樣。如下圖：

隨後我們refresh這一頁，我們發現，上半部的時間字串已經被更新了，但下半部的時間字串仍然維持一開始的那個時間字串，由下半部的時間字串這可看到，這部份已經成功產生Output Cache部份網頁內容了，原來Partial View(由PartialCache.cshtml產生)這部份的內容並不會在Server端再被執行與產生。如下圖：

我們再持續refresh這一頁，上半部的時間字串也一直持續被更新了。過了10秒鐘，我們再refresh這一頁時，發現下半部時間字串現在被更新了，也就是上面的Partial View內容又自Server端執行一次(request)，並將最新內容拋到(response)user端的Browser上了，如下圖：

有關MVC 3的Output Cache，基本上我們可參考Scott Guthrie的Announcing ASP.NET MVC 3這篇文章.