Лучший способ создания вкладок jQuery

Question

Я использую вкладки пользовательского интерфейса jQuery в веб-приложении ASP.NET MVC 2. Одна часть приложения требует проверки ошибок при переключении с вкладки. Я делаю это с помощью этого скрипта в файле 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 на вкладках с помощью аннотаций данных - работает очень хорошо. В любом случае мне было интересно, можно ли «сгенерировать» этот код на основе любых вкладок в моем документе. (Если это не так, мне, по сути, приходится вручную кодировать оператор case в операторе switch, что кажется пустой тратой.)

Кроме того, в качестве примечания я использую элементы управления 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 и если есть только определенные формы, которые должны быть отправлены таким образом, вы можете добавить к ним класс для фильтрации выбора