iT邦幫忙

2021 iThome 鐵人賽

DAY 28
1
自我挑戰組

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

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

一、前言

  既然是全端工程師,就也帶一下後端程式語言與架構上的基礎內容。因為現職公司使用的是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 以滑鼠右鍵按一下 新增檢視
    新增對應的action view

  • 變更檢視和版面配置頁

  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
    }
}

五、結論與自我鼓勵

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


本文同步發佈於我的個人網站 Annie Code Life


上一篇
Day27:【技術篇】Webpack5 - Webpack 之運作流程
下一篇
Day29:【技術篇】初探打包工具的存在?
系列文
新手全端工程師的職場成長歷程30

1 則留言

0
kk00915
iT邦新手 5 級 ‧ 2021-10-12 23:11:51

我是0種QQ

我要留言

立即登入留言