Views 基本介紹

在這裡，會介紹如何建立view，及如何在controller載入view

在開始說明view之前，先特別提一下layout

layout

在開發過程中，我們會將一些頻繁被使用到的HTML內容，統一寫在layout裡面 例如: header、footer、sidebar、menu、global js、global css…

layout的模板位於 Views/shared/_Layout.cshtml 其中，@RenderBody() 表示為常變動的view HTML區塊

Views/shared/_Layout.cshtml

...
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2016 - WebApplication2</p>
        </footer>
    </div>
...

如果不想使用layout，可以開啟 Views/_ViewStart.cshtml ，將 Layout = “_Layout”; 改成 Layout = “"; 就可以關閉layout Views/_ViewStart.cshtml

@{
    Layout = "_Layout";
}

建立view

接下來，開始說明如何建立view

在右側欄位中，會看見view資料夾以及範例資料夾、檔案 在view資料夾 >右鍵>Add>New Folder 先建立一個HelloWorld資料夾

接著，準備新增檔案 在view資料夾>HelloWorld>右鍵>Add>New Item ASP.NET>MVC View Page 在對話視窗底部可以設定檔案名稱 在這裡，我們先維持預設的 Index.cshtml

接著開啟 Views/HelloWorld/Index.cshtml 將內容修改成:

Views/HelloWorld/Index.cshtml

@{
    ViewData["Title"] = "在layout中會使用到這個標題";
    
    string[] weekDays = { "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" };
}

<h2>Hello World</h2>

<!--要從controller傳入的值-->
<p>@ViewData["Talk"]</p>


<!--寫入HTML-->
@Html.Raw("<span>Hello Worlds</span>")

<!--插入其他view-->
@Html.Partial("../Home/About.cshtml")
<!--列出weakDays陣列中的值-->
<ul>
    @foreach (var pd in weekDays)
    {
        <li>@pd</li>

    }
</ul>

在這裡，我們會輸出 ViewData[“Talk”] 、寫入HTML ```Hello

接下來開啟 HelloworldController.cs，修改內容如下:

Controllers/HelloworldController.cs

CVT2HUGO: Worlds</span>```、
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication2.Controllers
{
    public class HelloWorldController : Controller
    {
        public IActionResult Index()
        {

            ViewData["Talk"] = "Hi! My Friend";
            //預設會對應瀏覽器位置 http://localhost:port/HelloWorld/ 來載入 "Views/HelloWorld/Index.cshtml"
            return View();
            //也可以寫成這樣
            //return View("Views/HelloWorld/Index.cshtml");
        }

    }
}

CVT2HUGO: 插入其他view 在controllers裡面，如果不指定載入的View 則預設會根據網址上的位置來載入對應的view模板 當然，也可以自訂要載入的view

並且傳入ViewData[“Talk”] 至 view

運行結果如下:

參考:

ASP.NET Core MVC web app - (0) 安裝 [ 教學] (使用visual studio)

ASP.NET Core MVC web app - (1) Controllers [ 教學 ] (使用visual studio)

ASP.NET Core MVC web app - (2) Views [ 教學 ] (使用visual studio)

ASP.NET Core MVC web app - (3) Models [ 教學 ] (使用visual studio)

Getting started with ASP.NET Core MVC and Visual Studio