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 以滑鼠右键按一下 新增检视 。
变更检视和版面配置页

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