iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
Modern Web

從零開始教你做AspNet7.0購物網站系列 第 16

Day-16 Asp.Net Core的 View視圖詳解(上)

  • 分享至 

  • xImage
  •  

視圖(View)介紹

前端頁面通常指的是視圖。在 MVC 架構中,由控制器來決定要回傳哪個視圖,根據控制器回傳的視圖路由,對應的頁面就會呈現相應的視圖內容。此外,控制器也可以回傳 JSON 格式的資料,不過這樣子就是前後端分離的做法了,這裡暫且不提。

基本上Asp.Net Core Mvc的view寫法跟一般的html,css,js差不太多,只是有些特有的語法

佈局檔案

View資料夾內會有一個_Layout.cshtml檔案
這個檔案是共用版面頁面。在這個檔案中,你可以定義整個應用程式中共用的 HTML 結構、CSS、JavaScript 和其他資源。
簡單來說,其他視圖可以插入到這個版面中,使得整個應用程式保持一致的外觀風格,像標題、導覽列、側邊欄和頁腳這些每一頁都一樣的東西慣例來說都會寫在這裡

內頁檔案

下面是一開始新增專案會給的範例

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <h2 class="display-4">@ViewBag.post.Name</h2>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

html的部分就跳過不說了主要說一些特別的寫法

這個是設置頁面標題:

@{
    ViewData["Title"] = "Home Page";
}

如果要換佈局檔案(Layout)

@{
    Layout = "~/Views/Admin/_Layout.cshtml";
}

不需要使用佈局檔案的話只要把Layout這個變數改成null就行了

在View使用計算語法

基本上要在前端的View使用像for,if,while之類的語法或者變數,只要在前面加個@符號就可以使用

在View使用Js語法

asp.net core要用Js會比較特別,要加下面:

@section Scripts {


    <script>
    
    </script>
}

然後js寫在script標籤裡就行了


上一篇
Day-15 在MVC模式中將資料從控制器傳遞到前端
下一篇
Day-17 Asp.Net Core的 View視圖詳解(下)
系列文
從零開始教你做AspNet7.0購物網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言