ASP.NET MVC: История одного проекта "Шаблоны и внешний вид" (часть 3)
Сайтостроение | создано: 02.05.2012 | опубликовано: 02.05.2012 | обновлено: 13.01.2024 | просмотров: 17340 | всего комментариев: 10
Пришло время заняться дизайном. Вложенные шаблоны решат мои задумки по организации навигации и раскраске сайта. В проектах на основе ASP.NET были вложенные шаблоны. Как такой же функционал сделать на ASP.NET MVC? Решение есть.
Содержание
ASP.NET MVC: История одного проекта "Готовимся к старту" (часть 1)
ASP.NET MVC: История одного проекта "Всё ради данных" (часть 2)
ASP.NET MVC: История одного проекта "Шаблоны и внешний вид" (часть 3)
ASP.NET MVC: История одного проекта "Еще немного классов" (часть 4)
ASP.NET MVC: История одного проекта "UI - всё для пользователя" (часть 5)
ASP.NET MVC: История одного проекта "UI - Добавление экспоната" (часть 6)
ASP.NET MVC: История одного проекта "UI - Редактирование экспоната" (часть 7)
ASP.NET MVC: История одного проекта "Обработка ошибок" (часть 8)
ASP.NET MVC: История одного проекта "Фильтрация" (часть 9)
ASP.NET MVC: История одного проекта "Поиск" (часть 10)
ASP.NET MVC: История одного проекта "Облако тегов" (часть 11)
ASP.NET MVC: История одного проекта "Главная страница" (часть 12)
Даже не думал, что...
Предыдущая часть, открыла для меня не мало интереснейших открытий, даже не столько статья, сколько комментарии к ней! Одно из них: каждый может прочитать про шаблон проектирования; каждый может после прочтения его реализовать; но не может у всех получается одно и то же. Второе открытие: очень много умных людей читает мой блог. И я просто хочу поблагодарить всех читателей блога за их участие в его жизни. Спасибо...
Внешний вид имеет значение
На данный момент "Музей юмора" выглядит так. Мне всё нравится, за исключением "лишних" ссылок и контента от которого надо избавиться, например, блог, он же теперь в другом месте. :)
Пришло время всё поменять. После некоторого количества времени проведенного в поиске нового внешнего вида, я нашел своё видение нового дизайна "музея юмора". Примерно так будет выглядеть стартовая страница (используется шаблон _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-сервиса, пожалуйста, отзовитесь и научите.
Комментарии к статье (10)
Если у вас есть опыт смены namespace у WCF-сервиса, пожалуйста, отзовитесь и научите.
А разве так нельзя поменять - [ServiceContract(Namespace = "Ваш namespace")]
Алексей, к сожалению, так не работает. Вернее сам namespace, естественно, меняется... Но программа, которая установлена на телефонах пользователей (Windows Phone) "не видит" данные получаемые с сервиса. На null проверка проходит, то есть данные как бы есть, но внутри пришедшего класса... ошибка сервиса.
Но если открыть проект "только факты" обновить refference на сервис, перекомпилировать и скинуть программу на телефон (себе), то сервис работает. А у всех остальных нет, пока не обновишь программу на marketplace, а это значит 3-5 дней "коту под хвост"... Пользователи уйдут...
Странно, что вы задаете такой вопрос. Поменять namespace только с одной стороны никак нельзя. Правила сервисов ABC - Address - Binding - Contact. Все значения должны совпадать как со стороны сервиса, так и со стороны клиента.
КАА, я как раз и попытался привести новый проект (вернее новый сайт с новым namespace) с сервисом к "старому" namespace - не получилось...
Буквально сегодня на работе программист изменил наименование входных параметров в веб сервисах, пройдясь по ним решарпером (всего лишь первую букву с большой на маленькую) - и удивлялся почему все перестало работать.
Добейтесь того, чтобы wsdl файлы старого и нового версий сервсов были полностью идентичные.
Дело в том, что при генирации прокси классво там зашиваются XPath, по которым происходит десириализация данных.
Управлять неймспейсами нужно из трех мест вашего сервиса
[ServiceContract(Namespace="http//someservice.ru")] у интерфеса сервиса,
[ServiceBehavior(Namespace = "http//someservice.ru")] - у его имплементации
и <endpoint address="" binding="basicHttpBinding" bindingConfiguration="customBinding1" contract="IDocumentService" bindingNamespace="http//someservice.ru"/>
непосредсвенно в биндинге
КАА, а вот это очень дельный совет! Огромное вам спавсибо, что хотя бы направление поиска дали. Буду пытаться, о результатах сообщу.
Вы так бодро начали первую статью:
"Выбрал цветовую схему на сайте www.jqueryui.com чтобы проще было в дальнейшем управлять дизайном. Выбрал такую цветовую гамму:
Подключу ее немного позже, когда потребуется."
И не подключили... А жаль.
Если бы немного продолжили Ваша статья была бы Бесцеллером
Строка:
@Content.Scripts("jquery-ui-1.8.18.custom.min.js", Url)
как раз часть работы по подключению, более того в 4-ой части я всё-таки подключу шаблон ... :)
огромное спасибо автору - материал отличный.
хотелось бы узнать о времени написания следующих статей и их общем количестве.
Спасибо, Antoxa, за благодарность, чертовски приятно слышать.
Что же касается времени и количества статей, трудно сказать что-то определенное, потому что сайт и, соответственно, статьи об этом сайте пишутся в реальном времени по мере наличия свободного времени (простите за каламбур). Пока получается примерно раз в неделю статья. Будет время - буду заниматься сайтом (и статьями соответственно) чаще. Всего статей будет наверное много. Во свяком случае, у меня в планах пока стоит цифра 10. Дальше - "будем посмотреть".