Meilleure façon de créer des onglets jQuery

Question

J'utilise les onglets de l'interface utilisateur jQuery dans une application Web ASP.NET MVC 2. Une partie de l'application nécessite que je vérifie les erreurs lorsque je m'éloigne de l'onglet. Je fais cela via ce script dans le fichier aspx qui contient les onglets.

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs({ 
      cache: true, 
      select: function (event, ui) { 
       var $tabs = $('#tabs').tabs(); 
       switch ($tabs.tabs('option', 'selected')) { 
        case 0: 
         $.post("User/Personal", $("#PersonalForm").serialize(), function (data, success) { 
          if (success) { 
           $("#PersonalForm").html(data); 
          } 
         }); 
         break; 

        case 1: 
         $.post("User/Account", $("#AccountForm").serialize(), function (data, success) { 
          if (success) { 
           $("#AccountForm").html(data); 
          } 
         }); 
         break; 

        default: 
         break; 
       } 

       return true; 
      }, 
      ajaxOptions: { 
       error: function (xhr, status, index, anchor) { 
        $(anchor.hash).html("Couldn't load this tab. We will fix this as soon as possible."); 
       } 
      } 
     }); 
    }); 
</script> 

Il existe d'autres instructions de commutation (supprimées pour des raisons de concision). Fondamentalement, ce code permet la validation MVC sur les onglets via des annotations de données - fonctionne très bien. Dans tous les cas, je me demandais s'il était possible que ce code soit "généré" en fonction des onglets que j'ai dans mon document. (Si ce n'est pas le cas, je dois fondamentalement coder à la main l'instruction case dans l'instruction switch, ce qui semble une perte.)

En outre, en guise de remarque, j'utilise des contrôles ASP pour chaque onglet. détenir les différentes données (qui est également où les formes individuelles résident). Cela peut faire la différence pour la solution.

Answer 1

Ce code, lorsque l'utilisateur quitte un onglet, parcourt chaque formulaire sur l'onglet que vous quittez et envoie une requête ajax comme dans votre code. La différence est qu'il détermine où l'envoyer en fonction de l'attribut action du formulaire au lieu d'avoir à le spécifier dans l'instruction switch. Cela signifie que l'attribut d'action PersonalForm doit être User/Personal et ainsi de suite.

select: function(e, ui) { 
    var tab_index = $('#tabs').tabs('option', 'selected'); 
    var panel_id = $("ul li a:eq(" + tab_index + ")", this).attr("href"); 
    var panel = $(panel_id); //the content of the tab 

    //For each form in the panel, submit it via AJAX and update its html according to the answer 
    $(panel).find("form").each(function() { 
     var that = this; 
     $.post($(this).attr("action"), $(this).serialize(), function(data, success) { 
      if (success) { 
       $(that).html(data); 
      } 
     }); 
    }); 
} 

Bien sûr, si vous avez plus d'un formulaire sur la page que vous pouvez sauter le each et s'il n'y a que certaines formes qui devraient être soumis cette façon, vous pouvez ajouter une classe pour les filtrer la sélection