關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

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

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 <span>Hello Worlds</span>、 插入其他view

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

Controllers/HelloworldController.cs

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");
        }

    }
}

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

並且傳入ViewData["Talk"] 至 view

運行結果如下:

參考:

ASP.NET Core MVC web app - (0) 安裝 教學

ASP.NET Core MVC web app - (1) Controllers 教學

ASP.NET Core MVC web app - (2) Views 教學

ASP.NET Core MVC web app - (3) Models 教學

Getting started with ASP.NET Core MVC and Visual Studio


如果你喜歡我們的文章內容,請在這裡按個讚



最新文章推薦