ASP.Net MVC開發基礎學習筆記（10）：分部檢視PartialView

qmdweb發表於2018-06-14
ASP.NETMVC筆記View

前言

本節我們來看分部檢視PartialView的用法。首先我們會建立一個簡單的靜態分部檢視。然後向這個檢視中傳入Model資料，使其變成動態分部檢視。接下來介紹使用ChildAction來呼叫分部檢視，這樣就可以加入一些對資料的分析處理。最後介紹用ajax無重新整理更新分部檢視資料以達到更好的使用者體驗。

簡單分部檢視

建立一個PartialView，在解決方案資源管理器中右鍵點選Shared資料夾選擇新增->MVC 5 分部頁(Razor)。如下圖所示：

檔案命名為PartialPage.cshtml，寫入如下程式碼：

<h2>This is a partial page.</h2>

這樣我們就建立好了一個簡單的分部檢視，現在我們來建立一個Controller和View來呼叫它。

在Controllers資料夾下建立PartialViewController.cs並寫入如下程式碼：

[csharp] view plain copy
  1. using System.Web.Mvc;  
  2. namespace SlarkInc.Controllers  
  3. {  
  4.     public class PartialViewController : Controller  
  5.     {  
  6.         public ActionResult Index()  
  7.         {  
  8.             return View();  
  9.         }  
  10.     }  
  11. }  

一個最簡單的Controller，就是為了讓大家好理解。

右鍵點選上面的"Index"函式名，選擇新增檢視。系統會在~\Views\PartialView\資料夾下建立Index.cshtml檔案，在這個檔案中寫入如下程式碼：

[csharp] view plain copy
  1. @{  
  2.     Layout = null;  
  3. }  
  4. <h2>Before PartialView</h2>  
  5. <hr />  
  6. @Html.Partial("PartialPage")  
  7. <hr />  
  8. @{  
  9.     Html.RenderPartial("PartialPage");  
  10. }  
  11. <hr />  
  12. <h2>After PartialView</h2>  

其顯示效果如下圖所示：

上面程式碼中第1-3行表示在分部檢視中不用載入模板。<hr />是下圖所示的分隔線。

從下面顯示結果可以看出，PatialPage.cshtml中的內容被顯示了兩次，這對應兩個不同的呼叫分部檢視的函式。第6行Html.Partial函式的作用是返回所呼叫的PartialView中的內容。其所在的View會負責輸出其返回的內容。而第9行的程式碼則是直接輸出所呼叫的PartialView中的內容。

如果還是不清楚Partial和RenderPartial的關係，可以這樣類比：比如我們有一個string叫s，Partial和RenderPartial的關係就相當於s.ToString()和Response.Write(s.ToString())的關係一樣。前者是返回內容，後者是輸出內容。

帶Model的分部檢視

前面只是建立了一個靜態分部檢視，下面我們來把它改造一下來顯示Model資料。

修改~\Views\PartialView\Index.cshtml檔案，程式碼如下：

[csharp] view plain copy
  1. @{  
  2.     Layout = null;  
  3. }  
  4. <h2>Before PartialView</h2>  
  5. <hr />  
  6. @Html.Partial("PartialPage",1)  
  7. <hr />  
  8. @{  
  9.     Html.RenderPartial("PartialPage",2);  
  10. }  
  11. <hr />  
  12. <h2>After PartialView</h2>  

上面的第6和9行，加入了第二個引數，是一個數字。這個數字就是我們要傳給PartialView的Model。

修改~\Views\Shared\PartialView.cshtml檔案，內容如下：

@model int
<h2>This is a partial page @Model.</h2>

第1行表示傳入的model是int型別。第2行吧這個數字顯示出來。

顯示結果如下：

使用ChildAction呼叫分部檢視

前面呼叫PartialView的方式都是通過一個View來呼叫PartialView。下面我們來介紹通過View呼叫ChildAction來返回PartialView。

首先在PartialViewController.cs裡面寫一個ChildAction程式碼如下：

