Home > Software engineering >  How do I access the code block within a Blazor RenderFragment?
How do I access the code block within a Blazor RenderFragment?

Time:12-08

I'm new to programming, C# Blazor, and RenderFragments in general, so forgive me if this is a basic question.

I need to set up a tabbed dialog interface where different tabs appear based on which menu buttons are clicked. I set up a DevExpress menu item which appears as a button:

<DxMenuItem Text="States" IconCssClass="homeMenuButtonStates" CssClass="menuItemSm" Click="OnStatesBrowseClick" />

When the user clicks it, the OnStatesBrowseClick function is called:

    public void OnStatesBrowseClick()
    {
        tabName[tdiIndex] = "States";
        TdiNewTab(tabName[tdiIndex]);
    }

As you can see, its job is to assign a value to a member of a string array (tdiIndex was assigned "0"), and call the TdiNewTab method with argument tabName[tdiIndex] which evaluates to "States."

TdiNewTab has a switch statement which, for now, only has a case for "States."

    public void TdiNewTab(string switchTabName) {
    switch (switchTabName)
    {
        case "States":
            renderStatesBrowsePage(tdiIndex);
            break;
    }
    tdiIndex  ;
}

In the event that "States" comes up, it points to renderStatesBrowsePage which should create a tab.

    private RenderFragment renderStatesBrowsePage(int index)
{
    deleteMe  ;
    RenderFragment item = tabsChildContent =>
    {
        deleteMe  ;
        tabsChildContent.OpenComponent<DxTabPage>(0);
        tabsChildContent.AddAttribute(2, "Text", $"Tab # {index}");
        tabsChildContent.AddAttribute(3, "ChildContent", (RenderFragment)((tabPageChildContent) =>
        {
            tabPageChildContent.OpenComponent<States>(0);
            tabPageChildContent.CloseComponent();
        }));
        tabsChildContent.CloseComponent();
    };
    return item;
}

However, nothing happens. Using breakpoints, I determined that the block within "RenderFragment item = tabsChildContent =>" does not get executed. Indeed, when I put both "deleteMe "s in there, only the first one incremented the variable.

I'm at a loss as to why the block won't execute. Any advice would be much appreciated!

In response to answer from Mister Magoo:

I'm now trying to call the RenderFragment from within my markup:

<DxMenuItem Text="States" IconCssClass="homeMenuButtonStates" CssClass="menuItemSm" Click="StatesBrowseClick">
@if (statesBrowse == 1)
{
    @renderStatesBrowsePage(0);
}
</DxMenuItem>

@code
        public void StatesBrowseClick()
        {
        int statesBrowse = 1;
        }

However, nothing still happens. I made sure statesBrowse, which was initialized to "0" outside of the method, equaled 1 after the click. I also tried removing the @if statement (leaving just "@renderStatesBrowsePage(0);", and I got the same result.

Note: I'm using VS 2019, and in StatesBrowseClick, it tells me that "The variable 'statesBrowse' is assigned, but its value is never used." This seems inconsequential, though, as I have tried manually setting it to "1" and removing the "if" statement.

CodePudding user response:

The block won't execute because there is nothing executing it.

renderStatesBrowsePage returns a RenderFragment that needs to be rendered - but you are discarding it here:

public void TdiNewTab(string switchTabName) {
    switch (switchTabName)
    {
        case "States":
            // This returns a RenderFragment but you are discarding it 
            renderStatesBrowsePage(tdiIndex); 
            break;
    }
    tdiIndex  ;
}

It is hard to tell you what you should be doing without seeing more of your project, but generally a RenderFragment is rendered by adding it to the component markup

<div>some stuff</div>
<div>
@MyRenderFragment
</div>
  • Related