.net核心Blazor动态渲染cshtml部分视图组件 [英] .net core Blazor render cshtml partial view component dynamically

问题描述

在我的炽热 .razor 组件中，我有此代码...

In my blazor .razor component I have this code...

... stuff ...

@HistoricDeck

... stuff ...

@code
{
    protected GameDataModel GameData { get; set; }

    protected RenderFragment HistoricDeck { get; set; }

    protected async Task LoadDeck(FriendSupportModel deck, DeckType type)
    {
        HistoricDeck = builder =>
        {
            var deckFragment = new SupportDeck() {
                GameData = GameData,
                AssetList = GameData.AssetList,
                Deck = deck.normalDeck,
                Type = DeckType.Standalone,
            };
            builder.OpenElement(0, "div");
            builder.AddAttribute(1, "SupportDeck", deckFragment);
            builder.CloseElement();
        };
        StateHasChanged();
    }
}

LoadDeck由页面上的 @onclick = 事件调用，我希望将新的SupportDeck()动态呈现到页面中.我该怎么做呢?下面的代码不起作用(例如，未命中SupportDeck.cshtml中的断点).

LoadDeck is called by an @onclick= event on the page, I wish to dynamically render a new SupportDeck() into the page. How do I do this? The code below is non-functional (breakpoints in SupportDeck.cshtml are not hit, for example).

SupportDeck.cshtml.cs:

SupportDeck.cshtml.cs:

public class SupportDeck
{
    public FriendServantListModel Deck { get; set; }
    public DeckType Type { get; set; }
    public GameDataModel GameData { get; set; }
    public AssetList AssetList { get; set; }
}

SupportDeck.cshtml:

SupportDeck.cshtml:

@model Project.Views.Shared.SupportDeck
... stuff ...
@if (Model.Deck != null) {
<p>Hello world</p>
}
... stuff ...

这是我通常在非空白页面中呈现此视图片段的方式:

Here is how I would normally render this view fragment in a non-blazor page:

@{
    await Html.RenderPartialAsync("SupportDeck", new SupportDeck
    {
        Deck = Model.FriendSupport.normalDeck,
        Type = DeckType.Normal,
        GameData = Model.GameData,
        AssetList = Model.AssetList
    });
}

推荐答案

通过将 .cshtml 转换为 .razor 模板来解决，然后执行以下操作:

Solved by turning the .cshtml into a .razor template, then this:

        HistoricDeck = builder =>
        {
            builder.OpenComponent(0, typeof(SupportDeckItem));
            builder.AddMultipleAttributes(1, new Dictionary<string, object>() {
                {"Deck", deck},
                {"Type", deckType},
                {"GameDataItem", gameData},
                {"AssetList", gameData.AssetList}
            });
            builder.CloseComponent();
        };
        StateHasChanged();

这篇关于.net核心Blazor动态渲染cshtml部分视图组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！