How to create anchor tag href in ASP.NET C# code behind this href will open tab-content

Question

0.00/5 (No votes)

See more:

I want to open tab-content using bootstrap 4.1.3 css in c# asp.net code behind, Because tab-panel is binding from the database and also tab-content should be coming from database. This both works fine but how to give anchor tag href to open the open tab-content of particular tab-panel id.

What I have tried:

i am passing the id value of anchor tag but the output is going to next page which is not created a web page showing that error how to achieve this. To get the data the from the database i have created div tag class container in code behind itself and from there onwards each and every div tag has been created via code behind to achieve the tab-panel and tab-content. This is the ID that i have passed. Please explain me anyone to achieve this one. Thanks in advance

ID = row["ColumnName"].ToString()

Posted 21-Nov-18 17:38pm

Member 8583441

Updated 23-Nov-18 1:30am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

alexvw · Answer 1 · 2018-11-23T01:31:00

Hi there,

The Bootstrap (V4.1.1) structure I am using is as follows:

<asp:UpdatePanel ID="UpdPnelTabs" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <ContentTemplate>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li class="nav-item">
                <asp:LinkButton ID="lkTab01" runat="server" CssClass="nav-link active" role="tab" data-toggle="tab" href="#panel01" OnClientClick="document.getElementById('HDBtnTab01').click();">Obs.</asp:LinkButton>
            </li>
        
            <li class="nav-item">
                <asp:LinkButton ID="lkTab02" runat="server" CssClass="nav-link" role="tab" data-toggle="tab" href="#panel02" OnClientClick="document.getElementById('HDBtnTab02').click();">Com</asp:LinkButton>
            </li>
        </ul>
    </ContentTemplate>
</asp:UpdatePanel>

<!-- Tab panels -->
<asp:UpdatePanel ID="UpdPnelTabsContent" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="tab-content" style="margin-top:-16px;">
        
            <div class="tab-pane fade in show active" id="panel01" role="tabpanel">
                <asp:Button ID="HDBtnTab01" runat="server" style="display:none;" OnClick="HDBtnTab01_Click"/>
                <br> 
                <asp:UpdatePanel ID="UpdPnel01" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" class="row">
                    <Triggers> <asp:AsyncPostBackTrigger ControlID="HDBtnTab01" EventName="Click" /> </Triggers>
                    <ContentTemplate>
                        <asp:TextBox ID="txObs" runat="server" CssClass="form-control" TextMode="MultiLine" Rows="4" style="resize:none;"></asp:TextBox>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        
            <div class="tab-pane fade" id="panel02" role="tabpanel">
                <asp:Button ID="HDBtnTab02" runat="server" style="display:none;" OnClick="HDBtnTab02_Click"/>
                <br> 
                <asp:UpdatePanel ID="UpdPnel02" runat="server" UpdateMode="Conditional">
                    <Triggers> <asp:AsyncPostBackTrigger ControlID="HDBtnTab02" EventName="Click" /> </Triggers>
                    <ContentTemplate>
                        <asp:Label ID="LbCom" runat="server" CssClass="form-control"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

This set up allows me to apply bootstrap client-side behavior to handle tab navigation, while the hidden buttons enable me to invoke the required code behind.

Keep in mind:
That code example is not server-side built; but I link tabs linkbuttons to tabcontent hidden buttons from code behind, i.e. assign their OnClientClick attributes.

Moreover, I also have to handled their active status from code behind by changing their class from "nav-link active" to "nav-link" as needed. I must do this because in my case I decided to set ClientIdMode = "Static", which messes (in my case) with the natural behavior of bootstrap, ajax updatepanel, and so on.

If you work in automatic clientID mode, you should not need to worry about manually setting nav-items linkbuttons classes.

Hope this helps.

Cheers!