09 View 介紹 - wycmaker/MVC-learning GitHub Wiki

View負責將Controller傳來的資料經過轉換呈現給使用者，所以View的重點在於頁面的呈現與設計，不應該有複雜的邏輯處理或運算，可以搭配HTML、CSS、JavaScript、JQuery、AJAX等前端技術，搭配Razor語法完成頁面的設計

與以往ASP.NET Web Form使用<% ... %>不同，ASP.NET MVC 3開始引入Razor語法，使用@符號進行表示，可以在View頁面撰寫C#語法，完成Contorller傳來的資料呈現工作

單一變數結尾不需加入;：

@DateTime.Now

有空白或運用運算子的話，必須用小括號包圍變數：

@(ViewBag.Click + ViewBag.Count)

多行敘述必須用大括號包圍：

@{ 
    var time = DateTime.Now;
    var Message = ViewBag.Message + "-" + time;
}

1. 在大括號中與HTML混合輸出，變數必須使用@符號

@{ 
    var time = DateTime.Now;
    var str = "Hello World!";
    var Message = str + "-" + time;
    <p>Message</p>
    <p>@Message</p>
}

結果：如果沒有使用@符號，會被當成文字輸出，而不是變數

2. 在大括號中，單獨輸出純文字必須使用@:，不然會發生錯誤

3. 使用@()同時輸出文字與變數，如果沒有使用小括號會產生錯誤，除非將變數與文字用空白隔開

4. 使用@Html.Raw()輸出HTML標籤

@{
    var item = "<ul><li>項目一</li></ul>";

    @item

    @Html.Raw(item)
}

結果： 只有使用@Html.Raw()方法才可以成功轉換HTML標籤

5. 在混合輸出中使用註解

@* 這是註解不會顯示 *@

6. Email格式的寫法，必須使用兩個@符號才能避免後面的字串被當成變數

<p>Test@@example.com</p>

在網站的開發中，多數會有主板的存在，設計出一個網站的樣板，通常包刮網站中最常用或是公用的部分，像是：LoGo、導覽列、功能列等等，透過內容頁面與主板頁面的繫結，呈現出完整的畫面，可以加速網頁頁面的開發速度

• _ViewStart.cshtml：在View檢視頁面執行之前，會先尋找Views資料中有沒有_ViewStart.cshtml，找到的話會預先載入並執行，通常被用來定義主板的Layout屬性，也可以在View中的各個資料夾建立不同的_ViewStart.cshtml，讓不同的Controller有不同的Layout屬性

• _Layout.cshtml：這個檔案放在/Views/Shared資料夾下，是整個網站的樣板，它定義好網站共用的區塊與設計，透過@RanderBody、@RanderPage與@RanderSection來進行與View檢視頁面的繫結

  1. RanderBody：放在主版頁面中，可以設定View檢視頁面的內容，在主板頁面的輸出位置

  2. RanderPage：在主板頁面中的特定位置，載入另一個檢視畫面

  @RanderPage("檢視畫面")

  3. RanderSection：在主板頁面中的具名區段進行檢視頁面的輸出，第一個參數為具名名稱，第二個參數用於設定具名區段是否確實存在

  主板頁面：

  @RanderSection("features", required: false)

  View檢視頁面：

  @section features { 
  //區段顯示內容
  }

在開發網站的時候，常常會有某些功能會在許多頁面用到，在不同的頁面常常會不斷的重複同樣的程式碼，為了避免這個問題，可以使用@helper方法來解決

成績範例：在專案新增App_Code資料夾，將@helper方法獨立出來，放在App_Code資料夾的UIHelper.cshtml裡，好處是可以讓多個View檢視頁面使用

@helper DisplayScore(int score)
{
    if (score >= 60)
    {
        @:及格
    }
    else
    {
        @:不及格
    }
}

View：

@{
    List<string> name = new List<string> { "Jack", "Merry", "Allen", "Jackson" };
    List<int> score = new List<int> { 60, 75, 84, 54 };
}

<h2>學生成績</h2>

<table class="table">
    <thead>
        <tr>
            <th>名字</th>
            <th>科目</th>
            <th>分數</th>
            <th>評比</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i <= 3; i++)
        {
            <tr>
                <td>@name[i]</td>
                <td>英文</td>
                <td>@score[i]</td>
                <td>@UIHelper.DisplayScore(score[i])</td>
            </tr>
        }
    </tbody>
</table>

結果：

@helper輔助方法雖然好用，但是再傳入參數的選擇上缺乏彈性，使用@function可以自己定義函式將類別當作參數傳入函式進行處理，也可以自記定義回傳值的資料型別

改寫上面的@helper範例：

@functions  {
    public static string DisPlayScore(int score)
    {
        if (score >= 60)
        {
            return "及格";
        }
        else
        {
            return "不及格";
        }
    }
}

View引用：

@UIHelper.DisPlayScore(score[i])

