如何在Umbraco 11后台获取并展示自定义表数据

一、准备自定义表实体与数据库上下文 #

先定义对应自定义表的实体类，并配置数据库上下文，确保能正确读取数据：

1. 实体类 #

public class CustomEntry
{
    public int Id { get; set; }
    public string FullName { get; set; }
    public string EmailAddress { get; set; }
    public DateTime SubmittedDate { get; set; }
    // 按需添加自定义表的其他字段
}

2. 数据库上下文 #

public class CustomDbContext : DbContext
{
    public CustomDbContext(DbContextOptions<CustomDbContext> options) : base(options) { }
    public DbSet<CustomEntry> CustomEntries { get; set; }
}

3. 注册上下文到依赖注入 #

在Program.cs中添加：

builder.Services.AddDbContext<CustomDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("umbracoDbDSN")));

二、创建后台授权控制器（解决控制器/视图模型错误） #

后台控制器必须继承UmbracoAuthorizedController以获取管理面板权限，同时注入数据库上下文获取数据：

public class CustomEntriesController : UmbracoAuthorizedController
{
    private readonly CustomDbContext _dbContext;

    public CustomEntriesController(CustomDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public IActionResult Index()
    {
        // 按提交时间倒序获取所有条目，和Umbraco Forms排序逻辑一致
        var entries = _dbContext.CustomEntries.OrderByDescending(x => x.SubmittedDate).ToList();
        return View(entries);
    }
}

常见错误排查：

• 未继承UmbracoAuthorizedController：会导致后台访问权限不足，返回401
• 视图模型不匹配：确保视图继承的泛型与控制器返回的集合类型一致

三、创建仿表单样式的后台视图 #

将视图放在Views/CustomEntries/Index.cshtml，使用Umbraco原生后台样式类，实现和表单条目完全一致的展示效果：

@inherits Umbraco.Web.Mvc.UmbracoViewPage<List<CustomEntry>>
@{
    Layout = "~/Views/Shared/Layouts/UmbracoDashboard.cshtml";
    ViewBag.Title = "自定义条目列表";
}

<div class="umb-panel">
    <div class="umb-panel-header">
        <h1 class="umb-panel-header__title">@ViewBag.Title</h1>
    </div>
    <div class="umb-panel-body umb-scrollable">
        <table class="umb-table">
            <thead class="umb-table__head">
                <tr class="umb-table__row">
                    <th class="umb-table__header-cell">ID</th>
                    <th class="umb-table__header-cell">姓名</th>
                    <th class="umb-table__header-cell">邮箱</th>
                    <th class="umb-table__header-cell">提交时间</th>
                    <th class="umb-table__header-cell">操作</th>
                </tr>
            </thead>
            <tbody class="umb-table__body">
                @foreach (var entry in Model)
                {
                    <tr class="umb-table__row">
                        <td class="umb-table__cell">@entry.Id</td>
                        <td class="umb-table__cell">@entry.FullName</td>
                        <td class="umb-table__cell">@entry.EmailAddress</td>
                        <td class="umb-table__cell">@entry.SubmittedDate.ToString("yyyy-MM-dd HH:mm:ss")</td>
                        <td class="umb-table__cell">
                            <button class="btn btn-sm btn-outline-secondary umb-btn umb-btn--secondary">编辑</button>
                            <button class="btn btn-sm btn-outline-danger umb-btn umb-btn--danger">删除</button>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        @if (!Model.Any())
        {
            <div class="umb-empty-state">
                <p class="umb-empty-state__text">暂无提交条目</p>
            </div>
        }
    </div>
</div>

四、注册后台菜单入口 #

让自定义条目列表出现在Umbraco管理面板的菜单中，创建组件与 composer：

1. 菜单组件 #

public class CustomEntriesMenuComponent : IComponent
{
    private readonly IUmbracoTreeService _treeService;

    public CustomEntriesMenuComponent(IUmbracoTreeService treeService)
    {
        _treeService = treeService;
    }

    public void Initialize()
    {
        // 在"内容"菜单下添加自定义节点，可按需修改位置
        var menuItem = new MenuItem("customEntries", "自定义条目")
        {
            Icon = "icon-form", // 使用和表单一致的图标
            RoutePath = "/CustomEntries/Index"
        };
        _treeService.MenuItems.Add(menuItem);
    }

    public void Terminate() { }
}

2. 注册组件 #

[ComposeAfter(typeof(CoreComposer))]
public class CustomEntriesComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.Components().Append<CustomEntriesMenuComponent>();
    }
}

五、验证效果 #

启动Umbraco项目，登录管理面板，点击新增的"自定义条目"菜单，即可看到和Umbraco Forms条目完全一致的列表样式，展示自定义表的所有数据。

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