Полный исходный код для этого урока можно найти в приложении в нижней части этой страницы. Скачать WebMatrix
При запуске WebMatrix выберите опцию «Сайт из шаблона», а затем шаблон «Пекарня». Это создает основу для полнофункционального сайта электронной коммерции, который мы затем можем адаптировать к нашим потребностям. Мы добавим три социальных функции на этот сайт: LinkShare, Twitter и Facebook . Вот так выглядит наш сайт в начале:
В большинстве случаев добавление социальной сети на сайт означает просмотр множества документов для разработчиков, понимание того, какие части мы хотим интегрировать, и, наконец, добавление необходимого кода JavaScript. В этом нет ничего плохого, но разве не было бы здорово, если бы мы могли сделать это намного быстрее? Введите веб-помощников.
Помощник № 1 — LinkShare
WebMatrix поддерживает платформу ASP.NET MVC 3. Эта структура может использовать несколько движков представления, но сейчас мы сосредоточимся на недавно выпущенном движке представления Razor. Это очень мощный механизм просмотра для MVC 3, и все примеры кода, которые мы увидим в этой статье, предназначены для него. PHP, .NET или любой другой веб-разработчик не должен испытывать затруднений при понимании этих простых вариантов использования синтаксиса. Razor можно использовать, создав новый тип файла — веб-страницу ASP.NET — с расширением .cshtml (или .vbhtml, если вы используете VB.NET). Одна из вещей, которая делает Razor такой мощной, — это простота, с которой вы можете смешивать код сервера и HTML.
Первая функция, которую мы хотим видеть на нашем сайте, — это возможность пользователям делиться нашими замечательными продуктами в социальных сетях, таких как del.icio.us, Twitter, Google Buzz или Facebook. Для этого мы будем использовать веб-помощник LinkShare, и все, что для этого нужно, — это одна очень маленькая строка кода в нашем файле _SiteLayout.cshtml:
@LinkShare.GetHtml(Page.Title)
Теперь у нас есть функции обмена ссылками практически без усилий.
Поскольку мы добавили его в специальный файл _SiteLayout.cshtml, эта функция доступна на всем нашем веб-сайте. Поэтому пользователь может поделиться любой страницей, будь то домашняя страница или конкретный продукт. Параметр указывает заголовок, который мы хотим использовать при публикации страницы, поэтому имеет смысл использовать все, что установлено для общей страницы. Большинство доступных помощников поддерживают настройку, и помощник LinkShare не является исключением. Давайте представим, по какой-то причине, что мы хотим использовать только Digg и Stumble Upon для обмена ссылками. Одним из параметров для GetHtml является массив, который мы можем использовать для указания этого:
@LinkShare.GetHtml(Page.Title, linkSites: new LinkShareSite[] { LinkShareSite.Digg, LinkShareSite.StumbleUpon} )
Для дополнительной настройки помощника LinkShare вы можете найти полную документацию по MSDN по адресу http://msdn.microsoft.com/en-us/library/microsoft.web.helpers.linkshare.gethtml(v=vs.99). aspx .
Помощник № 2 — Twitter
Я не знаю ни одной социальной сети , которая имеет больше 3 — й клиентов партии , чем Twitter. Его мощный и гибкий REST API упрощает создание клиентского приложения, которое показывает твиты ваших друзей и позволяет отправлять свои 140 символов в киберпространство. Однако на большинстве веб-сайтов Twitter интегрирован для отображения списка твитов от определенного пользователя или с определенным хеш-тегом. Хотя твиттер предоставляет свои собственные виджеты, чтобы упростить жизнь разработчикам, мне еще предстоит увидеть что-нибудь, что может даже приблизиться к этому:
@Twitter.Profile("dzone")
Эта простая строка кода — это все, что требуется в WebMatrix для отображения последних твитов от DZone, и она выглядит так:
Если мы хотим показать, что пишется о WebMatrix, то мы можем использовать:
@Twitter.Search("#webmatrix")
Вместо твитов DZone теперь у нас есть последние твиты на WebMatrix.
Помощник Twitter чрезвычайно настраивается, поэтому мы можем адаптировать его к любым нуждам. Полная подпись этих методов задокументирована на MSDN: http://msdn.microsoft.com/en-us/library/gg537782(v=VS.99).aspx . Существуют очевидные варианты цвета и размера, а также таких параметров, как количество твитов, интервал поиска, аватары, метки времени, циклы и многое другое. Для нашей пекарни мы настроим размер, цвета, количество твитов и полосы прокрутки.
@Twitter.Profile(twitterUserName: "dzone",
width: 400,
height: 500,
backgroundShellColor: "#e6e3d8",
tweetsBackgroundColor: "#fdfcf7",
shellColor: "#696969",
tweetsColor: "#696969",
tweetsLinksColor: "#a52f09",
numberOfTweets: 10,
scrollBar: true)
Выглядит хорошо, тебе не кажется?
Итак, практически без кода, теперь у нас есть встроенный обмен ссылками и твиттер на нашем сайте. Чего не хватает? Ах да, Фейсбук.
Помощник № 3 — Facebook
Построить социальный центр и не интегрировать Facebook — все равно что купить очень дорогую систему Hi-Fi с клапанным питанием и не иметь виниловых пластинок для игры на ней. (Хорошо, я знаю, что это очень спорно, но вы слышали My Bloody Valentine в Loveless на виниле?). Очевидно, что мы не хотим исключать нашу пекарню из этой бизнес-возможности, поэтому нам лучше начать добавлять функции Facebook на нашем веб-сайте.
Одна из наиболее часто используемых функций Facebook на веб-сайте — кнопка «Мне нравится», так что это первое, что мы добавляем. Как? С помощью веб-помощника Facebook:
@Facebook.LikeButton()
Может ли быть проще? Не думай так. Просто добавив этот смехотворно простой код в наш _SiteLayout.cshtml, теперь у нас есть красивая кнопка Facebook на всем нашем сайте. Как всегда, мы можем настроить кнопку Like, передав параметры вышеописанному методу.
Если мы попытаемся запустить ваш веб-сайт сейчас, мы получим сообщение об ошибке «CS0103: имя« Facebook »не существует в текущем контексте». Причина этого заключается в том, что предыдущие помощники являются частью пакета Microsoft.Web.Helpers и связаны с шаблоном Bakery. Facebook не является частью этого пакета, поэтому нам нужно добавить его на наш сайт. Следуй этим шагам:
1. Перейдите в административную область вашего сайта по адресу http: // localhost: 28992 / _Admin /. (Замените номер порта (28992) на любой порт, назначенный вашему веб-сайту).
2. Выберите пароль и следуйте инструкциям, чтобы разрешить доступ к области администратора.
3. На странице «Диспетчер пакетов» в раскрывающемся списке выберите «Показать: онлайн» и выполните поиск в Facebook. Вы должны увидеть Facebook.Helper (сейчас 1.0) и кнопку установки перед ним. Нажмите эту кнопку, и помощник Facebook будет установлен на нашем сайте.
4. Запустите веб-сайт снова, и теперь вы должны увидеть кнопку «Мне нравится» на Facebook.
Facebook Web Helper — проект с открытым исходным кодом, и вся документация и исходные файлы доступны по адресу http://facebookhelper.codeplex.com/ . Если что-то не было достаточно простым, пакет Facebook.Helper устанавливает файлы справки и документации в папку Facebook на нашем веб-сайте.
Наконец, мы хотим, чтобы наши клиенты видели, что происходит на нашей странице Facebook, когда они посещают наш веб-сайт хлебобулочных изделий. У Facebook есть много других доступных виджетов (Комментарии, Логин, Рекомендации и т. Д.), И все эти функции есть в веб-помощнике. Лента активности — это виджет, который мы будем использовать в этом случае. Он показывает активность пользователя на нашем Faceboo. Мы можем добавить его на наш сайт просто набрав
@Facebook.LikeBox(
href: "http://www.facebook.com/pages/DZone/259639764711",
showStream: true,
height: 600)
Наш сайт теперь выглядит так:
Круто, тебе не кажется?
Резюме и следующие шаги
WebMatrix был выпущен для облегчения жизни веб-разработчиков. Веб-помощники не являются эксклюзивными для WebMatrix (их можно использовать в Visual Studio и загружать через NuGet ), но они глубоко интегрированы в ядро WebMatrix. Они необходимы для того, чтобы сделать этот инструмент невероятно простым в использовании. Вам больше не нужно заходить на каждый веб-сайт, с которым вы хотите интегрироваться, и читать целую кучу документов, поскольку все централизовано в области администрирования и отводится помощниками. Вот о чем должны быть инструменты: сделать нашу жизнь проще.
Если вы хотите изучить другие доступные пакеты, не стесняйтесь проверять, что доступно в области администрирования вашего сайта (например: http: // localhost: 28992 / _Admin /).Вы увидите множество расширений для широкого спектра функций, таких как интеграция jQuery, IE9, OData, Bing, Azure и других.
Предлагаемое упражнениеo включить помощника PayPal в нашу пекарню. Не стесняйтесь скачать исходный код для этой статьи (прилагается) и добавить пакет для PayPal. Вам нужно будет добавить несколько страниц, но пакет PayPal устанавливает всю документацию, необходимую для его использования. Это просто и очень полезно, так как мы хотим получать оплату за покупки в пекарне, не так ли?