Сохранять загрузочную вкладку после обратной передачи С#

В настоящее время у меня проблема с сохранением закладки бутстрапа после обратной передачи файла. Код выглядит следующим образом

<script type="text/javascript">

                $('#myTab a[href="#image"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active"); 
                    $(this).addClass('active');
                    $(this).tab('show');
                })

                $('#myTab a[href="#information"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active");
                    $(this).addClass('active');
                    $(this).tab('show');
                })

                $('#myTab a[href="#password"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active");
                    $(this).addClass('active');
                    $(this).tab('show');
                })

                $('#myTab a[href="#account"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active");
                    $(this).addClass('active');
                    $(this).tab('show');
                })

    </script>

Может ли кто-нибудь просветить меня о том, как сохранить этот бутстрап после обратной передачи?

Ответы

Ответ 1

Ну, у меня уже был этот вопрос, и я решил это так:

Включите новый HiddenField на своей странице и установите его значение для первой tab которая должна быть показана:
```
<asp:HiddenField ID="hidTAB" runat="server" Value="image" />
```
На каждой функции click вы определили, чтобы чередовать tabs, установите значение HiddenField на HiddenField tab.
```
document.getElementById('<%=hidTAB.ClientID %>').value = "image";
```
В вашей функции jQuery document.ready используйте значение HiddenField для HiddenField на последнюю вкладку, открытую перед Postback.
```
$(document).ready( function(){
    var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
    $( '#myTab a[href="' + tab + '"]' ).tab( 'show' );
});
```

Здесь Документация загрузки Bootstrap и здесь документация jQuery Ready

Ответ 2

Со ссылкой на приведенные выше идеи вот как я это сделал (полный код включен)

На странице HTML в разделе <Head>

<script type="text/javascript">
    $(document).ready(function () {
        var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
        $('#myTabs a[href="' + tab + '"]').tab('show');
    });
</script>

в разделе <body> введите скрытое поле

<asp:HiddenField ID="hidTAB" runat="server" Value="#tab1" />

а также в разделе <body> содержится связанный с Bootstrap 3.0 код

<ul class="nav nav-tabs" id="myTabs">
  <li><a href="#tab1" data-toggle="tab">Home page</a></li>
  <li><a href="#tab2" data-toggle="tab">another page</a></li>
</ul>

Не устанавливайте активную вкладку (это устанавливается начальным значением = "# tab1" в Hiddenfield).

Затем добавьте кнопку на вкладку2 DIV

вот так:

<div class="tab-pane" id="tab2">
  <asp:FileUpload ID="FileUpload2" runat="server" /> (note this example is for uploading a file)
  <asp:Button ID="FileUploadButton" runat="server" Text="Upload File" onclick="FileUploadButton_Click" />
</div>

Наконец, добавьте свой код С#, чтобы установить значение скрытого поля

protected void FileUploadButton_Click(object sender, EventArgs e)
{
      hidTAB.Value = "#tab2";
}

при отправке назад JQuery прочитает новое значение в скрытом поле и покажет tab2 :)

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

Trev.

Ответ 3

Попробуйте это

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
    <li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal
    </a></li>
    <li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
 </ul>
<!-- Tab panes -->
 <div class="tab-content" style="padding-top: 20px">
    <div role="tabpanel" class="tab-pane active" id="personal">
        This is Personal Information Tab
    </div>
    <div role="tabpanel" class="tab-pane" id="employment">
        This is Employment Information Tab
    </div>
 </div>
 </div>
<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
    $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>

Ответ 4

Спустя довольно долгое время пробовали загрузочную вкладку. Я решил перейти на вкладку jquery. Во-первых, вкладка jquery также дает ту же проблему, с которой я сталкиваюсь в этой ситуации.. но после долгих усилий в поиске решения и проверки кода после кодов.

мне удалось найти решение

Я очень благодарен человеку, который предоставляет это решение. В этом решении он использует sessionStorage (для меня это новый материал, который я никогда не слышал), и коды

$(document).ready(function () {
var currentTabIndex = "0";

$tab = $("#tabs").tabs({
     activate : function (e, ui) {
        currentTabIndex = ui.newTab.index().toString();
        sessionStorage.setItem('tab-index', currentTabIndex);
     }
});

if (sessionStorage.getItem('tab-index') != null) {
    currentTabIndex = sessionStorage.getItem('tab-index');
    console.log(currentTabIndex);
    $tab.tabs('option', 'active', currentTabIndex);
}
$('#btn-sub').on('click', function () {
    sessionStorage.setItem("tab-index", currentTabIndex);
    //window.location = "/Home/Index/";
});
});