Question 160574 in ASP.NET Question posted in
The official documentation can be found here.

Is a specific tab page selected in Asp.net?

I am making an event to check if specific tab page in a tab control is active.

The point is, it will trigger an event if that tab page in a tab control is the currently selected tab. Any code that will give me what I need?

enter code here  <div class="col-lg-6">
                    <nav class="wow fadeInUp">
                        <div class="nav nav-underline border-bottom" id="nav-tab" role="tablist">
                            <button class="nav-link active"  data-bs-toggle="tab" data-bs-target="#tab-cement" type="button" id="btn_cement" role="tab" aria-selected="true">tab1</button>
                            <button class="nav-link ms-md-3" data-bs-toggle="tab" data-bs-target="#tab-realestate" type="button" role="tab" aria-selected="false">tab2</button>
                            <button class="nav-link ms-md-3" data-bs-toggle="tab" data-bs-target="#tab-infrastructure" type="button" role="tab" aria-selected="false">tab3</button>
                            <button class="nav-link ms-md-3" data-bs-toggle="tab" data-bs-target="#tab-chemicals" type="button" role="tab" aria-selected="false">tab4</button>
                        </div>
                    </nav>
Tags:

2

Answers


  1. 0

    @saurabh MAURYA Since the tab control needs to be clicked, try using the click event.

    Login or Signup to reply.
  2. 0

    Well, you can (and probably should) adopt one of "many" (a gazillion) examples of a tab control. Adopt "one" that you like that works well, and use it for the next 10 years.

    I like the jQuery.UI ones. However, often I just drop in a Radiobutton list, and use that!

    So, say I have these 2 buttons (RadiobuttonList)

            <asp:RadioButtonList ID="RadioButtonList1" runat="server" Height="40px"
            RepeatDirection="Horizontal" CssClass="rMyChoice" ClientIDMode="Static"
            AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
            <asp:ListItem>Upload Files</asp:ListItem>
            <asp:ListItem>My Files</asp:ListItem>
        </asp:RadioButtonList>

    So, then below above, I have 2 divs with content for the 2 buttons.

    so, then this:

            <div id="uploadfiles" runat="server" style="width: 30%">
            <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
                OnUploadComplete="AjaxFileUpload1_UploadComplete"
                OnClientUploadCompleteAll="AllDone" />
        </div>

    and

            <div id="myfiles" runat="server" style="width: 30%">
            <asp:GridView ID="GridFiles" runat="server"
           .etc. etc. etc.
        </div>

    So, now in code behind (or with JavaScript), I can click on either button, and thus this:

        protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        ShowArea();
    }

    void ShowArea()
    {
        if (RadioButtonList1.SelectedIndex == 0)
        {
            uploadfiles.Style.Add("Display", "normal");
            myfiles.Style.Add("Display", "none");
        }
        else
        {
            uploadfiles.Style.Add("Display", "none");
            myfiles.Style.Add("Display", "normal");
            LoadGridFiles();
        }

    }

    So, we simple hide one div, and show the other based on the RadioButton choice.

    I used a RadioButtonList, since THEN it automatic remembers which button is selected.

    The above result thus looks like this:

    enter image description here

    Or perhaps consider a jQuery.UI tab control. It "also" manages which tab (button) is selected for you, and again is rather easy to adopt.

    eg: (this is jQuery AND jQuery.UI).

            <div id="mytabs">
            <ul>
                <li><a href="#tab1">This is tab 1</a></li>
                <li><a href="#tab2">This is tab 2</a></li>
            </ul>

            <div id="tab1">
                <h3>this is stuff in tab one</h3>
            </div>

            <div id="tab2">
                <h3>this is stuff in tab two</h3>
            </div>

        </div>

        <script>
            $(function () {
                $("#mytabs").tabs();
            });
        </script>

    Result:

    enter image description here

    So, you can actually quite well "roll your own" tab system, and the above RadioButtonList example works well, since "which" button is selected is "managed" for you, and you do need a "wee bit" of code to set/change which div below is visible.

    And as noted, there are BOATLOADS of add-ins for free if you wish to adopting existing examples.

    However, I think going with a "wide spread" used add-in such as bootstrap, or jQuery.UI is a better choice, and thus the above jQuery.UI "tab" control example is a good choice, and a choice that has many "users" and thus "many" examples exist for the jQuery.UI tab control.

    You also not stated if you want the selected value for server side (code behind), or do you want the selected value for client side code?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search