[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。咱们运行起来看一下效果。



点击咱们加入的新功能【用户列表】

效果如下：


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