ASP.NET MVC: История одного проекта "Шаблоны и внешний вид" (часть 3)

Опубликовано 02.05.2012 21:43:38 в категории Микросервисы

Пришло время заняться дизайном. Вложенные шаблоны решат мои задумки по организации навигации и раскраске сайта. В проектах на основе ASP.NET были вложенные шаблоны. Как такой же функционал сделать на ASP.NET MVC? Решение есть.

Содержание

Даже не думал, что...

Предыдущая часть, открыла для меня не мало интереснейших открытий, даже не столько статья, сколько комментарии к ней! Одно из них: каждый может прочитать про шаблон проектирования; каждый может после прочтения его реализовать; но не может у всех получается одно и то же. Второе открытие: очень много умных людей читает мой блог. И я просто хочу поблагодарить всех читателей блога за их участие в его жизни. Спасибо...

Внешний вид имеет значение

На данный момент "Музей юмора" выглядит так. Мне всё нравится, за исключением "лишних" ссылок и контента от которого надо избавиться, например, блог, он же теперь в другом месте. :)

так выглядит музей юмора сейчас

Пришло время всё поменять. После некоторого количества времени проведенного в поиске нового внешнего вида, я нашел своё видение нового дизайна "музея юмора". Примерно так будет выглядеть стартовая страница (используется шаблон _LayoutMain.cshtml):

На стартовой странице будут представлены два типа контента: Лента и Музей юмора. Объясняю. В "музей юмора" может каждый добавить на рассмотрение свой экспонат: анекдот, история, афоризм, стишок - принимается всё, лишь бы было смешно и/или поучительно! Всё добавляемое сначала попадает на ленту отбора, где другие посетители могут голосовать за каждый экспонат. Экспонаты, прошедшие отбор и получившие максимальное количество голосов, автоматически попадют в основную базу по результатам семи дней прибывания на ленте отбора.

Вот так будут отображаться все страницы связанные с лентой анекдотов (выделение цветом, используется шаблон _LayoutLenta.cshtml):

А вот так будет видеть посетитель сайта, который зайдет в основную базу (отборный юмор, используется шаблон _LayoutMuseum.cshtml):

Все остальные страницы сайта будут иметь шаблон для отображения такой как, например страница "о музее" (используется шаблон _LayoutMain.cshtml):

Вложенные шаблоны

Релизовать такого типа представления очень не сложно. Нужен основной шаблон и три вложенных: _LayoutMain.cshtml, _LayoutLenta.cshtml, _LayoutMuseum.cshtml. Приведу код каждого из них, но сначала шаблон главный (_LayoutExtended.cshtml), вернее сказать, основная его часть:

<body>
  <div id="page">
    <div id="header">
      <div id="top1">
        <span class="title">МУЗЕЙ</span> <a href="@Url.Action("index", "site")">
          <img src="@Url.Content("~/content/images/logo.png")" alt="музей юмора" /></a>
        <span class="title">ЮМОРА</span> <span class="block clear">сайт для остроумных
          людей с хорошим чувством юмора</span>
      </div>
    </div>
    @RenderBody()
    <div id="prefooter">@Html.ActionLink("лента юмора", "lenta", "site")
      @Html.ActionLink("отборный юмор", "museum", "site")
      @Html.ActionLink("обратная связь", "feedback", "site")
      @Html.ActionLink("о музее", "about", "site")
      @Html.ActionLink("наши ссылки", "index", "links")</div>
    <div id="footer">
      все права защищены 2005-@( DateTime.Now.Year.ToString())
      © Calabonga SOFT<br />
      при использовании материалов сайта ссылка на ресурс обязательна</div>
  </div>
  @Content.Scripts("jquery-1.7.2.min.js", Url)
  @Content.Scripts("modernizr-2.5.3.js", Url)
  @Content.Scripts("jquery-ui-1.8.18.custom.min.js", Url)
  @RenderSection("scripts", false)
  @Html.WriteScriptBlocks()
</body>

Теперь его наследники. Надеюсь, что по названию не трудно догадаться, какой из них использован для какой страницы. Сначала _LayoutMain.cshtml. Его код я приведу полностью:

@{
  Layout = "~/Views/Shared/_LayoutExtended.cshtml";
}

<div id="topmain">
  @RenderSection("header",false)
</div>

<div id="main">
  @RenderBody()
</div>

Теперь содержание _LayoutLenta.cshtml (тоже полностью):

@{
  Layout = "~/Views/Shared/_LayoutExtended.cshtml";
}

<div id="toplenta">
  @RenderSection("header",false)
</div>

<div id="main">
  @RenderBody()
</div>

Следующий в списке шаблонов - _LayoutMuseum.cshtml (тоже целиком):

@{
  Layout = "~/Views/Shared/_LayoutExtended.cshtml";
}
<div id="topmuseum">
  @RenderSection("header",false)
</div>
<div id="main">
  @RenderBody()
</div>

Как вы уже наверное заметили, особых различий в шаблонах наследниках нет, ключевой момент играет разметка в таблицах каскадных стилей. Просто обратите вниманиена идентификаторы <div>: topmain, toplenta, topmuseum. Разметка каскадной таблицы стилей (CSS) пусть останется домашним заданием для вас.

Заключение

Возможно статья получилась не очень насыщенной, но она обязательно должна была появиться, потому что интерфейс имеет значение! (как бы не говорил об этом Ustas). Тем не менее, в этой статье затронуты такие моменты, как построение дизайна на основе концепции сайта. Простыми словами, в зависимости от того, что вы хотите показать пользователю, нужно строить дизайн, причем смотреть на тенденции в мировом сайтостроении нужно, но не обязательно! Потому что, может быть именно ваше решение и станет в дальнейшем тенденцией для других! (при условии, что это будет понятно, удобно, практично и... т.д.)

В следующей части, я буду говорить о структуре данных и моделях, которые будут использованы в проекте. Такое, своего рода, техническое задание и планирование разработки.

Лирика или крик о помощи

Есть сайт www.jfacts.ru на его основе работает сервис API. Так вот, каким только способом после смены namespace я не пытался запустить работу сервиса, вернее сменился не только namespace, но и название сборки. Вернее сказать, сервис запустился и заработал. Интерфейсы не изменились, методы не тронуты, но работа приложения, которое лежало на marketplace изменилась. Всякими-разными путями (в частности, атрибутами на сущностях, и многими другими... сериализаторами... много чего попробывал....) я пытался "выровнять" работу сервиса и заставить работать приложение с реферансами на предыдущую версию сервисов. Короче, пока на само приложении не обновишь reference на сервис, приложение запускается работает, но с сервиса приходят пустышки. Ошибка "null" не срабатывала, и пользователи видели пустой экран (задокументированно на маркетплейс). Если у вас есть опыт смены namespace у WCF-сервиса, пожалуйста, отзовитесь и научите.

aspnet музей юмора