构建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选项卡的更好方法

回答

相关问题