Adding a tab in Blazor server app overrides the data sources (and names) from all previous tabs - tabs

Question

I'm still new to this, so pardon me if there's an obvious answer.
I have created a tabbed interface with an interesting flaw. Clicking on button 1 creates a tab with the correct DxDataGrid and tab name, but when button 2 is clicked, the newly created tab 2 and tab 1 show the data and tab name that apply to button 2. The same thing happens if I click the buttons in the opposite order, and the same behavior occurs upon subsequent button clicks.
This behavior may be related: when you create tab 1, the grid loads immediately, but you must click each tab (after tab two's creation) in order to get them to load.
<DxMenuItem Text="Button 1" Click='() => AddNewTab("Grid1")' />
<DxMenuItem Text="Button 2" Click='() => AddNewTab("Grid2")' />
<DxTabs RenderMode="TabsRenderMode.OnDemand">
#for (int i = 0; i < count; i++)
{
#switch (caseStmtTabName[tdiIndex])
{
case "Grid1":
#renderGrid1BrowsePage(tdiIndex)
break;
case "Grid2":
#renderGrid2BrowsePage(tdiIndex)
break;
}
}
</DxTabs>
#code
int tdiIndex = 0;
int count = 0;
string[] caseStmtTabName = new string[99];
public void AddNewTab(string tabName)
{
tdiIndex++;
caseStmtTabName[tdiIndex] = tabName;
count++;
}
private RenderFragment renderGrid1BrowsePage(int index)
{
RenderFragment grid1Item = grid1TabChildContent =>
{
grid1TabChildContent.OpenComponent<DxTabPage>(0);
grid1TabChildContent.AddAttribute(1, "Text", "Grid1");
grid1TabChildContent.AddAttribute(2, "ActiveTabIndex", index);
grid1TabChildContent.AddAttribute(3, "ChildContent", (RenderFragment)((grid1TabPageChildContent) =>
{
grid1TabPageChildContent.OpenComponent<Grid1>(0);
grid1TabPageChildContent.CloseComponent();
}));
grid1TabChildContent.CloseComponent();
};
//tdiIndex++;
return grid1Item;
}
private RenderFragment renderGrid2BrowsePage(int index)
{
RenderFragment grid2Item = grid2TabChildContent =>
{
grid2TabChildContent.OpenComponent<DxTabPage>(0);
grid2TabChildContent.AddAttribute(1, "Text", "Grdi2");
grid2TabChildContent.AddAttribute(2, "ActiveTabIndex", index);
grid2TabChildContent.AddAttribute(3, "ChildContent", (RenderFragment)((grid2TabPageChildContent) =>
{
grid2TabPageChildContent.OpenComponent<Grid2>(0);
grid2TabPageChildContent.CloseComponent();
}));
grid2TabChildContent.CloseComponent();
};
//tdiIndex++;
return grid2Item;
}
I understand that rewriting the "renderGridPages" for each button is WET, but passing a string into the data type will be another task for another day (along with a few other things above).
Thanks for any advice you have!

Answer 1

Your code is behaving as you've coded it.
Click on button 1 and you increment tdiIndex to 1 and add "Grid1" to caseStmtTabName at index 1. You display one tab.
Click on button 2 and you increment tdiIndex to 2 and add Grid2 to caseStmtTabName at index 2.
Now look at you loop code:
#switch (caseStmtTabName[tdiIndex])
At this point tdiIndex is 2 for both loop iterations and thus caseStmtTabName[tdiIndex] returns "Grid2" and thus
case "Grid2":
#renderGrid2BrowsePage(tdiIndex)
break;
gets called both times. Exactly what I believe you see.
I don't use DevExpress so can't produce an exact answer. Here's a generic version of your code using standard Blazor components and Bootstrap to demonstrate the techniques you can use.
#page "/"
<div class="m-2 p-2">
<button class="btn btn-primary" #onclick="() => AddTab(1)">Add Grid 1</button>
<button class="btn btn-dark" #onclick="() => AddTab(2)">Add Grid 2</button>
<button class="btn btn-info" #onclick="() => AddTab(3)">Add Grid 3</button>
</div>
<ul class="nav nav-pills">
#foreach (var tab in this.displayTabs)
{
<li class="nav-item">
<a class="nav-link #this.ActiveTab(tab) hand" aria-current="page" #onclick="() => SetActiveContent(tab)">#tab.Name</a>
</li>
}
</ul>
#foreach (var tab in this.displayTabs)
{
<div #key="tab" class="#this.ShowTab(tab)">
#tab.Content
</div>
}
<style>
.show-content {
display: block;
}
.hide-content {
display: none;
}
.hand {
cursor: pointer;
}
</style>
#code {
class Tab
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public RenderFragment? Content { get; set; }
}
List<Tab> tabs = new();
IEnumerable<Tab> displayTabs => this.tabs.OrderBy(item => item.Id);
int activeTabIndex;
string ActiveTab(Tab tab)
=> GetActiveIndex() == tab.Id ? "active" : string.Empty;
string ShowTab(Tab tab)
=> GetActiveIndex() == tab.Id ? "show-content" : "hide-content";
void SetActiveContent(Tab tab)
=> activeTabIndex = tab.Id;
int GetActiveIndex()
{
if (tabs.Any(item => item.Id == activeTabIndex))
return activeTabIndex;
if (tabs.Count > 0)
return tabs[0].Id;
return 0;
}
void AddTab(int index)
{
if (tabs.Any(item => item.Id == index))
{
tabs.Remove(tabs.First(item => item.Id == index));
return;
}
tabs.Add(new Tab()
{
Id = index,
Name = $"Grid {index}",
Content = (builder) =>
{
builder.AddMarkupContent(0, $"<div>Hello {index}</div>");
}
});
activeTabIndex = index;
}
}