ASP.NET Core Web应用手册开发咨询：MVC/Razor选型及代码参考需求

推荐使用ASP.NET Core Razor Pages，原因如下：

• 入门门槛低，文件与页面逻辑一一绑定，无需理解MVC的控制器、路由分层概念，适配你当前的知识储备
• 开发效率高，内置页面模型（PageModel）处理业务逻辑，能快速完成展示页面和管理面板的基础功能
• 完全兼容ASP.NET Core全特性，后续扩展功能无限制

1. 创建Razor Pages项目 #

打开终端执行命令：

dotnet new webapp -n ManualSite
cd ManualSite

2. 定义手册内容模型 #

在项目根目录创建Models文件夹，添加ManualContent.cs文件：

public class ManualContent
{
    public int Id { get; set; }
    public string Title { get; set; } = string.Empty;
    public string Content { get; set; } = string.Empty;
    public DateTime CreatedAt { get; set; } = DateTime.Now;
}

3. 配置简易数据存储（用于快速演示，生产环境可替换为数据库） #

创建Data文件夹，添加ManualContext.cs文件：

public class ManualContext
{
    public List<ManualContent> Contents { get; set; } = new List<ManualContent>();
}

在Program.cs中注册服务：

builder.Services.AddSingleton<ManualContext>();

4. 搭建管理面板页面 #

内容列表页（Pages/Admin/Index.cshtml） #

@page "/admin"
@model ManualSite.Pages.Admin.IndexModel
@inject ManualContext Context

<h1>手册内容管理</h1>
<a asp-page="./Create">添加新内容</a>
<table>
    <thead>
        <tr>
            <th>标题</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Context.Contents)
        {
            <tr>
                <td>@item.Title</td>
                <td>@item.CreatedAt.ToString("yyyy-MM-dd")</td>
                <td>
                    <a asp-page="./Edit" asp-route-id="@item.Id">编辑</a> |
                    <a asp-page="./Delete" asp-route-id="@item.Id">删除</a>
                </td>
            </tr>
        }
    </tbody>
</table>

对应的页面逻辑文件（Index.cshtml.cs）：

public class IndexModel : PageModel
{
    private readonly ManualContext _context;

    public IndexModel(ManualContext context)
    {
        _context = context;
    }

    public void OnGet()
    {
        // 加载内容列表
    }
}

添加内容页（Pages/Admin/Create.cshtml） #

@page "/admin/create"
@model ManualSite.Pages.Admin.CreateModel
@inject ManualContext Context

<h1>添加手册内容</h1>
<form method="post">
    <div>
        <label>标题：</label>
        <input asp-for="Content.Title" />
    </div>
    <div>
        <label>内容：</label>
        <textarea asp-for="Content.Content" rows="10"></textarea>
    </div>
    <button type="submit">保存</button>
    <a asp-page="./Index">返回</a>
</form>

对应的页面逻辑文件（Create.cshtml.cs）：

public class CreateModel : PageModel
{
    private readonly ManualContext _context;

    public CreateModel(ManualContext context)
    {
        _context = context;
    }

    [BindProperty]
    public ManualContent Content { get; set; } = new();

    public void OnGet()
    {
    }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }
        Content.Id = _context.Contents.Count + 1;
        _context.Contents.Add(Content);
        return RedirectToPage("./Index");
    }
}

5. 样式适配参考（匹配你提供的样式图） #

在wwwroot/css/site.css中添加以下样式，实现顶部导航、左侧目录+右侧内容的两栏布局，以及管理面板的卡片式风格：

/* 顶部导航栏 */
.navbar {
    background-color: #2c3e50;
    color: #fff;
    padding: 1rem;
}
.navbar a {
    color: #fff;
    margin-right: 1.5rem;
    text-decoration: none;
}

/* 内容区域两栏布局 */
.content-container {
    display: flex;
    margin: 2rem;
}
.sidebar {
    width: 20%;
    padding-right: 2rem;
    border-right: 1px solid #eee;
}
.main-content {
    width: 80%;
    padding-left: 2rem;
}

/* 管理面板表单样式 */
form div {
    margin-bottom: 1rem;
}
input, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}
button {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

内容的提问来源于stack exchange，提问作者RyuKazeko