[macOS開發.NET Core] 一個簡單的WEB程式

上一篇咱們提到了在macOS下選進行開發。
咱們已經把工具準備完成了。
現在咱們做一個簡單的DEMO

創建WEB程式



之前咱們已經創建過WEB程式，並且成功的運行過數據

現在咱們創建一個頁面，並顯示出來。

在咱們的系統中，最常見的應該是Grid列表。

下麵咱們創建一個列表界面

Grid列表

首先創建一個Model
一個簡單的用戶類，非常簡單

using System;

namespace WEB._01.Models
{
    public class UserModel
    {
        /// <summary>
        /// ID
        /// </summary>
        public int UserId { get; set; }
        
        /// <summary>
        /// Name
        /// </summary>
        public string UserName { get; set; }
        
        /// <summary>
        /// 註冊時間
        /// </summary>
        public DateTime RegDateTime { get; set; }
        
        
    }
}

然後創建一個UserController

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using WEB._01.Models;

namespace WEB._01.Controllers
{
    public class UserController : Controller
    {
        // GET
        public IActionResult Index()
        {
            var user = new List<UserModel>();

            for (int i = 0; i < 10; i++)
            {
                user.Add(new UserModel()
                {
                    UserId = i,
                    UserName = i+1.ToString()+" name",
                    RegDateTime = DateTime.Now.AddDays(-i)
                    
                });
            }
            return View(user);
        }
    }
}

這裡註意一點，首先給實體賦值，然後將數據返回給前臺。

然後在Views目錄下創建一個User目錄，再創建一個View
目錄結構如下：


然後直接創建Index
代碼如下：

@model List<UserModel>

@{
    ViewBag.Title = "用戶列表";
    Layout = "_Layout";
}

<h2>用戶列表</h2>
<div class="panel panel-default todo-panel">
    <div class="panel-heading">@ViewData["Title"]</div>

    <table class="table table-hover">
        <thead>
        <tr>
            <td>用戶ID</td>
            <td>用戶名</td>
            <td>註冊時間</td>
        </tr>
        </thead>

        @foreach (var item in Model)
        {
            <tr>
                <td>@item.UserId</td>
                <td>@item.UserName</td>
                <td>@item.RegDateTime</td>

            </tr>
        }
    </table>
</div>

創建一個Table，並生成數據。

ok，最後一步加入到導航條中。

在Views>Share目錄下

加入導航欄中。

OK。咱們運行起來看一下效果。



點擊咱們加入的新功能【用戶列表】

效果如下：


至此，咱們新功能完成了。