[.NET Core] 使用ASP.NET Core 3.1建立一個範例，並從 C# 傳值到 cshtml 頁面中呈現

.Net Core 是一個未來趨勢，主打能夠跨平台運作，不用將自己的應用程式分為多種版本(Windows, Linux, MacOS等)去維護，這對開發來說是一大福音！

(環境：Windows 10, Visual Studio Enterprise 2019(16.7.2), .Net Core 3.1)

1. 必需使用 Visual Studio 2019 以上版本才可以用 .NET Core 3.1 (參考)，因為 2.1 版在 2021/08/21 就會結束支援，所以盡可能使用較新的套件(3.1)。
2. 開啟「Visual Studio 2019」 →「Create a new project」→選「ASP.NET Core Web Application」→Project name「CorePractice」→選「Web Application」(請注意上方要為.NET Core 與 ASP.NET Core 3.1，且右方的HTTPS不要勾)→「Create」
   
3. 目錄結構如下，目前只會用到「Index.cshtml」與「Index.cshtml.cs」

   │  appsettings.Development.json
   │  appsettings.json
   │  CorePractice.csproj
   │  Program.cs
   │  Startup.cs
   ├─bin
   ├─obj
   ├─Pages
   │  │  Error.cshtml
   │  │  Error.cshtml.cs
   │  │  Index.cshtml
   │  │  Index.cshtml.cs
   │  │  Privacy.cshtml
   │  │  Privacy.cshtml.cs
   │  │  _ViewImports.cshtml
   │  │  _ViewStart.cshtml
   │  │
   │  └─Shared
   ├─Properties
   └─wwwroot
   

4. 在「Index.cshtml.cs」內加上下列紅字

   Index.cshtml.cs
   
   using System;
   using Microsoft.AspNetCore.Mvc.RazorPages;
   using Microsoft.Extensions.Logging;
   
   namespace CorePractice.Pages
   {
       public class IndexModel : PageModel
       {
           private readonly ILogger<IndexModel> _logger;
   
           public IndexModel(ILogger<IndexModel> logger)
           {
               _logger = logger;
           }
   
           public void OnGet()
           {
               string[] names = new string[] { "Alfreda Stephenson",
                     "Swanson Swanson",
                     "Walker Pace",
                     "Katina Le",
                     "Lesley Calderon",
                     "Ruth Merrill",
                     "Cristina Buchanan",
                     "Gallegos May",
                     "Macdonald Lucas"};
               int num = 3;
               int[] age = new int[num];
               string[] name = new string[num];
               int[] family = new int[num];
               Random rnd = new Random();
               for (int i = 0; i < num; i++)
               {
                   age[i] = rnd.Next(50);
                   name[i] = names[rnd.Next(names.Length)];
                   family[i] = rnd.Next(5);
               }
               ViewData["age"] = age;
               ViewData["name"] = name;
               ViewData["family"] = family;
           }
       }
   }
   
   

5. 在「Index.cshtml」內加上下列紅字

   Index.cshtml
   
   @page
   @model IndexModel
   @{
       ViewData["Title"] = "Home page";
   
       int[] age = ViewData["age"] as int[];
       string[] name = ViewData["name"] as string[];
       int[] family = ViewData["family"] as int[];
   }
   
   <div class="text-center">
       <h1 class="display-4">Welcome</h1>
       <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
   </div>
   <table style="border-style: solid; margin-left: auto; margin-right: auto;">
       <tr>
           <th>名字</th>
           <th>歲數</th>
           <th>家庭人數</th>
       </tr>
       @for (var i = 0; i < name.Length; i++)
       {
           <tr>
               <td>@name[i]</td>
               <td>@age[i]</td>
               <td>@family[i]</td>
           </tr>
       }
   </table>
   
   <style>
       table td, table th {
           border: 1px solid black;
       }
   </style>
   

6. 編譯與建置(F5)後一個簡單的 ASP.NET Core 應用程式就完成了(Git)