iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 11
0
Modern Web

從Asp.Net MVC5的起跑點認識現代網站系列 第 11

Day11_View之PartialView(Partial、RenderPartial、Action)

PartialView的用途

前幾天在看Razor語法的時候我們用到了Layout和View,而現在又多一個Partial View,它其實只是View的某一部份。
當一個View設計的過度龐大或某個區塊需要被很多頁面重複使用時,為了避免寫重複的Code,或造成View太過複雜。通常,會將一個View中的某幾個部份獨立出來成為Partial View。

在命名上,為了能一眼與View做分辨,通常會在名稱面前統一加「__」。

建立一個View,並勾選partialView的選項
http://ithelp.ithome.com.tw/upload/images/20161226/201038088fZ01xjt46.png
將想抽離的程式碼抽出來放在Partial View的cshtml檔案

@using MVCProject.Models
@model Product
<tr>
    <td>
        @Html.DisplayFor(modelModel => Model.ProductName)
    </td>
    <td>
        @Html.DisplayFor(modelModel => Model.Price)
    </td>
    <td>
        @Html.DisplayFor(modelModel => Model.Active)
    </td>
    <td>
        @Html.DisplayFor(modelModel => Model.Stock)
    </td>
    <td>
        @Html.DisplayFor(modelModel => Model.IdDeleted)
    </td>
    <td>
        @Html.DisplayFor(modelModel => Model.Company.Name)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) |
        @Html.ActionLink("Details", "Details", new { id = Model.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id = Model.Id })
    </td>
</tr>

接著就是插入Partial View要放的位置

@foreach (var item in Model) {
    @Html.Partial("_Products", item);
}

Partial有四種多型@Html.Partial("_Products", item);

  • @Html.Partial("partialViewName")
  • @Html.Partial("partialViewName",model資料)
  • @Html.Partial("partialViewName",ViewDataDictionary)
  • @Html.Partial("partialViewName",model,ViewDataDictionary)
    上述我用第二個多型來做測試是可以接到資料的。
    http://ithelp.ithome.com.tw/upload/images/20161226/20103808bR5LQMlXMI.png

RenderPartial

語法:Html.RenderPartial("_Products", item); ,基本上與Partial View效果一樣,他們之間的差別在於

  • Partial:回傳一個Object
  • RenderPartial:回傳的是void
    上述兩個皆不會碰到Controller

@Html.Action

第三個方式是藉由Action的方式,他會去呼叫Controller並將相對應的Partial View加進頁面中。
Step1: 在Controller中加一個Action Method

 public ActionResult TimeNow()
        {
            return PartialView(DateTime.UtcNow.AddHours(8));
        }

Step2: 實作一個顯示時間的區塊,接著要為TimeNow建立一個Partial View。

    @model DateTime
    <h2>Current Time : @Model.ToShortTimeString()
    </h2>

Step3: 在Index引入partial View

@Html.Action("TimeNow")

結果:
http://ithelp.ithome.com.tw/upload/images/20161226/20103808vP2d6L1xCF.png
但這時有個小問題,在我們前幾天聊到Routing的時候,有提到只要URL符合Route的規則,就可以連到指定的Action,而我們剛為Index,寫了一個TimeNow的ActionResult,那麼在網址嘗試輸入http://localhost:62990/Products/TimeNow,結果發現。
http://ithelp.ithome.com.tw/upload/images/20161226/20103808MqzT4SncDL.png
畫面顯示出來了!那這個問題我們可以從昨天接觸到的ActionFilter進行解決,在TimeNow的Action Method上加一個Filter [ChildActionOnly],在執行一次結果,很輕鬆地就可以阻擋別人透過路由輸入看到一些不必要顯示的頁面。
http://ithelp.ithome.com.tw/upload/images/20161226/20103808J3qI5c01Fv.png


上一篇
Day10_ActionFilter
下一篇
Day12_Bootstrap3使用於Asp.net MVC5之GridSystem
系列文
從Asp.Net MVC5的起跑點認識現代網站30

尚未有邦友留言

立即登入留言