asp.net c# managing bootstraps tabs

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");

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";
}

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.

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.

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.