构建jQuery选项卡的更好方法

我在ASP.NET MVC 2 Web应用程序中使用jQuery UI选项卡。 应用程序的一部分要求我在切换选项卡时进行错误检查。 我通过包含选项卡的aspx文件中的此脚本来执行此操作。

 $(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."); } } }); });  

还有其他switch语句（为简洁起见，已删除）。 基本上，这段代码允许通过数据注释在选项卡上进行MVCvalidation – 效果非常好。 在任何情况下，我都想知道是否可以根据我在文档中的任何选项卡“生成”此代码。 （如果不是，我基本上必须手动编写switch语句中的case case语句，这似乎是一种浪费。）

另外，作为附注，我使用每个选项卡的ASP控件来保存各种数据（这也是各个表单所在的位置）。 这可能会对解决方案产生影响。

Answer 1

当用户离开选项卡时，此代码将遍历您要离开的选项卡上的每个表单，并在代码中发送ajax请求。 不同之处在于它根据表单的action属性确定了将其发送到何处，而不必在switch语句中指定它。 这意味着PersonalForm的action属性必须是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表单，如果只有某些表单应该以这种方式提交，您可以向它们添加一个类来过滤选择