web-dev-qa-db-fra.com

Reste l'onglet bootstrap après la publication c #

Je ne parviens pas à conserver l'onglet bootstrap après ma publication sur fileupload. Le code est le suivant. 

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

Quelqu'un peut-il m'éclairer sur la façon de conserver ce bootstrap après la publication?

c#asp.nettwitter-bootstrap
10
user3197980

Eh bien, j'avais déjà ce problème et je l'ai résolu de cette façon:

  1. Incluez une nouvelle HiddenField sur votre page et définissez sa valeur sur la première tab à afficher:

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

  2. Sur chaque fonction click que vous avez définie pour alterner la tabs, définissez la valeur HiddenField sur la valeur réelle tab sur laquelle vous avez cliqué.

    document.getElementById('<%=hidTAB.ClientID %>').value = "image";

  3. Sur votre fonction jQuerydocument.ready, utilisez la valeur HiddenField pour alterner avec le dernier onglet ouvert avant Postback.

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

Voici la documentation de Bootstrap Tab et voici la documentation de jQuery Ready

10
aledpardo

En référence aux idées ci-dessus, voici comment je l’ai fait (code complet inclus)

Dans votre page HTML, dans la section <Head>, mettez

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

dans la section <body>, mettez un champ caché

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

et aussi dans la section <body> ont le code lié à 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>

Ne définissez aucun onglet sur actif (défini par la valeur initiale = "# tab1" du champ masqué).

Ajoutez ensuite un bouton à l'onglet DIV2 

ainsi:

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

Enfin, ajoutez votre code c # derrière pour définir la valeur du hiddenfield

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

en postant, JQuery lit la nouvelle valeur dans le champ masqué et affiche l'onglet2 :)

J'espère que ça aide quelqu'un.

Trev.

4
FlashTrev

S'il vous plaît essayer ceci

<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>
2
Vishal Kiri

Après avoir essayé assez longtemps l’onglet bootstrap, j’ai décidé de passer à jquery tab. En premier lieu, jQuery donne également le même problème que je rencontre dans cette situation. Mais après beaucoup d’efforts pour trouver une solution et essayer des codes après des codes. 

j'ai réussi à trouver une solution

Je suis vraiment reconnaissant à la personne qui fournit cette solution. Dans cette solution, il utilise sessionStorage (pour moi, c’est une nouveauté dont je n’ai jamais entendu parler) & Les codes sont 

$(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/";
});
});
0
user3197980