Лучший способ создания вкладок jQuery

Question

Я использую вкладки пользовательского интерфейса jQuery в веб-приложении ASP.NET MVC 2. Одна часть приложения требует, чтобы я делал проверку ошибок, когда я переключаюсь с вкладки. Я делаю это через этот скрипт в файле aspx, который содержит вкладки.

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

Есть дополнительные инструкции переключателя (сняты для краткости). В принципе, этот код позволяет проверять MVC на вкладках посредством аннотаций данных - работает очень хорошо. В любом случае, мне было интересно, возможно ли, чтобы этот код «сгенерировался» на основе любых вкладок, которые у меня есть в моем документе. (Если это не так, я в основном должен кодировать инструкцию случая в операторе switch вручную, что кажется вроде отходами.)

Кроме того, в качестве примечания стороны я использую элементы управления ASP для каждой вкладки сохраняйте различные данные (которые также находятся там, где находятся отдельные формы). Это может повлиять на решение.

Answer 1

Этот код, когда пользователь оставляет вкладку, проходит через каждую форму на вкладке, которую вы оставляете, и отправляет запрос ajax, как в вашем коде. Разница в том, что он определяет, куда отправить его на основе атрибута формы action вместо того, чтобы указывать это в инструкции switch. Это означает, что атрибут действия PersonalForm должен быть User/Personal и так далее.

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); 
      } 
     }); 
    }); 
} 

Конечно, если у вас нет более одной формы на странице вы можете пропустить each и если есть только определенные формы, которые должны быть представлены таким образом, вы можете добавить класс к ним для фильтрации выбор