構建jQuery選項卡的更好方法

我正在ASP.NET MVC 2 Web應用程序中使用jQuery UI選項卡。應用程序的一部分要求我在切換標籤時進行錯誤檢查。我通過包含選項卡的aspx文件中的這個腳本來做到這一點。構建jQuery選項卡的更好方法

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

還有額外的switch語句（爲簡潔起見刪除）。基本上，這段代碼允許通過數據註釋在標籤上進行MVC驗證 - 工作非常好。無論如何，我想知道是否可以根據我在文檔中的任何標籤「生成」該代碼。（如果不是，我基本上必須手動在switch語句中編寫case語句，這看起來有點浪費）。

另外，作爲一個備註，我使用每個選項卡的ASP控件持有各種數據（這也是個人形式所在的地方）。這可能會對解決方案產生影響。

來源

2010-07-13 JasCav

是否所有選項卡的內容都是相同類型的，例如包含一個表單（'PersonalForm'，'AccountForm'）等，並且表單的'action'指向'$ .post（）'應該被髮送進行驗證的地方？ – 2010-07-13 23:39:23

@Simen - 每個選項卡包含一個表單，選項卡集合表示整個用戶。（您可以在前一頁上選擇一個用戶，並獲得一系列允許您輸入用戶的選項卡。）發送單個表單時，它對應於控制器類中的方法（選項卡中的每個表單有一個方法）。這是澄清事情嗎？ – JasCav 2010-07-14 15:28:31

有點 - 看我的答案，是否它解決了你的問題:) – 2010-07-14 16:37:08

這段代碼當用戶離開一個標籤頁時，會瀏覽你要離開的標籤頁上的每個表單，併發送一個和你的代碼一樣的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和是否存在應提交這樣，只有特定的形式，你可以添加一個類來他們篩選選擇

來源

2010-07-14 16:35:21

完美！到底是爲了什麼。感謝您的幫助。我一直在學習jQuery，我可以看到它爲什麼如此受歡迎。（您的解決方案幫助我解決了另一個我也遇到的jQuery問題。） – JasCav 2010-07-15 06:18:11

構建jQuery選項卡的更好方法

回答

相關問題