Поддержка фрагментов кода (snippets) ASP.NET, HTML, JavaScript (из серии статей про VS 2010 и .NET 4.0)
Это шестая из серии статей, в которых я пишу о готовящихся к выходу VS 2010 и .NET 4.
В этой статье я расскажу о еще одном полезном усовершенствовании в VS 2010 - это поддержка фрагментов кода (snippets) HTML/ASP.NET/JavaScript. Фрагменты кода позволяют вам более продуктивно писать исходный код за счет возможности создания фрагментов исходного кода и разметки страниц, которые затем можно быстро применять и использовать в различных местах вашего приложения без необходимости заново полностью набирать их на клавиатуре.
В предыдущих версиях Visual Studio была поддержка концепции "фрагментов кода" для VB и C#, но не для JavaScript или разметки страниц HTML и ASP.NET. С версии VS 2010 у нас теперь есть поддержка фрагментов кода и для такого исходного кода.
Использование фрагментов кода ASP.NET
Давайте рассмотрим, как мы можем использовать фрагменты кода, на примере быстрой реализации общего сценария обеспечения безопасности. Более конкретно, мы реализуем функционал, необходимый для отображения в верхней части страниц сайта либо ссылки "[ Login ]", либо сообщения "[ Welcome UserName ]" в зависимости от того, залогинился ли уже пользователь или еще нет:
Этот функционал автоматически добавляется, когда вы создаете проект в VS 2010 с использованием нового шаблона ASP.NET Project Starter. Однако, для данного примера мы предположим, что начали работу над проектом с пустой главной (master) страницы и создаем ее полностью с нуля.
Начнем с добавления на главную страницу стандартного элемента <div> и затем поместим наш курсор внутри этого элемента:
Для реализации нашего сценария мы воспользуемся встроенным элементом управления <asp:loginview>. Это элемент управления с поддержкой шаблонов (впервые появившихся в ASP.NET 2.0), что позволяет ему легко переключаться между шаблонами "Anonymous" и "LoggedIn", автоматически отображаемыми в зависимости от того, прошел ли пользователь аутентификацию. Вместо того, чтобы каждый раз вручную набирать фрагмент разметки для элемента <asp:loginview>, мы воспользуемся поддержкой фрагментов кода ASP.NET, появившейся в VS 2010.
Если набрать в редакторе "<log", то появится окно intellisense со списком доступных элементов управления и фрагментов кода, начинающихся с этих символов.
Выберем встроенный фрагмент кода для "loginview" из приведенного списка и нажмем клавишу Tab, чтобы завершить ввод:
Теперь, когда мы выбрали фрагмент кода, который хотим использовать, мы можем еще раз нажать клавишу Tab для применения выбранного фрагмента - в результате название фрагмента кода будет немедленно заменено соответствующим кодом разметки, показанном на следующем рисунке. Обратите внимание: фрагмент кода добавил для нас новый элемент управления <asp:loginview> и автоматически определил для него два наиболее часто используемых шаблона. Теперь реализовать это все можно за счет лишь шести нажатий клавиш (четыре - чтобы набрать "<log", и затем два раза нажать Tab).
Теперь реализуем шаблон "AnonymousTemplate".
Если набрать в редакторе "<a", то появится окно intellisense и отобразит доступные для использования элементы и фрагменты кода:
Из приведенного выше списка мы выберем встроенный фрагмент кода "a" и нажмем клавишу Tab, чтобы завершить его выбор. Затем нажмем Tab еще раз и, таким образом, выполним фрагмент кода - в результате его название будет заменено разметкой, как показано на рисунке ниже:
Значение артрибута "href" и содержимое элемента <a> на рисунке выше подствечено зеленым фоном. Это означает, что эти значения являются заменяемыми параметрами, и мы можем автоматически переключаться между ними с помощью клавиши Tab при указании конкретных значений - без необходимости перемещать курсор клавишами со стрелками или мышью, что существенно ускоряет дело.
Итак, не двигая курсор, мы можем сразу начать ввод URL страницы авторизации, на которую мы хотим перенаправлять пользователей для аутентификации на сайте:
После ввода URL мы можем нажать Tab еще раз, и VS автоматически подсветит в редакторе значение второго параметра (опять же, без необходимости ручного перемещения курсора клавишами или мышью):
Теперь мы можем ввести текст, который хотим отображать для гиперссылки:
После завершения настройки шаблона "<AnonymousTemplate>" мы можем перейти к шаблону "<LoggedInTemplate>". Наберем в редакторе "<log", чтобы появилось окно intellisense, и выберем встроенный фрагмент кода "loginname":
После нажатия Tab название фрагмента кода будет заменено следующим фрагментом разметки:
Значение свойства "FormatString" было автоматически установлено для нас в соответствии с текстом сообщения по умолчанию. Это значение также автоматически подсвечивается - на случай, если мы захотим его изменить (для чего не понадобится перемещать курсор стрелками или мышью). В нашем примере мы просто оставим текст по умолчанию.
Итак, вот как будет выглядеть окончательный исходный код:
После запуска нашего приложения приведенный выше код в том случае, если мы еще не прошли аутентификацию, отобразит ссылку "[Login]":
После аутентификации мы увидим строку приветствия, как на рисунке ниже:
Общее число нажатий клавиш для реализации всего сценария составило менее 15% от того объема текста, который пришлось бы набирать в предыдущей версии VS. Быстро печатая на клавиатуре, я смог написать весь код для данного сценария менее чем за 15 секунд :-)
Фрагменты кода ASP.NET MVC
Встроенные фрагменты кода доступны для всех элементов управления ASP.NET и элементов HTML-разметки.
Встроенные фрагменты кода также доступны для наиболее распространенных сценариев для отображений (view) ASP.NET MVC, а также для встроенных вспомогательных HTML-методов ASP.NET MVC.
К примеру, в коде отображения (view) ASP.NET MVC мы можем набрать "<act" и выбрать фрагмент кода "actionlink":
После завершения выбора и повторного нажатия клавиши Tab название фрагмента кода будет заменено на следующий код:
Заметьте, что значения "linktext" и "actionname" помечены как параметры фрагмента кода - это означает, что мы можем легко заменить их, не перемещая курсор стрелками на клавиатуре или же мышью. Значение первого параметра linktext выделено по умолчанию - т.е. мы можем сразу начать набирать нужный нам текст, чтобы заменить это значение, затем мы можем нажать Tab, чтобы выделить значение следующего параметра actionname и напечатать его новое значение:
Пользовательские фрагменты кода
В поставку Visual Studio 2010 будет включено более 200 встроенных фрагментов кода, которые вы сможете использовать сразу же после установки.
Но, что особенно приятно, вы не ограничены использованием лишь встроенных фрагментов кода - можете запросто создать ваши собственные (с заменяемыми значениями параметров) и не только импортировать их в VS 2010, но также поделиться ими с другими разработчиками. За счет этого вы сможете быстро автоматизировать наиболее часто выполняемые задачи.
В этой статье описывается поддержка фрагментов кода, которая уже реализована в VS 2008, и даются рекомендации, как создавать фрагменты кода и управлять ими.
Резюме
Фрагменты кода - это полезная возможность, позволяющая сократить число нажатий клавиш для набора исходного кода в редакторе и реализовывать в коде те или иные сценарии и задачи намного быстрее. А то, что фрагменты кода теперь поддерживаются не только для исходного кода VB и C#, но также и для HTML, ASP.NET и JavaScript, делает их еще более полезными, а вашу работу это может сделать еще более производительной.
Надеюсь, вы нашли для себя что-то полезное,
Скотт
P.S. Помимо блога, я в последнее время еще использую Twitter, чтобы публиковать краткие заметки и новые ссылки. Следить за моими публикациями на Twitter вы можете здесь: https://www.twitter.com/scottgu (@scottgu - это мой псевдоним на twitter)