Dynamic Tabs with showing razor pages in each tab

Radzen Studio Blazor Server
1

Can anyone help me with this.
How to add / remove the tabs. Tab Content is a razor page.So i want to show the same page whenerever i add a tab with the index .

type or paste code here

<div class="row">
    <div class="col-xl-11">
        <RadzenButton Click="@AddTab">Add Tab</RadzenButton>
        <RadzenButton Click="@RemoveTab">Remove Tab</RadzenButton>
        <Radzen.Blazor.RadzenTabs @ref="radzenTabs" Change=@OnChange SelectedIndex="@tabIndex" SelectedIndexChanged="@(args => NewIndexChange(args))">
            <Tabs>
           
                @foreach (var i in tabs)
                {
                <Radzen.Blazor.RadzenTabsItem Text="@($"Tab {i}")">
                
                    <RegisterForm  TabId="@tabIndex"></RegisterForm>

                </Radzen.Blazor.RadzenTabsItem>
                }
            </Tabs>
        </Radzen.Blazor.RadzenTabs>
    </div>

</div>

  List<TabModel> tabs = new List<TabModel>()
    {
        new TabModel { Text = "0" },

    };

    public class TabModel
    {
        public string Text { get; set; }

    }

    void NewIndexChange(int value)
    {
        tabIndex = value;
        string tempResult = $"current tab {value} selected on {DateTime.Now}";
        StateHasChanged();
    }
    public async Task AddTab()
    {
        tabs.Add(new TabModel { Text = $"Tab {tabs.Count + 1}" });
    }

    public async Task RemoveTab()
    {
        if (tabs.Count > 0)
        {
            tabs.RemoveAt(0);
        }
    }

But the thing is this when i execute this code. Razor page index is not changing with the tab. and the tab is not fitting the div. I cant remove the tab i click.
Can anyone please help me to find a solution on this.
Thank You!
> Blockquote

2

I ran the following page and everything looks OK to me. Not sure what the problem is.

<RadzenButton Click="@AddTab">Add Tab</RadzenButton>
<RadzenButton Click="@RemoveTab">Remove Tab</RadzenButton>
<Radzen.Blazor.RadzenTabs SelectedIndex="@tabIndex" SelectedIndexChanged="@(args => NewIndexChange(args))">
    <Tabs>
    
        @foreach (var i in tabs)
        {
        <Radzen.Blazor.RadzenTabsItem Text="@($"Tab {i.Text}")">
        
          @tabIndex

        </Radzen.Blazor.RadzenTabsItem>
        }
    </Tabs>
</Radzen.Blazor.RadzenTabs>

@code {
    int tabIndex = 0;

    List<TabModel> tabs = new List<TabModel>()
    {
        new TabModel { Text = "0" },
    };

    public class TabModel
    {
        public string Text { get; set; }
    }

    void NewIndexChange(int value)
    {
        tabIndex = value;
        string tempResult = $"current tab {value} selected on {DateTime.Now}";
        StateHasChanged();
    }

    public async Task AddTab()
    {
        tabs.Add(new TabModel { Text = $"Tab {tabs.Count + 1}" });
    }

    public async Task RemoveTab()
    {
        if (tabs.Count > 0)
        {
            tabs.RemoveAt(0);
        }
    }
}

tabs

1 Like
3

@korchev Thank you for looking into my issue.

  1. Im putting a razor page( ) instead @tabIndex variable. Inside . I want that razor page along with the Tab (add/remove). how to impliment that.!


<RadzenButton Click="@AddTab">Add Tab</RadzenButton>
<RadzenButton Click="@RemoveTab">Remove Tab</RadzenButton>
<Radzen.Blazor.RadzenTabs Change=@OnChange  SelectedIndex="@tabIndex" SelectedIndexChanged="@(args => NewIndexChange(args))">
    <Tabs>

        @foreach (var i in tabs)
        {
        <Radzen.Blazor.RadzenTabsItem Text="@($"Tab {i.Text}")">

         
            <RegisterForm TabId="@tabIndex"></RegisterForm>

        </Radzen.Blazor.RadzenTabsItem>
        }
    </Tabs>
</Radzen.Blazor.RadzenTabs>
``` ```
  1. Im getting the razor page in one tab. While adding new tab how to get this page in every tab uniquely. im not getting that. Im getting the razor page but while changing the tab razor page is as the first tab. Do i need to pass the TabIndex with the razor page ?

image
image880×141 4.91 KB

  1. When i add after removing a tab. its count is not properly coming. How to remove the selected Tab !
  1. Adding this tab its adding horizontally and after adding a few Addtab button is not seeing! I think that can solve changing the style in css.

Can you help to solve that issue please?
Thank you!

4

I am afraid I don't understand what the problem is and I didn't see anything out of the ordinary when I tested with the provided code. If you have a Radzen Professional subscription you can send us your application to info@radzen.com and we would troubleshoot.

5

ok.Thank you very much @korchev! I will send my issue. May be i couldnt convey the issue properly with you.