我在 ASP.NET MVC 2 Web 应用程序中使用 jQuery UI 选项卡。应用程序的一部分要求我在离开选项卡时进行错误检查。我通过包含选项卡的 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>
还有其他 switch 语句(为简洁起见已删除)。基本上,这段代码允许通过数据注释在选项卡上进行 MVC 验证 - 效果非常好。无论如何,我想知道是否可以根据文档中的任何选项卡“生成”此代码。 (如果不是,我基本上必须在 switch 语句中手动编写所有 case 语句,这似乎有点浪费。)
此外,作为旁注,我对每个选项卡使用 ASP 控件来保存各种数据(这也是各个表单所在的位置)。这可能会对解决方案产生影响。
最佳答案
当用户离开选项卡时,此代码会遍历您要离开的选项卡上的每个表单,并发送一个 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
,如果只有某些表单应该以这种方式提交,您可以为它们添加一个类过滤选择
关于jquery - 构建 jQuery 选项卡的更好方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3239983/