[csharp] view plain copy
  1. [ChildActionOnly]  
  2. public PartialViewResult ChildAction(DateTime time)  
  3. {  
  4.     string greetings = string.Empty;  
  5.     if(time.Hour > 18)  
  6.     {  
  7.         greetings = "Good evening. Now is " + time.ToString("HH:mm:ss");  
  8.     }  
  9.     else if (time.Hour > 12)  
  10.     {  
  11.         greetings = "Good afternoon. Now is " + time.ToString("HH:mm:ss");  
  12.     }  
  13.     else  
  14.     {  
  15.         greetings = "Good morning. Now is " + time.ToString("HH:mm:ss");  
  16.     }  
  17.     return PartialView("ChildAction",greetings);  
  18. }  

第1行，在ChildAction函式的前面寫上[ChildActionOnly]表示這個Action只能作為ChildAction使用。

ChildAction返回partialView的好處就是在Action裡可以做一些處理和控制。這裡第4到16行就是根據獲得的時間返回不同的問候語。

第17行返回其對應的PartialView並傳入greetings作為Model。

右鍵點選ChildAction函式名選擇建立檢視，取名為ChildAction。寫入如下程式碼：

@model string
<h2>@Model</h2>

這個PartialView很簡單，就是把傳入的Model顯示出來。

修改~\Views\PartialView\Index.cshtml檔案，程式碼如下：

[csharp] view plain copy
  1. @{  
  2.     Layout = null;  
  3. }  
  4. <h2>Before PartialView</h2>  
  5. <hr />  
  6. @Html.Action("ChildAction", new { time = DateTime.Now })  
  7. <hr />  
  8. @{  
  9.     Html.RenderAction("ChildAction", new { time = DateTime.Now.AddHours(12) });  
  10. }  
  11. <hr />  
  12. <h2>After PartialView</h2>  

如圖中黃色所示，呼叫ChildAction同樣有兩種方法，Html.Action和Html.RenderAction。它們的區別跟Partial和RenderPartial是一樣的。這兩個函式的第一個引數是要呼叫的ChildAction的名字，第二個引數是要傳遞的引數。引數是用匿名物件的方法建立的Object。

執行結果如下：

ajax無重新整理更新分部檢視

要通過ajax來呼叫ChildAction返回PartialView，首先要去掉ChildAction開頭寫的[ChildActionOnly]。因為這種呼叫方法不算ChildAction呼叫。

然後修改~\Views\PartialView\Index.cshtml檔案，程式碼如下：

[html] view plain copy
  1. @{  
  2.     Layout = null;  
  3. }  
  4. <script src="~/Scripts/jquery-1.10.2.js"></script>  
  5. <h2>Before PartialView</h2>  
  6. <hr />  
  7. <div id="header"></div>  
  8. <hr />  
  9. <h2>After PartialView</h2>  
  10. <script>  
  11.     setInterval(LoadAction, 1000);  
  12.     function LoadAction()  
  13.     {  
  14.         var time = new Date();  
  15.         $.ajax({  
  16.             type: "POST",  
  17.             url: '@Url.Action("ChildAction", "PartialView")',  
  18.             data: { time: time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds()},  
  19.             datatype: "json",  
  20.             success: function (data) {  
  21.                 $('#header').html(data);  
  22.             },  
  23.             error: function (XMLHttpRequest, textStatus, errorThrown) {  
  24.                 alert(errorThrown);  
  25.             }  
  26.   
  27.         });  
  28.     }  
  29. </script>  

顯示的結果如下圖所示，問候語和時間會每秒更新並且頁面不重新整理。

上面程式碼中15-27行用到了Jquery的ajax方法獲取資料。第17行url的值是ChildAction對應的路由。第18行傳遞的資料是名為time的當前時間。第21行，如果成功獲取資料則將資料顯示出來。

第11行，通過SetInterval函式每秒呼叫一次LoadAction函式，更新一次資料。

這樣就完成了無重新整理更新區域性頁面資料。

相關文章