3. Scaffold (產生) Razor 頁面

主要解釋 Scaffold 產生的檔案，建議大家要詳細看過，
由於我的實作有修改一些內容，所以看起來看官網的文件有一些差異。

Razor ASP.NET Core 的語法參考

Razor 是將伺服器程式碼內嵌到網頁中的標記語法。 Razor語法包含 Razor 標記、c # 和 HTML。 通常包含 Razor 的檔案副檔名為 cshtml 。 Razor也可在 (razor) 的 Razor 元件檔案中找到。

頁面以下幾個功能與說明連結
@page 指示詞
@model 指示詞
版面配置頁
ViewData 和 Layout
ASP.NET Core 表單中的標籤協助程式
防止跨網站偽造要求 (XSRF/CSRF) 攻擊 ASP.NET Core
驗證標籤協助程式
標籤標記協助
輸入標記協助程式
ASP.NET Core 中的標籤協助程式

首頁

修改首頁 Pages/index.cshtml

<div class="text-center">
    <h1 class="display-4">Welcome Pellok 12屆 鐵人賽</h1>
    <a href="https://ithelp.ithome.com.tw/users/20072651/ironman/3347"><h1>Azure 的自我修煉</h1></a>
</div>

增加 Article 連結
修改 Pages/Shared/_Layout.cshtml，加入 Article 連結

<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
    <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark"asp-page="/Articles/Index">Article</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
        </li>
    </ul>
</div>

4. 使用資料庫

創建資料庫種子資料

在 Models 資料夾 新增 SeedData.cs 檔案

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using PellokITHome.Data;
using System;
using System.Linq;

namespace PellokITHome.Models
{
    public class SeedData
    {
        public static void Initialize(IServiceProvider serviceProvider)
        {
            using (var context = new PellokITHomeContext(
                serviceProvider.GetRequiredService<
                    DbContextOptions<PellokITHomeContext>>()))
            {
                // Look for any movies.
                if (context.Article.Any())
                {
                    return;   // DB has been seeded
                }

                context.Article.AddRange(
                    new Article
                    {
                        Title = "Day01 Azure 的自我修煉",
                        ReleaseDate = DateTime.Parse("2020-09-01"),
                        Link = "https://ithelp.ithome.com.tw/articles/10233277",
                        Count = 0
                    },

                    new Article
                    {
                        Title = "Day02 申請Azure帳號",
                        ReleaseDate = DateTime.Parse("2020-09-02"),
                        Link = "https://ithelp.ithome.com.tw/articles/10233285",
                        Count = 0
                    },

                    new Article
                    {
                        Title = "Day03 Resource Group 資源群組",
                        ReleaseDate = DateTime.Parse("2020-09-03"),
                        Link = "https://ithelp.ithome.com.tw/articles/10233371",
                        Count = 0
                    },

                    new Article
                    {
                        Title = "Day04 Dotnet Core 專案",
                        ReleaseDate = DateTime.Parse("2020-09-04"),
                        Link = "https://ithelp.ithome.com.tw/articles/10233562",
                        Count = 0
                    }
                );
                context.SaveChanges();
            }
        }
    }
}

新增種子初始設定式

修改 Program.cs 檔案，增加或修改以下內容

using Microsoft.Extensions.DependencyInjection;
using PellokITHome.Models;

        public static void Main(string[] args)
        {
            var host = CreateHostBuilder(args).Build();

            using (var scope = host.Services.CreateScope())
            {
                var services = scope.ServiceProvider;

                try
                {
                    SeedData.Initialize(services);
                }
                catch (Exception ex)
                {
                    var logger = services.GetRequiredService<ILogger<Program>>();
                    logger.LogError(ex, "An error occurred seeding the DB.");
                }
            }

            host.Run();
        }

如果遇到 'IServiceProvider' does not contain a definition for 'CreateScope' 代表using Microsoft.Extensions.DependencyInjection; 沒有加入

重建DB，執行程式，如果Article 的表格內沒有資料，就會創建預設資料

Git版控

查看狀態

git status

加入索引，提交版本

git add .
git commit -m "1. HomePage Article Link 2. DB SeedData"

上傳到雲端

git push

相關連結:

上一篇 Day10 實作官網 ASP.NET Core 教學(二)
下一篇 Day12 實作官網 ASP.NET Core 教學(四)