一、前言

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

二、controller

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

新增controller

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

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

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

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

三、view

  • 視圖範本 Razor 是以架構為基礎的視圖範本：
     1. 具有 cshtml 副檔名。
     2. 提供使用 c # 建立 HTML 輸出的簡潔方式。

  • 控制器方法：
     1. 稱為 動作方法。
     2. 通常會傳回 IActionResult 或衍生自的類別 ActionResult。

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

  • 新增對應的action view
    在該controller 以滑鼠右鍵按一下 新增檢視 。
    新增對應的action view

  • 變更檢視和版面配置頁

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

    1
    2
    3
    4
    5
    6
    7
    @{
        ViewData["Title"] = "Movie List";
    }

    <h2>My Movie List</h2>

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <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定義方法

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

                return View();
            }

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @{
        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 的連結

    1
    2
    3
    <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裡的

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

  2. 「編輯」的controller 和 view

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // ->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

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

  • 一個叫做 MvcMovie 的 Model

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    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
        }
    }

五、結論與自我鼓勵

其實不難發現，基於 MVC 架構下，學習新的語言，並不會太艱難，主要還是該語言語法的根本運用較為困難、需要加以著墨。我目前就職半年時間，初略學過三種後端程式語言，各位全端工程師學過幾種呢？