結果：

定義View可以參考的強行別資料，通常是Controller傳給View的參考資料類型

@model GuestBookTest.Models.GuestBook

在View中可以利用@using來加入參考的命名空間，有助於簡化程式碼，也可以透過更改~/Views/Web.config設定檔中的<namespace>區端達到相同的效果

@using System.Web.Mvc

從Controller的Action傳回資料給View的方式有兩種，一種是以弱型別取得資料，一種是以強行別取得資料

• 弱型別：使用ViewData、ViewBag、TempData或是ViewData.Model來傳送資料，其中使用ViewData.Model必須在View進行型別的轉換，將Model轉換成需要的型別

@{ var data = (GuestBookTest.Models.FormModel)Model;}

• 強行別：使用@model進行型別的宣告

@model GuestBookTest.Models.FormModel

在ASP.NET MVC中可以使用HTML輔助方法，透過特定參數的指定，可以產生相對應的HTML標籤，可以增加開發View的速度，因為HTML標籤是自動產生的，也可以避免在撰寫HTML語法的時候產生錯誤

• 產生超連結 — Html.ActionLink

// 使用方式：
// @Html.ActionLink("連結名稱", "Action")
<p>
    @Html.ActionLink("列表", "List")
</p>
// @Html.ActionLink("連結名稱", "Action", "Controller")
<p>
    @Html.ActionLink("列表", "List", "Home")
</p>
// @Html.ActionLink("連結名稱", "Action", routeValues, htmlAttributes)
<p>
    @Html.ActionLink("列表", "List" , new { id = 0 }, new {  @class = "link", @id = "home" })
</p>
// @Html.ActionLink("連結名稱", "Action", "Controller", routeValues, htmlAttributes)
<p>
    @Html.ActionLink("列表", "List", "Home", new { id = 0 }, new { @class = "link", @id = "home" })
</p>

產生的HTML標籤：

<p>
    <a href="/Form/List">列表</a>
</p>
<p>
    <a href="/Home/List">列表</a>
</p>
<p>
    <a class="link" href="/Form/List/0" id="home">列表</a>
</p>
<p>
    <a class="link" href="/Home/List/0" id="home">列表</a>
</p>

• 輸出表單 — Html.BeginForm

表單常用方法

範例：

@using (Html.BeginForm("CreateMessage", "Message"))
{
    <p>@Html.Label("標題：")</p>
    <p>@Html.TextBox("title")</p>
    <p>@Html.Label("內容")</p>
    <p>@Html.TextArea("content")</p>
    <input type="submit" value="新增" />
}

表單的強型別輔助方法：

範例：

@using (Html.BeginForm("EditSave", "Message"))
{
    @Html.HiddenFor(item => item.Id)
    <p>@Html.Label("標題：")</p>
    <p>@Html.TextBoxFor(item => item.Title)</p>
    <p>@Html.Label("內容")</p>
    <p>@Html.TextAreaFor(item => item.Content)</p>
    <input type="submit" value="修改" />
}

URL輔助方法的用途是幫開發者產生url網址，與Html.ActionLink或Html.RouteLink產生<a>標籤不同，URL輔助方法只產生url網址，主要用法有以下四種

1. Action：輸出對應的Controller Action的url，有許多的多載可以使用

2. RouteUrl：根據定義好的MapRoute的路由，經過比對後輸出url

3. Content：將需要的檔案的相對路徑，轉換成絕對路徑輸出

4. Encode：可以將內容經過HTML字元編碼後，輸出url

使用範例：

// Url.Action
@Url.Action("Index") <br />
@Url.Action("Index", "Home") <br />
@Url.Action("Index", "Home", new { content = "Test"}) <br />

// Url.RouteUrl
@Url.RouteUrl(new { Controller = "Home", Action = "Index", Id = 5}) <br />

// Url.Content
@Url.Content("~/Images/MVC.png") <br />

// Url.Encode
@Url.Action("Introduction", "Home", new { content = Url.Encode("你好")}) <br />

結果：

AJAX輔助方法可以幫助開發者快速建立AJAX的功能，下面介紹AJAX的超連結用法

Controller：

public ActionResult GetTimeNow()
{
    string time = Convert.ToString(DateTime.Now);
    return Content(time);
}

View：

// 必須引入此檔案才可以使用
@section scripts {
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}

@Ajax.ActionLink("取得時間", "GetTimeNow", new AjaxOptions { UpdateTargetId = "time" })


<p>現在時間：<label id="time"></label></p>

除了上述介紹的View當中的各種Razor用法外，還有許多用法沒有介紹到，這邊只是做個簡單的介紹，使用一些比較常用到的元素，如果有其他疑問可以找相關書籍或使用Google查詢

書籍：ASP.NET MVC 4 開發實戰

書籍：一次就懂 ASP.NET MVC 5.x 網站開發：Web應用的經典實務範例解析(Visual C# )