ASP.NET MVC Урок 1-F / ASP.NET MVC Урок 7
.pdf$63 1(7 09& ǻȘȖȒ %RRWVWUDS M4XHU\ $MD[tutorial
ASP*, .NET*
Цель урока: Определить правила работы с html, js и css файлами. Bootstrap и дополнительный css. Структура jsфайлов. Использование jQuery, основные моменты, изучение селекторов,
событий и др. addClass, removeClass, attr, data, динамическое создание domобъекта, ajax.
Наконец мы приступаем к более детальному изучению клиентской части, которая уже в меньшей степени связана с asp.net mvc, но всё равно важна для вебразработки.
Twitter Bootstrap и css
Twitter Bootstrap – это cssфреймворк. Т.е. набор инструментов для создания блоков, кнопок, меток, форм и навигации. Наше приложение мы будем основывать на этом фрейморке.
Подробнее тут: http://twitter.github.com/bootstrap/ Установим bootstrap:
,QVWDOO 3DFNDJH 7ZLWWHU %RRWVWUDS
Удалим Jquery.UI:
8QLQVWDOO 3DFNDJH-TXHU\ 8, &RPELQHG
Добавим в BundleConfig bootstap и уберем оттуда jquery.UI (App_Start/BundleConfig.cs):
SXEOLF FODVV %XQGOH&RQILJ
^
SXEOLF VWDWLF YRLG 5HJLVWHU%XQGOHV%XQGOH&ROOHFWLRQ EXQGOHV
^
EXQGOHV$GGQHZ6FULSW%XQGOHa EXQGOHV MTXHU\,QFOXGH
a 6FULSWV MTXHU\
EXQGOHV$GGQHZ6FULSW%XQGOHa EXQGOHV PRGHUQL]U,QFOXGH
a 6FULSWV PRGHUQL]U
EXQGOHV$GGQHZ6FULSW%XQGOHa EXQGOHV ERRWVWUDS,QFOXGH
a 6FULSWV ERRWVWUDS
EXQGOHV$GGQHZ6W\OH%XQGOHa &RQWHQW FVV
,QFOXGHa &RQWHQW VLWH FVV ɧɟ ɩɟɪɟɩɭɬɚɣɬɟ ɩɨɪɹɞɨɤ
,QFOXGHa &RQWHQW ERRWVWUDS
`
`
Важно помнить про порядок приоритета задания стилей:
Наименее низким приоритетом обладают встроенные стили браузера
Пользовательский стиль в браузере
Наследуемые стили от родительских элементов
Следующие cssстили заданные во внешних файлах, тут правило важнее (при прочих равных условиях), если файл содержащий правило находится после файла содержащий предыдущее. Это же правило относится и к взаимному расположению правил внутри документа.
Далее по стоимости применения селекторов:
Теги имеют наименьший приоритет: K GLY S
Классы и псевдоклассы. Селектор:LWHP ^ ` KRYHU ^ `
Аттрибуты [attr=”value”]. Пример: >W\SH ´FKHFNER[´@ ^`
Идентификатор ID – наивысший приоритет. ТипаPDLQ ^ `
Еще более высоким приоритетом является задание стиля прямо в style теге:
GLY VW\OH ´ZLGWK S[´!GLY!
И наиболее высоким приоритетом является стиль с сопроводительным словом !important.
Основная работа в задании стилей идет с помощью тегов, классов (псевдоклассов), и атрибутов. Использовать LPSRUWDQW не рекомендуется, равно как и задавать стили в атрибуте style и использовать атрибут ID.
Для задания стилей будем использовать cssфайл Site.css. Так как в bootstrap уже заданы стили для базовых форм, удалим этот блок и оставим файл (/Content/Site.css):
6W\OHV IRU YDOLGDWLRQ KHOSHUV
ILHOG YDOLGDWLRQ HUURU^
FRORU I
`
ILHOG YDOLGDWLRQ YDOLG^
GLVSOD\QRQH
`
LQSXW YDOLGDWLRQ HUURU^
ERUGHU S[VROLGI
EDFNJURXQG FRORU IHH
`
YDOLGDWLRQ VXPPDU\ HUURUV^
IRQW ZHLJKWEROG
FRORU I
`
YDOLGDWLRQ VXPPDU\ YDOLG^
GLVSOD\QRQH
`
Это css стили, которые используются для вывода ошибок в методах+WPO 9DOLGDWLRQ0HVVDJH, +WPO 9DOLGDWLRQ6XPPDU\.
Теперь давайте определим правила, по которым мы будем создавать свой стиль:
Запрещено использовать селектор через id, типа 0DLQ. Это связано с тем, что хотя браузеры и обрабатывают все элементы содержащий данный атрибут, но в правилах DOM атрибут ID должен быть уникальный во всей странице.
Классы для офомления используют тип SmallCaps: someclassname, все с маленькой буквы, для разделения используется “”. Собственно, так, как это в самом CSS и используется.
Классы, предназначенные только для управления (использование исключительно в jsкоде) для разделения используют тип lowerCamelCase: someClassName. Собственно, как и соглашения по написанию кода в js или в jquery.
Атрибуты id задаются типом UpperCamelCase: LG ´6RPH%XWWRQ´.
Не используйте классы общего значения, такие как OLVW LWHP EXWWRQ WH[W XVHU LPDJH FRQWDLQHU ZUDSSHU на верхнем уровне.
Не усложняйте слова. Не используйте конструкцию типа: PDLQ FRQWDLQHU OHIW SDUW ZUDSSHU OLVW
Задайте популярные стили если необходимо, делайте это в общем описании типа:HUURU ^FRORU UHG ` OHIW ^ IORDW OHIW `
Используйте каскадное описание от общего к частному:
OLVW
^
`
OLVW LWHP
^
`
OL!ɢɫɩɨɥɶɡɭɣɬɟ ɫɟɥɟɤɬɨɪɵ ɞɥɹ ɡɚɞɚɧɢɹ ɝɥɭɛɢɧɵ ɩɪɢɦɟɧɟɧɢɹ ɫɬɢɥɹ
OLVW!LWHP
^
`
и для тегов с множественным классом:
LWHP RGG
^
`
для
GLY FODVV LWHP RGG!GLY!
используйте следующую структуру документа
Ƚɥɚɜɧɵɟ ɨɩɪɟɞɟɥɟɧɢɹ ɫɬɢɥɟɣ ɞɥɹ ɫɚɣɬɚ
ɨɫɧɨɜɧɨɣ ɲɪɢɮɬ
ɦɟɠɞɭɫɬɪɨɱɧɨɟ ɪɚɫɫɬɨɹɧɢɟ
ɪɚɡɦɟɪ ɲɪɢɮɬɚ
ɨɫɧɨɜɧɵɟ ɰɜɟɬɚ ɫɫɵɥɨɤ ɢ ɬɟɤɫɬɚ
K K K
D
S
ȼɫɩɨɦɨɝɚɬɟɥɶɧɵɟ ɤɥɚɫɫɵ
HUURU
ILHOG YDOLGDWLRQ HUURU ɢ ɞɪ
VKRZ PH ^ ERUGHU S[ VROLG UHG `
KLGGHQ ^GLVSOD\ QRQH `
UHODWLYH ^ SRVLWLRQ UHODWLYH `
Ɉɫɧɨɜɧɵɟ ɜɫɩɨɦɨɝɚɬɟɥɶɧɵɟ ɨɤɧɚ ɢ ɫɬɢɥɢ
SRSXS ZLQGRZ
SRSXS ZLQGRZ FORVH
SRSXS ZLQGRZ ZUDSSHU
SRSXS ZLQGRZ KHDGHU
HUURU PHVVDJH
LQIR PHVVDJH
Ɉɫɧɨɜɧɵɟ ɫɬɢɥɢ ɫɚɣɬɚ
KHDGHU
ORJR
XVHU ORJLQ
QDY PDLQ PHQX
PDLQ FRQWHQW
IRRWHU
Ƚɥɚɜɧɚɹ ɫɬɪɚɧɢɰɚ
ɋɬɪɚɧɢɰɚ ɜɯɨɞɚ
ɋɬɪɚɧɢɰɚ ɨɲɢɛɤɢ
Ɉɫɬɚɥɶɧɵɟ ɫɬɪɚɧɢɰɵ«
Структура htmlстраницы.
Подключим стили и js файлы к основному layout файлу
(/Areas/Default/Views/Shared/_Layout.cshtml):
'2&7<3( KWPO!KWPO!
KHDG!
PHWD FKDUVHW XWI!
PHWD QDPH YLHZSRUW FRQWHQW ZLGWK GHYLFH ZLGWK!
WLWOH!#9LHZ%DJ 7LWOHWLWOH!
#6W\OHV 5HQGHU a &RQWHQW FVV
#5HQGHU6HFWLRQ VW\OHV UHTXLUHG IDOVH
#6FULSWV 5HQGHU a EXQGOHV PRGHUQL]U
KHDG!
ERG\!
GLY FODVV QDYEDU QDYEDU IL[HG WRS!
GLY FODVV QDYEDU LQQHU!
GLY FODVV FRQWDLQHU!
XO FODVV QDY QDY SLOOV SXOO ULJKW!
#+WPO$FWLRQ 8VHU/RJLQ +RPH
XO!
GLY!
GLY!
GLY!
#5HQGHU%RG\
#6FULSWV 5HQGHU a EXQGOHV MTXHU\
#6FULSWV 5HQGHU a EXQGOHV ERRWVWUDS
#5HQGHU6HFWLRQ VFULSWV UHTXLUHG IDOVH
ERG\!
KWPO!
Что здесь происходит:
1.Мы получаем request и по запросу мы определяем маршрут /Default/Home/Index.
2.У данного контроллера/метода есть стандартный View – /Home/Index.cshtml
В начале файла объявляется, что он будет включен в Layout:
#^
9LHZ%DJ 7LWOH /HVVRQ3URMHFW
/D\RXW a$UHDV 'HIDXOW 9LHZV 6KDUHG B/D\RXW FVKWPO
`
Указанный layout выведет данные с помощью #5HQGHU%RG\. Запускаем:
Видно, что body заехал под панель навигации. В нашем файле переопределяем body (/Content/Site.css):
ERG\
^
SDGGLQJ WRS S[ LPSRUWDQW
`
Гораздо лучше.
Так как мы использовали классы для формы bootstap ранее, то регистрация у нас выглядит теперь так:
Поправим выбор даты рождения, добавим классы в Html.DropDownList() (/Areas/Default/Views/User/Register.cshtml):
«
GLY FODVV FRQWUROV!
#+WPO 'URS'RZQ/LVW %LUWKGDWH'D\ 0RGHO %LUWKGDWH'D\6HOHFW/LVW QHZ ^ #FODVV
VHOHFW GD\ `
#+WPO 'URS'RZQ/LVW %LUWKGDWH0RQWK 0RGHO %LUWKGDWH0RQWK6HOHFW/LVW QHZ ^ #FODVV
VHOHFW PRQWK `
#+WPO 'URS'RZQ/LVW %LUWKGDWH<HDU 0RGHO %LUWKGDWH<HDU6HOHFW/LVW QHZ ^ #FODVV
VHOHFW \HDU `
GLY!
Так как вероятно, мы еще гдето будем использовать эту конструкцию по выбору даты (хотя не факт), то это более общее, чем частное (которое относится именно к регистрации) (/Content/Site.css):
VHOHFW GD\
^
ZLGWK S[
`
VHOHFW PRQWK
^
ZLGWK S[
`
VHOHFW \HDU
^
ZLGWK S[
`
Проверяем:
Уиии!
Структура js файлов
Переходим к описанию js файлов. Мы используем jquery как основной фреймворк по работе с клиентской частью кода. Один наш пользовательский js файл (назовем его /Scripts/common.js) будет вызываться всегда. В него будут добавлены те функции, которые будут присутствовать на любой странице. Остальные jsфайлы будут вызываться опционально.
Чтобы не путаться создадим 2 папки «admin» и «default» в /Scripts.
Все файлы будут иметь уникальные имена, которые будут записаны в SmallCase формате, и будут относиться к определенной странице (в основном). Например: userregister.js – файл, который будет включен в страницу User/Register.cshtml:
#VHFWLRQ VFULSWV ^
#6FULSWV 5HQGHU 6FULSWV GHIDXOW XVHU UHJLVWHU MV
`
Эта секция выведется в том месте, где описана в _Layout.cshtml (/Areas/Default/Views/Shared/_Layout.cshtml):
«
#6FULSWV 5HQGHU a EXQGOHV ERRWVWUDS
#6FULSWV 5HQGHU a EXQGOHV FRPPRQ
#5HQGHU6HFWLRQ VFULSWV UHTXLUHG IDOVH
ERG\!
В /App_Start/BundleConfig.cs тем временем добавим описание:
EXQGOHV$GGQHZ6FULSW%XQGOHa EXQGOHV FRPPRQ,QFOXGH
a 6FULSWV FRPPRQ MV
Все пользовательские js классы, за исключением плагинов, будут иметь следующую структуру:
IXQFWLRQ )XQFWLRQ1DPH^
BWKLV WKLV
WKLVLQLW IXQFWLRQ^
ɭɫɬɚɧɨɜɤɚ ɨɛɪɚɛɨɬɤɢ ɧɚɠɚɬɢɣ ɢɥɢ ɢɧɵɯ ɦɚɧɢɩɭɥɹɰɢɣ
EXWWRQFOLFNIXQFWLRQ^
YDULG WKLVDWWULG
BWKLV VD\6RPHWKLQJ LG
`
`
ɞɪɭɝɢɟ ɩɭɛɥɢɱɧɵɟ ɦɟɬɨɞɵ
WKLVVD\6RPHWKLQJ IXQFWLRQLG ^
DOHUWɉɵɳɶ ɩɵɳɶLG
`
ɞɪɭɝɢɟ ɩɪɢɜɚɬɧɵɟ ɦɟɬɨɞɵ
IXQFWLRQ VD\6RPHWKLQJLG ^
DOHUWɉɵɳɶ ɩɵɳɶ ɇɨ ɬɫɫɫLG
`
`
YDUIXQFWLRQ1DPH QXOO
UHDG\IXQFWLRQ^
IXQFWLRQ1DPH QHZ)XQFWLRQ1DPH
IXQFWLRQ1DPH LQLW
`
Рассмотрим подробнее:
1.IXQFWLRQ )XQFWLRQ1DPH имеет имя в стиле UpperCamelCase по имени файла, в котором находится (&RPPRQ и 8VHU5HJLVWHU в файлах common.js и userregister.js соответственно)
2.BWKLV WKLV Сохранение ссылки на данную функцию, чтобы была возможность использовать внутри delegateфункций
3.WKLV LQLW – внешняя (public) функция, где будет происходить инициализация обработки.
4.YDU IXQFWLRQ1DPH QXOO – создание глобальной переменной. Возможно использование из других файлов.
5.UHDG\ – вызывается после того, как сформирована DOMструктура. JQuery функция.
6.IXQFWLRQ1DPH QHZ )XQFWLRQ1DPH — создаем объект класса.
7.IXQFWLRQ1DPH LQLW — инициализируем его.
Минификация ресурсных файлов
Так как ресурсные файлы, со временем вырастают, и с другой стороны идет развитие мобильного интернета для мобильных устройств, в которых количество передаваемых данных играет не последнюю роль, минификация получения страницы сводится к следующим вещам:
Уменьшение количества запросов к ресурсным файлам Уменьшение ресурсных файлов.
Уменьшение количествава запросов к изображениям, особенно маленьким. Это делается двумя способами:
?
1.Использование спрайта. На большой холст добавляется много элементов оформления сразу. После чего в css прописывают смещение и ширину\высоту части этого холста.
Например рисунок: