MVC5 + EF6 + Bootstrap3 (14) 分部視圖PartialView

本文轉載自查看原文 2015-01-19 07:03 17340 MVC5 + EF6 + Bootstrap3/ ASP.NET/ MVC

Slark.NET-博客園 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-partialview.html

上一節：MVC5 + EF6 + Bootstrap3 (13) 查看詳情、編輯數據、刪除數據

下一節：MVC5 + EF6 + Bootstrap3 (15) 應用ModelState和Data Annotation做服務器端數據驗證

前言

本節我們來看分部視圖PartialView的用法。首先我們會創建一個簡單的靜態分部視圖。然后向這個視圖中傳入Model數據，使其變成動態分部視圖。接下來介紹使用ChildAction來調用分部視圖，這樣就可以加入一些對數據的分析處理。最后介紹用ajax無刷新更新分部視圖數據以達到更好的用戶體驗。

簡單分部視圖

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

文件命名為PartialPage.cshtml，寫入如下代碼：

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

這樣我們就創建好了一個簡單的分部視圖，現在我們來創建一個Controller和View來調用它。

在Controllers文件夾下創建PartialViewController.cs並寫入如下代碼：

using System.Web.Mvc;
namespace SlarkInc.Controllers
{
    public class PartialViewController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

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

右鍵點擊上面的"Index"函數名，選擇添加視圖。系統會在~\Views\PartialView\文件夾下創建Index.cshtml文件，在這個文件中寫入如下代碼：

 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文件，代碼如下：

 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代碼如下：

 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文件，代碼如下：

 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文件，代碼如下：

 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>