1. Home
  2. Forum
  3. Blazor
  4. How to use page in tab control

How to use page in tab control

I have used blazor component in Syncfusion Tab control using render fragment (opencomponent method).I would like to know how to use blazor page in Tab control instead of blazor component


For example I have given razor page name as "CustomerPage".

Is there any alternative for open component method for blazor page..


Please help

It's my top most urgent 


5 Replies
NR Nevitha Ravi Syncfusion Team August 26, 2021 11:12 AM UTC

Hi Kins, 

Greetings from Syncfusion Support. 

We have validated your reported query and let you know that it is not feasible to render razor page (tab content) based on razor page name as string. So we suggest you to update the razor page path as key and render its component using RenderFragment in a Dictionary. You can fetch the corresponding razor page with the page name and get corresponding component. For the same we have prepared a sample which can be downloaded from the following link.  
 
Index.razor:     
        private Dictionary<string, RenderFragment> razorData { get; set; } 
        RenderFragment weatherView = builder => 
        { 
            builder.OpenComponent(0, typeof(FetchData)); 
            builder.CloseComponent(); 
        }; 
        public void OnAddItem() 
        { 
            var path = "FetchData"; 
            RenderFragment val; 
            razorData.TryGetValue(path, out val); 
            TabItems.Add(new TabData() { Header = path, ContentTemplate = val }); 
 
        } 
        protected override async Task OnInitializedAsync() 
        { 
            await base.OnInitializedAsync(); 
            razorData = new Dictionary<string, RenderFragment>(); 
            razorData.Add("FetchData", weatherView); 
        } 
   
Kindly try the above sample and let us know if this meets your requirement.  
   
Regards, 
Nevitha 


KI KINS December 9, 2021 01:50 PM UTC

sorry for late reply..



How to pass value when adding component in Tab


note:

parameter value should be object (model class)



Code:-


if (Tab.Items.Count <= 7)

            {

                Type type = null;



                if (string.IsNullOrEmpty(componentname)) await js.InvokeVoidAsync("LoadAlert", "Please update Component Name", "warning");

                else

                {

                    type = Type.GetType( componentname );


                    TabData = new List<TabItem>()

{

                        new TabItem() { Header = new TabHeader() { Text = PageName }, ContentTemplate = TabComp(type),Content=Tab.SelectedItem.ToString()}

                    };


                    index = Tab.Items.FindIndex(x => x.Header.Text == PageName);

                    SelectedTab = index;


                    //if (index == -1)

                    //{

                    await Tab.AddTab(TabData, Tab.Items.Count);

                    SelectedTab = Tab.Items.Count;

                    //}



                }

            }





SK Satheesh Kumar Balasubramanian Syncfusion Team December 10, 2021 08:26 AM UTC

Hi KINS, 
  
Thanks for your update. 
  
We have prepared a sample to pass value adding component in tab. Also, we suggest you to use either ContentTemplate (or) Content to render the tab content. 

  
Index.razor: 
@code{ 
    List<TabItem> TabData; 
    SfTab Tab; 
    RenderFragment weatherView = builder => 
    { 
        builder.OpenComponent(0, typeof(FetchData)); 
        builder.CloseComponent(); 
    }; 
    public async Task OnAddItem() 
    { 
        TabData = new List<TabItem>() 
        { 
                new TabItem() { Header = new TabHeader() { Text = "FetchData" }, ContentTemplate = weatherView} 
        }; 
        await Tab.AddTab(TabData, Tab.Items.Count); 
    } 
} 
  
Kindly try the above sample and If we misunderstood your requirement, kindly share the below details to serve you better? 
  • Share exact details of your requirement
  • Share image/video reference depicting your requirement

Regards, 
Satheesh Kumar B 


KI KINS December 10, 2021 12:25 PM UTC

Thanks for reply..


Please check my comments in below screencast


https://www.screencast.com/t/Os10CK3GfAW




SK Satheesh Kumar Balasubramanian Syncfusion Team December 13, 2021 03:53 PM UTC

Hi KINS,

Thanks for your update.

We have checked your shared details and prepared sample to pass value to FetchData component while adding in tab.


Index.razor: 
@code{
    List<TabItem> TabData;
    public class FetchInformation
    {
        public string Values { get; set; }
    }
    SfTab Tab;
    List<FetchInformation> FetchDatas;
    RenderFragment weatherView = builder =>
    {
        builder.OpenComponent(0, typeof(FetchData));
        builder.CloseComponent();
    };
    public async Task OnAddItem()
    {
        FetchDatas = new List<FetchInformation>
{
            new FetchInformation {Values="Hello World!,Hello Galaxy!,Hello Universe!" },
        };
        foreach (FetchInformation data in FetchDatas)
        {
            TabData = new List<TabItem>()
{
                new TabItem() { Header = new TabHeader() { Text = "FetchData" }, ContentTemplate = @<FetchData Values="@data.Values"></FetchData>}
        };
            }
            await Tab.AddTab(TabData, Tab.Items.Count);
        }
}
   
FetchData.razor: 
    <ul>
        @foreach (var item in Items)
        {
            <li>@item</li>
        }
    </ul>

@code {
    private WeatherForecast[] forecasts;
    [Parameter]
    public string Values { get; set; }

    List<string> Items { get; set; }

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
        Items = Values.Split(',').ToList();
    }
}

Kindly try the above sample and let us know if this meets your requirement.

Regards,
Satheesh Kumar B


Loader.
Up arrow icon