如何在ASP.NET中创建锚标记href这个href后面的C＃代码将打开tab-content [英] How to create anchor tag href in ASP.NET C# code behind this href will open tab-content

问题描述

我想在c＃asp.net代码后面使用bootstrap 4.1.3 css打开tab-content，因为tab-panel是从数据库绑定的，tab-content也应该来自数据库。这两个工作正常，但如何给锚标签href打开特定标签面板ID的打开标签内容。



我尝试过：



i我传递的是锚标签的id值，但是输出转到下一页，而不是创建一个显示错误的网页如何实现这一点。为了从数据库中获取数据，我在代码后面创建了div标签类容器，从那里开始，每个div标签都是通过后面的代码创建的，以实现tab-panel和tab-content。这是我通过的ID。请解释我实现这一点的任何人。提前致谢

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()

推荐答案

你好，



我使用的Bootstrap（V4.1.1）结构如下：

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>

此设置允许我应用引导程序客户端行为来处理选项卡导航，而隐藏按钮使我能够调用所需的代码。



请记住：

代码示例不是服务器端构建的 ;但我将标签链接按钮链接到后面代码的tabcontent隐藏按钮，即分配他们的OnClientClick属性。



此外，我还必须根据需要将代码从nav-link active更改为nav-link，从代码中处理其活动状态。 我必须这样做，因为在我的情况下，我决定设置ClientIdMode =Static，这会使用bootstrap，ajax updatepanel等自然行为混淆（在我的情况下）。



如果你在自动clientID模式下工作，你不必担心手动设置导航项链接按钮类。



希望这会有所帮助。



干杯！

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!

这篇关于如何在ASP.NET中创建锚标记href这个href后面的C＃代码将打开tab-content的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！