Day28：【技術篇】ASP DOT NET CORE 的 MVC 基礎入門

2021 iThome 鐵人賽

DAY 28

自我挑戰組

新手全端工程師的職場成長歷程系列第 28 篇

13th鐵人賽

Annie

2021-10-11 16:40:20

1583 瀏覽

分享至

一、前言

既然是全端工程師，就也帶一下後端程式語言與架構上的基礎內容。因為現職公司使用的是ASP DOT NET CORE，但先前在培訓營學習到的是 Ruby，所以內文會有稍作比較與解釋的地方，若有誤解之處再請指正。

二、controller

在 方案總管 中，以滑鼠右鍵按一下 controllers > 加入 > 控制器。

新增controller

MVC 會根據傳入的 URL，叫用控制器類別以及它們內的動作方法。 MVC 使用的預設 URL 路由邏輯，會使用如下的格式來判斷要叫用的程式碼：

/[Controller]/[ActionName]/[Parameters]

可以在 Startup.cs 檔案的 Configure 方法中設定路由格式。

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

三、view

視圖範本 Razor 是以架構為基礎的視圖範本：
1. 具有 cshtml 副檔名。
2. 提供使用 c # 建立 HTML 輸出的簡潔方式。
控制器方法：
1. 稱為動作方法。
2. 通常會傳回 IActionResult 或衍生自的類別 ActionResult。

/// <summary>
/// 申請須知
/// </summary>
[Route("~/rental/site/{alias}/note")]
public IActionResult Note(string alias)
{
    return View($"~/Views/Rental/{alias.ToLower()}/Note.cshtml");
}

新增對應的action view
在該controller 以滑鼠右鍵按一下 新增檢視 。
變更檢視和版面配置頁

1. 變更瀏覽器標題、主要標題、次要標題。

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

2. 變更配置檔案中的標題、頁尾及功能表連結

<head>
...
    // 標題
    <title>@ViewData["Title"] - Movie App</title>
...
</head>
<body>
    <header>
        <div class="container">
        // 功能表連結
            <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>
            ...
        </div>
    </header>

    <footer class="border-top footer text-muted">
        <div class="container">
        // 頁尾
            &copy; 2020 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
</body>

使用controller將變數傳遞至view

1. 在controller定義方法

public IActionResult Welcome(string name, int numTimes = 1)    // 在括弧裡宣告預設變數
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }

2. 在view裡用迴圈渲染出定義好的變數

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

在view裡帶入動作對應之路徑

1. 新增Edit、Details 和 Delete 的連結

<a asp-action="Edit" asp-route-id="@item.ID">編輯</a> |
<a asp-action="Details" asp-route-id="@item.ID">詳細</a> |
<a asp-action="Delete" asp-route-id="@item.ID">刪除</a>

p.s.等同於ruby裡的

<%= link_to '編輯', edit_activity_path(activity) %>
<%= link_to activity_path(activity.id) %>
<%= link_to '刪除', activity_path(activity), method: "delete", data: { confirm: "確認刪除" } %>

2. 「編輯」的controller 和 view

// ->controller
// GET: Movies/Edit/5
public async Task<IActionResult> Edit(int? id)
{
    if (id == null)
    {
        return NotFound();
    }

    var movie = await _context.Movie.FindAsync(id);
    if (movie == null)
    {
        return NotFound();
    }
    return View(movie);
}

四、model

資料的屬性：
1. 必要 -表示屬性是必要欄位
2. DisplayName –定義要用於表單欄位和驗證訊息的文字
3. StringLength –定義字串欄位的最大長度
4. 範圍 –提供數值欄位的最大值和最小值
5. 系結–將參數或格式值系結至模型屬性時要排除或包含的欄位
6. ScaffoldColumn –允許隱藏來自編輯器表單的欄位
一個叫做 MvcMovie 的 Model

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace MvcMovie.Models
{
    public class Movie
    {
        public int Id { get; set; }                // Id: int
        public string Title { get; set; }          // Title: string

        [Display(Name = "Release Date")]           // 驗證 Release Date 此欄位
        [DataType(DataType.Date)]                   
        public DateTime ReleaseDate { get; set; }  
        public string Genre { get; set; }          // Genre: string

        [Column(TypeName = "decimal(18, 2)")]       
        public decimal Price { get; set; }         // Price: decimal
    }
}