Question

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

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

另外，作为附注，我使用每个选项卡的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，如果只有某些表单应该以这种方式提交，您可以为它们添加一个类来过滤选择

构建jQuery选项卡的更好方法

1 个答案: