将 Razor 元素添加到 RazorPage 但我不想使用“html”语法，而是添加 using 和 instance

Question

使用 Visual Studio for Mac 我使用向导创建了一个名为

TestBlazorWebAssemblyProgressiveNetCoreApp

的解决方案，我选择了 Blazor 的 WebAssembly 示例，选择“托管 ASP.NET Core”和“渐进式 Web 应用程序”。然后我用这段代码改变了

NavMenu.razor

：

@foreach (Item item in m_Items)
{
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="@item.Path" Match="NavLinkMatch.All">
            <span class="oi @item.TextStyle" aria-hidden="true"></span> @item.Title
        </NavLink>
    </div>
}

我已经将此代码添加到

@code

部分：

public class Item
{
    public ComponentBase Component { get; }
    public string Path { get; }
    public string Title { get; }
    public string TextStyle { get; }

    public Item(ComponentBase component, string path, string title, string textStyle)
    {
        Component = component;
        Path = path;
        Title = title;
        TextStyle = textStyle;
    }
}

private List<Item> m_Items = new List<Item> {
    new Item(new TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Pages.Index(), "", "Home", "oi-home"),
    new Item(new TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Pages.Counter(), "counter", "Counter", "oi-plus"),
};

public void AddItem(Item item)
{
    m_Items.Add(item);
}

然后在

MainLayout.razor

中，我在最后添加了这段代码：

@code {
    private NavMenu NavMenuItem {
        get
        {
            NavMenu navMenu = new NavMenu();
            //navMenu.AddItem(new TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Shared.NavMenu.Item(new TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Pages.FetchData(), "fetchdata", "Fetch data", "oi-list-rich"));
            return navMenu;
        }
    }
}

并且我修改了注释

<NavMenu>

的 html 代码并添加了对

@NavMenuItem

属性的调用，如下所示：

@NavMenuItem
<!--<NavMenu />-->

当我使用实例时，菜单没有出现（但是属性代码

NavMenuItem

被执行）。如果我使用

<NavMenu />

标签，代码工作正常。

我想知道出了什么问题，是否有办法像标签一样将属性实例添加到剃刀页面。

谢谢

Answer 1

@NavMenuItem

通常调用对象的 .ToString() 方法。 https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#expression-encoding

<NavMenu />

调用构建器来渲染渲染片段。你正在以错误的方式解决这个问题。

查看示例： https://blazorrepl.telerik.com/wnkyQiEZ01lNWnBL48

Main.razor：

@example

<Example />

@code {
    Example example = new ();
}

例子.razor

<h1>You would have though this appears...</h1>

@code{
    public override string ToString()
    {
        return "Surprise!";
    }
}

输出：

Surprise!
You would have though this appears...

Answer 2

最后，在您的建议下，我找到了 Blazor University 的页面，最终我能够想出解决问题的方法。抱歉，如果我对 Blazor/Razor 的哲学有点迷茫，但今天是我使用这个框架进行测试的第三天。 我找到了一个解决方案，但代码中没有 instance al 元素。取而代之的是，我使用带有属性的元素作为参数来传递对象列表。然后在对象中，我将在此参数属性中注入的所有元素添加到使用 razor NavMenu 元素呈现菜单元素的属性中。

MainLayout中的代码是：

...
<NavMenu ExtraItems="ExtraItems" />
...
@code {
    private List<TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Shared.NavMenu.Item> ExtraItems { get; } = new List<TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Shared.NavMenu.Item>();
    protected override void OnInitialized()
    {
        TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Shared.NavMenu.Item item = new TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Shared.NavMenu.Item(new TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Pages.FetchData(), "fetchdata", "Fetch data", "oi-list-rich");
        ExtraItems.Add(item);
        base.OnInitialized();
    }
...
}

在 NavMenu 中是：

...
<nav class="flex-column">
    @foreach (Item item in m_Items)
    {
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="@item.Path" Match="NavLinkMatch.All">
                <span class="oi @item.TextStyle" aria-hidden="true"></span> @item.Title
            </NavLink>
        </div>
    }
</nav>
...
@code {
    public class Item
    {
        public ComponentBase Component { get; }
        public string Path { get; }
        public string Title { get; }
        public string TextStyle { get; }
        
        public Item(ComponentBase component, string path, string title, string textStyle)
        {
            Component = component;
            Path = path;
            Title = title;
            TextStyle = textStyle;
        }
    }

    public IReadOnlyList<Item> m_ExtraItems;
    [Parameter]
    public IReadOnlyList<Item> ExtraItems
    {
        get => m_ExtraItems;
        set
        {
            m_ExtraItems = value;
            foreach(Item item in m_ExtraItems)
            {
                AddItem(item);
            }
        }
    }

    private List<Item> m_Items = new List<Item> {
        new Item(new TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Pages.Index(), "", "Home", "oi-home"),
        new Item(new TestBlazorWebAssemblyProgressiveNetCoreApp.Client.Pages.Counter(), "counter", "Counter", "oi-plus"),
    };

    public void AddItem(Item item)
    {
        m_Items.Add(item);
    }
}

谢谢大家