Trying to add tabs that only load when click on them.

[Bhanu]

I am trying to create a website which contains some tabs. I tried to link these tabs with "a rel='nofollow' href" link but it load whole page when clicking. So i search in internet and found a js that works for me. But the problem is that when page load or refresh whole content is load that pages it very slow loading. What i want is to create tabs that only load when click in them. First tabs that ia shown on main oage but other tabs load when click on them somewhat like youtube tabs of home, videos, playlist, community type..? I am nee to web development and still learning. I tried internet searches but most of them are not same thing and some of them are not that simple. Can i get some help?

[Vinoth Kumar Sundara Moorthy]

Hi Bhanu, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement and achieved it by rendering the Menu component in layout.cshtml page and navigate the page by using url property. Please find the below code snippet, 

 

Layout.cshtml 

<nav class="navbar navbar-inverse navbar-fixed-top"> 

    <div class="container"> 

        <div class="navbar-header"> 

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 

                <span class="sr-only">Toggle navigation</span> 

                <span class="icon-bar"></span> 

                <span class="icon-bar"></span> 

                <span class="icon-bar"></span> 

            </button> 

            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">WebApplication1</a> 

        </div> 

        <div class="menu-control"> 

            <ejs-menu id="menu" items="ViewBag.menuItems" asp-action="About"></ejs-menu> 

        </div> 

    </div> 

</nav> 

 

Homecontroller.cs 

public IActionResult Index() 

{ 

    //define the array of JSON 

    ViewBag.menuItems = GetMenuItems(); 

    return View(); 

} 

 

public IActionResult About() 

 

{ 

    ViewData["Message"] = "Your application description page."; 

    ViewBag.menuItems = GetMenuItems(); 

    return View(); 

} 

 

public List<MenuItem> GetMenuItems() 

{ 

    List<MenuItem> menuItems = new List<MenuItem>(){ 

        new MenuItem 

        { 

            Text = "File", 

            Url ="../Home/About" 

        }, 

    //.. 

    new MenuItem { Text = "Help", Url = "../Home/About" } 

    }; 

    return menuItems; 

} 

 

For your convenience we have prepared a sample. Please find the sample link in below, 

https://www.syncfusion.com/downloads/support/forum/147870/ze/WebApplication1-1974664249 

 

Regards, 

Vinoth Kumar S