Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

ASP.NET MVC Урок 1-F / ASP.NET MVC Урок 7

.pdf
Скачиваний:
49
Добавлен:
09.03.2016
Размер:
1.45 Mб
Скачать

$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: some­class­name, все с маленькой буквы, для разделения используется “­”. Собственно, так, как это в самом 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 формате, и будут относиться к определенной странице (в основном). Например: user­register.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 и user­register.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 прописывают смещение и ширину\высоту части этого холста.

Например рисунок:

Соседние файлы в папке ASP.NET MVC Урок 1-F