Comment rediriger vers un autre onglet onglet lorsque le bouton est soumis dans un MVC

Question

Je travaille sur l'application MVC, et dans un de mes affichages, il y a un onglet de contrôle qui a trois onglets, sur chaque onglet (premier et deuxième) l'utilisateur a pour remplir certaines données qui pourraient être vues sur le troisième onglet, par exemple lorsque l'utilisateur remplit l'entrée sur le premier onglet, il cliquera sur un autre onglet et l'utilisateur remplira l'entrée sur le deuxième onglet, et lorsque l'utilisateur clique sur Enregistrer les modifications à une base de données (en appelant ma méthode dans un contrôleur) et de rediriger l'utilisateur vers un troisième onglet

Voici une image de la façon qui regarde mon avis:

et ici est un html de mon point de vue (image ci-dessus) pour cela:

<div class="" role="tabpanel" data-example-id="togglable-tabs"> 
          <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist"> 
           <li role="presentation" class="active"> 
            <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">TAB 1</a> 
           </li> 
           <li role="presentation" class=""> 
            <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 2</a> 
           </li> 
           <li role="presentation" class=""> 
            <a href="#tab_content3" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 3</a> 
           </li> 
          </ul> 
          <div id="myTabContent" class="tab-content"> 
           <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab"> 
            <div class="col-md-6 col-sm-6"> 
             <div class="form-group"> 
              //My inputs as text boxes 
             </div> 
             <div class="form-group"> 
              //My inputs as text boxes 
             </div> 
             <div class="form-group"> 
              //My inputs as text boxes 
             </div> 
             <div class="form-group"> 
              //My inputs as text boxes 
             </div> 

             <div class="form-group"> 
              //My inputs as text boxes 
             </div> 
             <div class="form-group"> 
              //My inputs as text boxes 
             </div> 
             <div class="form-group"> 
              //My inputs as text boxes 
             </div> 
            </div> 
           </div> 
           <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab"> 
            <div class="table-responsive"> 
             <table class="table table-striped jambo_table bulk_action"> 
              <thead> 
               <tr class="headings"> 
                <th class="column-title">Name </th> 
                <th class="column-title">Title </th> 
               </tr> 
              </thead> 
              <tbody> 

             </table> 
            </div> 
           </div> 
           <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab"> 
            <div class="row"> 
             <div class="col-md-5 col-sm-12 col-xs-12"> 

             </div> 
             <div class="col-md-7 col-sm-12 col-xs-12"> 
              <div class="table-responsive"> 
               <table class="table table-striped jambo_table bulk_action"> 
                <thead> 
                 <tr class="headings"> 
                  <th class="column-title">Name </th> 
                  <th class="column-title">Title</th> 
                  <th class="column-title">Value</th> 
                 </tr> 
                </thead>              
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-12 col-sm-12 col-xs-12"> 
           <div class="form-group"> 
            <div class="col-md-12"> 
             <br /> 
             <button type="submit" class="btn btn-warning pull-right" id="btnSaveThis"><i class="fa fa-save"></i> Save changes</button> 

            </div> 
           </div> 
          </div> 
         </div> 

Comme vous pouvez le voir les gars de code il n'y a qu'un seul « Enregistrer » bouton dans cette vue, et il est des données submiting à un serveur et l'enregistrer dans une base de données, et après son enregistrement, j'ussualy redirigé à une page d'index comme ceci:

return RedirectToAction("Index", "Articles"); 

Mais maintenant, je me demande comment puis-je rediriger l'utilisateur vers un « TAB 3 » quand il est situé sur un TAB 2 et s'il appuyez sur « Enregistrer les modifications ».

ce que je faisais est maintenant à côté, je acctually attaché sur événement click sur mon bouton qui est submiting changements à une base de données, et il ressemble à ceci:

$('#btnSaveThis').click(function (e) { 
      e.preventDefault(); 
      $('#myTab a[href="#tab_content3"]').tab('show'); 
     }) 

Ce code ci-dessus ouvrir troisième onglet quand je suis sur le deuxième onglet et si j'appuie sur Enregistrer les modifications, mais ma méthode qui est situé dans un contrôleur est hitted habitude à cause de cette ligne: e.preventDefault();

alors les gars, comment puis-je faire un POST à ​​mon contrôleur, enregistrer les modifications dans une base de données, mais aussi exécuter du code depuis mon javascript pour ouvrir le troisième onglet?

Merci les gars Vive

Answer 1

Il serait trop compliqué à résoudre ce problème en Ajax, parce qu'il ya beaucoup d'éléments à boucle throught, je décide donc de résoudre ce sur une autre façon.

Ce que je l'ai fait ici été prochain:

• ViewBag défini dans un contrôleur sur une méthode qui est invoquée lorsque le formulaire est submited sur un deuxième onglet
• Passé ce ViewBag ce point de vue, et vérifié si il y a de la valeur dans un ViewBag, donc si oui, alors définissez le troisième Tab comme actif, bientôt je posterai mon code, parce que j'écris cette réponse depuis mon téléphone portable dès maintenant! :)

Mais theoreticaly Voilà comment je résolu ce problème