Member 8583441 Ответов: 1

Как создать якорный тег href в ASP.NET код C#, стоящий за этим href, откроет tab-content

Я хочу открыть tab-content с помощью bootstrap 4.1.3 css в c# asp.net код позади, потому что tab-panel привязывается к базе данных, а также tab-content должен поступать из базы данных. Это оба работает нормально, но как дать якорный тег href, чтобы открыть открытую вкладку-содержимое конкретного идентификатора вкладки-Панели.

Что я уже пробовал:

я передаю значение id тега anchor, но вывод идет на следующую страницу, которая не создана веб-страница, показывающая эту ошибку, как этого добиться. Чтобы получить данные из базы данных, я создал контейнер класса div tag в коде позади себя, и оттуда каждый тег div был создан с помощью кода позади для достижения tab-panel и tab-content. Это удостоверение личности, которое я передал. Пожалуйста, объясните мне, кто-нибудь, чтобы достичь этого. Заранее спасибо
ID = row["ColumnName"].ToString()

1 Ответов

Рейтинг:
0

alexvw

Привет,

Структура Bootstrap (V4.1.1), которую я использую, выглядит следующим образом:

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

Эта настройка позволяет мне применять поведение bootstrap на стороне клиента для обработки навигации по вкладкам, в то время как скрытые кнопки позволяют мне вызывать необходимый код позади.

Иметь в виду:
Этот пример кода не построен на стороне сервера; но я связываю вкладки linkbuttons со скрытыми кнопками tabcontent из кода позади, то есть присваиваю им атрибуты OnClientClick.

Кроме того, я также должен обрабатывать их активный статус из кода позади, изменяя их класс с "nav-link active" на "nav-link" по мере необходимости. Я должен это сделать, потому что в моем случае я решил установить ClientIdMode = "Static", что портит (в моем случае) естественное поведение bootstrap, ajax updatepanel и так далее.

Если вы работаете в автоматическом режиме clientID, вам не нужно беспокоиться о ручной настройке классов nav-items linkbuttons.

Надеюсь, это поможет.

Ваше здоровье!

Member 8583441

Извините за задержку, сэр, я взял ваш код, и он работает как шарм, но одна вещь, которую вы можете предоставить мне решение для active, которое должно быть объявлено в коде позади, а остальные вкладки должны быть скрыты, и когда откроется вторая вкладка, то содержимое вкладки должно открыться, остальные вкладки должны скрыться. Этот процесс я требовал в коде позади, потому что данные поступают из базы данных, и это нормально.