jQuery закладки и Partial View, используем AJAX

[@nolled]

<a href="/Home/GetHomeTab">Home</a>

ActionLink специально же придумали, чтоб такого не писать.

[@jeje]

>да, я знаю, что можно использовать HTML-вспомогательные методы
=)

[@overbeat]

Осталось сделать как в джимейле, чтобы табы кэшировались, и в случае, если страница осталась такой же, она грузилась бы из кэша, а не с сервера. Не могу ручаться, что джимейл так и работает, но по ощущениям похоже.

[@Dmitry_P]

Кэширование по дефолту включено. Можно отключать.

[@jeje]

Только что посмотрел на gmail, при каждом клике на Inbox, идут 2-3 запроса на сервер, но он все равно кэширует что-то локально, без подключения к инету работает, пока не запросит состояние подключения.

[@overbeat]

как я понимаю, этими запросами он спрашивает у сервера, все ли там так же осталось, как и было? :)

[@jeje]

Нет, первый запрос возвращает: список labels(ярлыков), подключенные email к профилю, список писем в папке.

[@overbeat]

Ясно. Было бы еще здорово пощупать результат этой работы. Как я понял, автор предоставил только скриншоты.

И еще:
«Не стоит забывать несколько основных проблем, которые стоит не забыть разрешить в данном подходе». Понятно, да?

[@jeje]

<div id="tabContainer">
 <ul>
  <li id="GetHomeTab"><a href="/Home/GetHomeTab">Home</a></li>
  <li id="GetProductTab"><a href="/Home/GetProductTab">Products</a></li>
  <li id="GetContactUsTab"><a href="/Home/GetContactUsTab">Contact Us</a></li>
 </ul>
</div>

$(document).ready(function() {
   var hash = hash.window.location.hash.substring(1);
   if (hash != "") {   
      $("#tabContainer").tabs('select', hash);
   } else {
      $("#tabContainer").tabs();
   }

   $("#tabContainer").bind("tabsshow", function(event, ui) {
     window.location.hash = ui.tab.id;
   }); 
  
});

за ui.tab.id не ручаюсь, нужно посмотреть, как получить id закладки.

[@overbeat]

Зачем мне это? Я не программист :)

[@egorinsk]

Недостатки решения.

1) Без яваскрипта текст страницы даже не отобразится --> СЕОшники не одобряют. Плюс. лишний АЯКС-запрос серьезно замедляет загрузку страницы.
2) Нельзя кликнуть по вкладке средней кнопкой (открыть в новой вкладке)
3) Не работают корректно F5, Назад, вперед, добавить в закладки с этим примером.
4) Нужно грузить тяжелый jQuery ради такой мелочи как табы.

Нагрузка на сервер также растет, так как теперь запросов к динамическим страницам больше.

[@jeje]

Все это решается без проблем, вот решение 1, 2, 3 проблемы.
4) 20 кб — это смешная цена
Данный подход не для повседневного использования, а когда нужно.

[@egorinsk]

Кнопка назад в предложенном примере все равно работать не будет например. Как и функция «открыть в новом окне».

> Данный подход не для повседневного использования, а когда нужно.

Вот это точно, лучше сделать нормально, без лишних усложенний.

[@jeje]

Да что вы, это же #хеш. Или вы будете утверждать, что url — mysite.com/#tab1 нельзя открыть в новом окне?

>Кнопка назад в предложенном примере
будьте так добры, нажмите последовательно на # у любого комментария на данной странице, а потом кнопку назад, работает? то-то же

[@egorinsk]

> [a href="/Home/GetHomeTab"]

Где вы здесь видите хеш? При щелчке средней кнопкой по этой ссылке в новом окне откроется «/Home/GetHomeTab».

> будьте так добры, нажмите последовательно на # у любого комментария на данной странице, а потом кнопку назад, работает? то-то же

На Хабре много косяков, это не образец :) Но конечно, должно ли переключение табов добавлять ссылки в историю — отдельный вопрос. Если это маленькая врезка с табами — это как маленький виджет, то наверно нет, а если весь сайт сделан как коллекция аякс-табов — то наверно да, так как пользвоатель может захотеть вернуться на предыдущий таб кнопкой назад.

[@jeje]

>Где вы здесь видите хеш? При щелчке средней кнопкой по этой ссылке в новом окне откроется «/Home/GetHomeTab».
А вот тут, работает все хитро, я написал, что нужно еще добавить реализацию работы без ajax, вот тут бы она и сработала. Ну право, я же делал перевод, не могу же я еще за автора отдуваться за его недочеты. Но все это достаточно специфично, вот товарищу les80 по нраву такое решение.

[@AirLight]

Что-то совсем упущен момент о CSS, без которого у меня получились не вкладки, а только список.

[@Katmandu]

Раз уж недавно апнули, напишу пару комментариев, может кому пригодится.
В данной реализации есть два серьезных минуса:
— Асинхронные запросы выполнятся по очереди (поставьте Thread.Sleep, увидите). Это связано с блокировкой сессии на каждый запрос. В MVC 2 нужно изменять сорцы MVC, и создавать копию провайдера без блокировки. В MVC3 появился ControllerSessionStateAttribute.
— При использовании Ajax-версии табов id контейнера контента генерируется автоматически, и если необходимо обращаться к табе из jquery, придется завязываться на ui-tab-1, ui-tab-2 и т.д. В асинхронных формах и того краше: new AjaxOptions {UpdateTargetId=«ui-tab-2» }

Вместо этого можно вгрузить содержимое табок при рендере страницы, используя Html.RenderPartial или Html.RenderAction.
В таком случае, избавляемся от обоих тараканов.