在本Blog前一篇文章中(
MVC3 Partial Output Cache - Simple Demo)，我們舉了一個簡單的例子，來說明MVC 3中的Partial Output Cache機制，那個例子在同一個網頁上顯示兩個時間字串，一個時間字串沒有cache，另一個時間字串有設定cache 10秒鐘，由那個例子可知道MVC 3 Partial Output Cache運作的基本方式與程式寫法。
但一般網站中都是佈滿各種資訊在一個web page中，有些需顯示即時資訊，有些靜態資訊則會設定cache，以加快網頁顯示速度，本篇文章中，我們以Northwind資料庫為例，針對查詢同一個產品類別(CategoryID)的結果，來進行Partial Output Cache：也就是透過設定VaryByParam的方式(本篇範例為VaryByParam=CategoryID)，只要有網友查詢過A產品類別(CategoryID=A)之下所屬的所有產品，則查詢後的內容就會被cache起來，在設定的cache時間內(如Duration=100)，若有網友又要查詢A這個產品類別(CategoryID=A)，則伺服器不會再執行查詢程式，而是將cache中之前查過的相同內容直接輸出給第二次查詢同產品類別的網友，當然輸出部分，我們也是以之前文章所提到的Partial View()的方式來製作。我們以下先進行本範例展示，文章後半部再詳述各部份程式。
Demo
[02:17:11 PM] 點選/Product/QueryProduct這頁，可看到我們可下拉產品類別(CategoryID)來選擇我們要查詢的產品，如下圖：
[02:17:19 PM] 選擇CategoryID = Meat/Poultry，可看到目前該類別共有6個產品。如下圖：
[02:17:37 PM] 點選/Product/Create這頁，我們現在新增一個ProductName = KaKa，其CategoryID = Meat/Poultry，就是上個步驟所看到的那個產品類別。如下圖：
[02:17:49 PM] 再次回到/Product/QueryProduct這頁，如下圖選擇CategoryID = Meat/Poultry，可看到目前該類別仍維持有6個產品，伺服器並沒有再次執行查詢的動作，而是將Cache的內容直接回應(response)給查詢者，Cache機制產生效果了(OutputCache is working)，而且又上方的時間仍然持續的被更新為最新時間(time is updated continually)，所以Partial Output Cache 也產生效果了(Partial OutputCache is also working)。
[02:18:56 PM] 使用另外一個Browser，如下圖點選/Product/QueryProduct這頁，可看到目前該類別仍維持有6個產品，所以Cache機制持續生效中。
[02:19:10 PM] 時間過了我們設定的Cache時間(Duration=100秒)，再次更新(refresh)一次/Product/QueryProduct這頁，可看到目前該類別已經變成7個產品，前面步驟新增的ProductName = KaKa這筆資料，現在已經被顯示出來，伺服器已經再次去執行查詢，並取回資料庫最新資料狀況，然後更新Cache內容。
下面我們詳述各部份程式如何撰寫。
Create a MVC3 Project
本範例中先建立一個MVC3的專案檔，並且配合
Entity Framework Code First CTP5來連結與操作Northwind資料庫。建立好專案檔，加入EntityFramework.dll參考(Add reference)，如下圖：
並加入資料庫連線到Web.config後(
請參考之前文章這裡)，請先建立Product這個Controller，並且ProductController之下，可去Create一個新Product的View與相關程式，這部份請參考一般MVC的作法，可參考
Adding a Create Method and Create View。
Model
這部分我們撰寫兩個cs檔案，用來處理與Category與Products相關的資料存取。
而QueryProductViewModel.cs則是上述Demo網頁(/Product/QueryProduct這頁)所用到的View Model描述。
1./Models/CategoryRepository.cs
1: public class CategoryRepository
2: { 3: Northwind northwind;
4: public CategoryRepository()
5: { 6: northwind = new Northwind();
7: }
8:
9: public IQueryable<Category> SelectAll()
10: { 11: return northwind.Categories;
12: }
13: }
2./Models/ProductRepository.cs
1: public class ProductRepository
2: { 3: Northwind northwind;
4: public ProductRepository()
5: { 6: northwind = new Northwind();
7: }
8:
9: public IEnumerable<Product> SelectAll()
10: { 11: return northwind.Products;
12: }
13:
14: public void Create(Product product)
15: { 16: northwind.Products.Add(product);
17: northwind.SaveChanges();
18: }
19:
20: public IQueryable<Product> Select(int id)
21: { 22: var list = from m in northwind.Products
23: where m.CategoryID == id
24: select m;
25: return list;
26: }
27: }
3./ViewModels/QueryProductViewModel.cs
1: public class QueryProductViewModel
2: { 3: public int CategoryID { get; set; } 4: public IQueryable<Product> Products { get; set; } 5: }
Controller
這部分是本範例最重要的部份，我們在Product這個Controller中撰寫QueryProductPartialView這個Action，並且設定相關的OutputCache參數，這個Action，可以用來產生產生Partial Output Cache的Partial View。
1./Controllers/ProductController.cs
1: public class ProductController : Controller
2: { 3: ProductRepository productRep;
4: CategoryRepository categoryRep;
5: public ProductController()
6: { 7: productRep = new ProductRepository();
8: categoryRep = new CategoryRepository();
9: }
10:
11: public ActionResult QueryProduct()
12: { 13: ViewBag.Categories = categoryRep.SelectAll();
14: QueryProductViewModel qryPrd=new QueryProductViewModel();
15: return View(qryPrd);
16: }
17:
18: [HttpPost]
19: public ActionResult QueryProduct(QueryProductViewModel QryPrdView)
20: { 21: ViewBag.Categories = categoryRep.SelectAll();
22: QueryProductViewModel prds = new QueryProductViewModel()
23: { 24: CategoryID = QryPrdView.CategoryID
25: };
26: return View(prds);
27: }
28:
29: [OutputCache(Duration = 100, VaryByParam = "CategoryID")]
30: public ActionResult QueryProductPartialView(int CategoryID)
31: { 32: var result = productRep.Select(CategoryID);
33: QueryProductViewModel prds = new QueryProductViewModel()
34: { 35: CategoryID = CategoryID,
36: Products = result
37: };
38: return PartialView(prds);
39: }
40:
41: public ActionResult Create()
42: { 43: //請參考http://www.asp.net/mvc
44: }
45:
46: [HttpPost]
47: public ActionResult Create(Product collection)
48: { 49: //請參考http://www.asp.net/mvc
50: }
51: }
View
在查詢網頁上我們會產生一個可選擇不同產品類別(CategoryID)的DropDownList，然後下方會即時顯示查詢這屬於這類別的所有產品清單，顯示產品清單這部份，我們是用Partial View的方式來處理，所以我們也需撰寫QueryProductPartialView.cshtml，如下所示：
1./Views/Product/QueryProduct.cshtml
1: @model Mvc3Demo.ViewModels.QueryProductViewModel
2: <h2>QueryProduct</h2>
3:
4: @using (Html.BeginForm())
5: { 6: <div class="editor-field">Category Name:
7: @Html.DropDownListFor(model => model.CategoryID,
8: new SelectList(ViewBag.Categories,
9: "CategoryID", "CategoryName"),
10: new { onchange = "this.form.submit();" }) 11: </div>
12: }
13: @Html.Action("QueryProductPartialView", "Product", 14: new { CategoryID = Model.CategoryID })
2./Views/Product/QueryProductPartialView.cshtml
1: @model Mvc3Demo.ViewModels.QueryProductViewModel
2:
3: @if (Model.Products != null)
4: { 5: if (Model.Products.Count() > 0)
6: { 7: <table>
8: <tr>
9: <th>Total:@Model.Products.Count()</th>
10: <th>
11: CategoryID
12: </th>
13: <th>
14: ProductName
15: </th>
16: <th>
17: UnitPrice
18: </th>
19: </tr>
20:
21: @foreach (var item in Model.Products)
22: { 23: <tr>
24: <td>
25: @Html.ActionLink("Edit", "Edit", 26: new { id = item.ProductID }) 27: </td>
28: <td>
29: @item.CategoryID
30: </td>
31: <td>
32: @item.ProductName
33: </td>
34: <td>
35: @String.Format("{0:F}", item.UnitPrice) 36: </td>
37: </tr>
38: }
39:
40: </table>
41: }
42: }
以上即是本範例的程式碼，Output Cache可幫助提供更快速的網頁瀏覽經驗，Partial Output Cache 更可彈性的提供部分內容的Cache機制。
