asp.net c# managing bootstraps tabs

Question

So, I have 4 bootstrap tabs and on Page load one of it became active and display its data. I achieved that with // + all other tab-content here $(document).ready(function () { var tab = $("#ActiveTAB").val(); $(tab).tab("show"); }); and in code behind I can switch to another tab with ..... ActiveTAB.Value = "#TabMasuri"; .... The problem I have is that if I want to make one or two tabs disabled from code behind and I add runat="server", the inital setup with ActiveTAB is no longer working. On Page load I only see the tabs and I have to click on the tab to display data. How can I fix this?

Marius Vasile · Answer

I end up doing the management from client side, on Page load I have the tab disabled but it will become active if value of ActiveTAB is changed. The only value changed from code behind is ActiveTAB and for nav-links I removed runat="server" var tab = $("#ActiveTAB").val(); if (tab == "#TabMasuri") { $("#TabMasuri").removeClass("disabled"); } $(tab).tab("show");

Marius Vasile · Answer

Is not working as I wish it does. I can enable/disable from code behind, which I could do before but on switch it will not show the tab-content for the specific Tab but only the tab names and I have to click on the tab if (e.CommandName == "FormaManifestare") { // session with id for Masuri and mark TabMasuri as active Session["EID"] = eid; GetEvarisDataMasura(); TabMasuri.Attributes["class"] = TabMasuri.Attributes["class"].Replace("disabled", "").Trim(); ActiveTAB.Value = "#TabMasuri"; }

Prasad Raveendran · Answer

To manage enabling and disabling specific tabs while still being able to switch to them or enable them from the code-behind, you can use the runat="server" attribute in conjunction with a disabled CSS class rather than directly using the disabled attribute. Here's an example of how you might set up your HTML and code-behind to achieve this: HTML/ASPX: Code-behind (C#): // Disabling the first and last tab DivMicroclimatTab.Attributes.Add("class", "tab-pane fade pb-2 pt-2 mb-4 disabled"); LastTab.Attributes.Add("class", "tab-pane fade pb-2 pt-2 mb-4 disabled"); // Enabling the last tab from code-behind LastTab.Attributes.Remove("class"); // Switching to the last tab from code-behind ActiveTAB.Value = "#LastTab"; JavaScript: $(document).ready(function () { var activeTab = $("#ActiveTAB").val(); // Check if the active tab is disabled, if so, find the next available tab to show var tabToActivate = $(activeTab); if (tabToActivate.hasClass('disabled')) { tabToActivate = tabToActivate.next('.tab-pane:not(.disabled)'); if (!tabToActivate.length) { // If no enabled tabs found after the current one, set a default tab tabToActivate = $('.tab-pane:not(.disabled):first'); } } // Show the tab tabToActivate.tab("show"); }); This setup involves adding a disabled class to the first and last tabs to prevent their activation. Then, from the code-behind, you can enable a specific tab or switch to it by removing the disabled class from the tab. The JavaScript handles checking for disabled tabs and selects the next available enabled tab to display on page load.

Marius Vasile · Answer

Thank you Prasad The active tab will never be disabled, by default is set to I can't post the data with href but I try to manage two out of 4 tabs, so first and last should be disabled but I want to be able to enable them from code behind and also switch to one of them. I can do that right now having any of them disabled. Example, if I click on a link, marked with yellow in image below, it will switch to Masuri tab and show data. The problem is that if I use runat="server" on tab a link it will only show me the tab names with nothing loaded under active tab. To see data I have to click on that tab.

Prasad Raveendran · Answer

It seems that when you add runat="server" to the tabs to control their disabled/enabled status from the code-behind, it interferes with the jQuery setup to show the initial tab on page load. To address this issue, you can modify the script to handle the disabled tabs. One approach could be to store the active tab in a hidden field and then use JavaScript/jQuery to select the appropriate tab, considering the disabled state. Here's a revised approach: HTML/ASPX: JavaScript: $(document).ready(function () { var activeTab = $("#ActiveTAB").val(); // Check if the active tab is disabled, if so, find the next available tab to show var tabToActivate = $(activeTab); if (tabToActivate.prop('disabled')) { tabToActivate = tabToActivate.next('.tab-pane:not([disabled])'); if (!tabToActivate.length) { // If no enabled tabs found after the current one, set a default tab tabToActivate = $('.tab-pane:not([disabled]):first'); } } // Show the tab tabToActivate.tab("show"); }); Code-behind (C#): // You can disable a tab using C# as follows: MicroclimatTab.Attributes.Add("disabled", "disabled"); // Or enable a tab MicroclimatTab.Attributes.Remove("disabled"); This approach utilizes the disabled attribute for the tabs that you wish to disable or enable from the code-behind and adjusts the JavaScript logic to check for disabled tabs and select the next available enabled tab if the initially set tab is disabled. Make sure that the C# code for enabling/disabling the tabs happens before the JavaScript is executed to ensure the correct tab is set on page load.