We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147870 Sep 26,2019 11:05 AM UTC Sep 27,2019 10:15 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: Menu Bar
Bhanu
Asked On September 26, 2019 11:05 AM UTC

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 [Syncfusion]
Replied On September 27, 2019 10:15 AM UTC

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, 
 
Regards, 
Vinoth Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon