Каков наилучший (самый эффективный) способ в ASP.NET вернуть целую страницу в виде вкладок?

Question

Что я хочу сделать, так это то, что каждый раз, когда я нажимаю на вкладку, область содержимого заменяется практически новой страницей. Я не хочу полной загрузки страницы, поэтому я хочу сделать это в ajax, но я привык отсылать небольшие данные Джейсона с помощью методов страницы. Я не уверен, как я мог бы создать целую новую страницу и вернуть ее через ajax, и я хотел бы просто назначить весь контент, возвращаемый div, и покончить с этим. Каков наилучший способ сделать это с наименьшими затратами (я знаю, что есть некоторые неэффективные способы, которыми скрипт-менеджер делает ajax)?

или лучше загружать содержимое с вкладками в iframe?

Кстати, я уже использую jquery для вызова облегченных методов на моей странице asp net, и это прекрасно работает.

Answer 1

Другой вариант - использовать пользовательский интерфейс jQuery Tab.

** РЕДАКТИРОВАТЬ: это будет работать, если все страницы находятся в одном домене, так как они загружаются через AJAX (применяется ограничение безопасности). Если необходимо загрузить страницы из других доменов, то может потребоваться реализация междоменной политики (требующей разрешения от других доменов) или использование сценария локального прокси-сервера для запроса данных и передачи их в javascript. (JSONP http://en.wikipedia.org/wiki/JSONP является исключением.)

Проверьте эту ссылку для демонстрации:

http://jqueryui.com/demos/tabs/ajax.html

Примечание: вам нужно будет загрузить дополнительные библиотеки jQuery UI и включить виджет Tabs.

Получите их здесь: http://jqueryui.com/download

Код будет выглядеть примерно так:

<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.7.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.tabs.js"></script>
<script>
$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab.");
            }
        }
    });
});
</script>


<div id="tabs">
    <ul>
        <li><a href="page1.aspx">Tab 1</a></li>
        <li><a href="page2.aspx">Tab 2</a></li>
        <li><a href="page3.aspx">Tab 3</a></li>
    </ul>
</div>

Answer 2

Если вы используете Asp.net, а также Asp.net Ajax Control Toolkit, вы можете использовать элемент управления AjaxControlToolkit Tab для реализации вашего подхода. (в любой вкладке вы должны поместить новую страницу или модуль (я рекомендую использовать модуль))

Если нет, вы можете использовать Asp.net MultiView Control и некоторые кнопки, которые каждый раз, когда пользователь нажимает кнопку, вы меняете MultiView ActiveViewIndex (через ajax AsynchPostback)

и, наконец, вы можете использовать некоторые div и управлять ими через JavaScript