В моем текущем проекте, мне понадобилось использовать элемент управления Tab, но данные слишком тяжелы для первой загрузки страницы. К счастью jQuery Tab предоставляет нужную функциональность. Тем не менее, я должен был найти способ, как легко организовать данные закладок со стороны сервера. ASP.NET MVC предоставляет удобный механизм — частичные представления (Partial View).В этом небольшом туторе, я вам расскажу, как установить jQuery Tab и как настроить частичные представления в ASP.NET MVC для работы с закладками.
Настройка вашего представления
Так как мы работаем в ASP.NET MVC, то будем говорить о наших страницах, как о представлениях. Я буду использовать стандартный шаблон проекта ASP.NET MVC приложения. После загрузки и подключения скриптов jQuery и jQuery UI к вашему представлению (можно и в master page), добавьте следующий код:
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function() {
$("#tabContainer").tabs();
});
</script>
<div id="tabContainer">
<ul>
<li><a href="/Home/GetHomeTab">Home</a></li>
<li><a href="/Home/GetProductTab">Products</a></li>
<li><a href="/Home/GetContactUsTab">Contact Us</a></li>
</ul>
</div>
Данный код заменяет существующую часть данных в Index представлении контроллера Home. Наиболее интересная часть — это div tabContainer. Внутри него мы объявляем список и несколько элементов списка. jQuery использует это определение для форматирования элемента управления закладок.
Вы уже заметили, что внутри списка (тэгов <li>) мы используем ссылки для разных действий(да, я знаю, что можно использовать HTML-вспомогательные методы). Сейчас нам нужно создать представления, которые будут отрисовываться внутри закладок.
Вот пример, как будет выглядеть представление GetHomeTab. Ничего особенного, но убедитесь, что вы создаете частичное представление (partial view). Частичные представления не содержат никаких head, html или body. Это прекрасно подходит для наших закладок.
Проделайте то же самое для GetProductTab и GetContactUsTab. Добавьте несколько строчек текста в представления, чтобы увидеть хоть какой-то результат. Вот пример, как должен выглядеть GetHomeTab:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<h1>Home</h1>
<p>You're inside the Home tab, which was rendered via a partial view!</p>
До того, как мы сможем протестировать, нам нужно изменить наш контроллер, чтобы он возвращал запрошенные представления:
public ActionResult GetHomeTab()
{
return PartialView();
}
public ActionResult GetProductTab()
{
return PartialView();
}
public ActionResult GetContactUsTab()
{
return PartialView();
}
Вы можете привязать модели для данных представлений и они будут отлично работать. А теперь, запускайте приложение.
И чтобы убедиться, что все работает через AJAX, давайте заглянем в FireBug:
Firebug покажет, что когда я нажимаю на закладку Contact Us, автоматически происходит вызов AJAX, который идет в котроллер Home и возвращает частичное представление.
Кевин это круто, но зачем все это?
Использование закладок может быть достаточно неудобным. Они содержат тонны разметки для отображения внутри закладки. Всё это должно быть расположено в одном файле. Загружая наши страницы динамически, мы уменьшаем нагрузку на сервер. Представьте, что у нас есть 10 закладок. Если пользователю нужны всего-лишь две из них, мы тратим трафик, загружая все остальные. Браузеру придется отрисовать их и сохранить в памяти, ожидая действия пользователя. При использовании AJAX, мы загружаем только действительно нужные закладки. Нагружая, тем самым, сервер по минимуму.
Далее, размещать разметку в 11 маленьких файлах гораздо проще, чем в одном большом. Если вам понадобиться сделать изменения в закладке Contact Us, вам не придется искать ее в главной странице. Вы лишь открываете представление GetContactUsTab и вносите свои изменения.
Я надеюсь вы почерпнули что-то новое для себя и, возможно, будете использовать данный подход в будущих проектах. Я могу вам сказать, что я ощутил весомую разницу в своем приложении, где 10 закладок содержат очень много данных. Разделяя все на кусочки, вы добьетесь простоты в структуре приложения.
От переводчика. Не стоит забывать несколько основных проблем, которые стоит не забыть разрешить в данном подходе: а) пользователь не сможет получить прямую ссылку на закладку (для этого стоит использовать якоря); б) позвольте пользователю работать без AJAX. Все это сделать не сложно, достаточно немного изменить текущий пример.
