c# web. Занятие 12

Темы лекции: ASP.NET. MVC. Часть 4.

Практическое задание: ASP.NET. MVC.

Тренер: Игорь Шкулипа, к.т.н.

Разработка Веб-приложений на платформе Microsoft .NET Framework.

Занятие 12

http://www.slideshare.net/IgorShkulipa 2

Использование JavaScript/jQuery

По умолчанию все проекты, кроме проектов пошаблону Empty, уже содержат необходимыйнабор скриптов, в том числе библиотекиjQuery

большинство скриптов имеют свои двойники ссуффиксом min. Оба скрипта представляютодну и ту же функциональность. Но втораяверсия представляет минимизированнуюверсию (поэтому и идет с суффиксом min).

Минимизированные скрипты гораздо меньшепо объему (иногда даже на 60-70%),поэтому их предпочтительнее использоватьв реальных приложениях, так какпользователь тратит меньше времени итрафика на их загрузку. В то же время ихне очень удобно читать. Поэтому длябольшего удобства разработчиков полные иминимизированные скрипты идут вместе.

http://www.slideshare.net/IgorShkulipa


Некоторые скрипты

• jquery-[version].js - базовая библиотека jQuery, на которую опираютсябольшинство других скриптов.

• jquery-ui-[version].js - библиотека jQuery UI, которая включает различныевиджеты, предназначенные для создания пользовательского интерфейса

• jquery.unobtrusive-ajax.js - представляет функциональность дляненавязчивого JavaScript

• jquery.validate.js - представляет функционал для валидации на сторонеклиента

• jquery.validate.unobtrusive.js - предоставляет поддержку ненавязчивойвалидации

• jquery-[version]-vsdoc.js и jquery.validate-vsdoc.js - используются дляподдержки документации и IntelliSense по соответствующим библиотекам в VisualStudio

Чтобы подключить файл javascript используется метод Render классаSystem.Web.Optimization.Scripts:

@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")



jQuery

jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействииJavaScript, HTML и CSS.

Что умеет jQuery:

• Обращаться к любому элементу DOM (объектной моделидокумента) и не только обращаться, но и манипулировать ими.

• Работать с событиями.

• Легко осуществлять различные визуальные эффекты.

• Работать с AJAX.

• Имеет огромное количество JavaScript плагинов, предназначенныхдля создания элементов пользовательских интерфейсов.


http://jquery.com/

http://jquery.com/


Функция $()

$("div") вернет все div-элементы на странице.

$(".someBlock") вернет все элементы с классом someBlock.

$("#content") вернет элемент с идентификатором content.

$("#content2 div.someBlock")

вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2.

$("div:odd") вернет div-элементы, находящиеся на странице под нечетными номерами.

$("[value = 5]") вернет все элементы с атрибутом value, равным 5.

С помощью функции $() из библиотеки, можно находить элементы на странице по различным параметрам



Функция $()

$("#bigIt").css("height") возвратит значение высоты у элемента с идентификатором bigIt.

$("div").css("width", "20px") установит новое значение ширины всем div-элемента на странице.

$("#bigIt").attr("class") возвратит значение класса элемента с id = bigIt.

$("#bigIt").attr("class", "box") установит новое значение атрибута class у элемента с id = bigIt.

$("#bigIt").html(<p>Новый!</p>)

изменит все html-содержимое элемента с id = bigIt, на заданное в методе html.

$("#bigIt").text() возвратит текст, находящийся внутри элемента с id = bigIt.

$(".someBox").empty() очистить от содержимого элементы с классом someBox.



Цепочки методов

Важной особенностью большинства методов jQuery, является возможностьсвязывать их в цепочки. Методы, манипулирующие элементамидокумента, обычно возвращают эти объекты для дальнейшегоиспользования, что позволяет писать примерно следующее:

$("#bigIt").empty().attr("class", "noContent");

// в результате, у элемента с идентификатором bigIt будет удалено

все содержимое,

// после чего ему будет установлен класс noContent.



Работа с набором элементов

Помимо манипуляций с выбранными элементами, jQuery позволяетработать с самим набором: изменять его, а так же работать сэлементами по отдельности.

$("div").parent() вернет родительские элементы всех div-ов.

$("div").children() вернет дочерние элементы всех div-ов.

$("#someId").next() вернет элемент, лежащий сразу после someId.

$("div").prev() вернет элементы, лежащие перед div'ами.

$("div").eq(i) вернет div-элемент, с индексом i в наборе.

$("div").get(i) вернет DOM-объект div'а, с индексом i.

$("div").get() вернет массив DOM-объеков всех div-ов.

$("div").size() вернет размер набора (количествово div-ов).



Фильтры jQuery

Фильтр Значение

:eq(n)Выбирает n-й элемент выборки (нумерация начинается с нуля)

:even Выбирает элементы с четными номерами

:odd Выбирает элементы с нечетными номерами

:first Выбирает первый элемент выборки

:last Выбирает последний элемент выборки

:gt(n) Выбирает все элементы с номером, большим n

:lt(n) Выбирает все элементы с номером, меньшим n

:header Выбирает все заголовки (h1, h2, h3)

:not(селектор)Выбирает все элементы, которые не соответствуют селектору, указанному в скобках



Фильтры контента


:contains('content') Получает все элементы, которые содержат content

:has('селектор')

Получает все элементы, которые содержат хотя бы один дочерний элемент, соответствующий селектору

:emptyПолучает все элементы, которые не имеют дочерних элементов

:first-child

Получает все элементы, которые являются первыми дочерними элементами в своих родителях

:last-child

Получает все элементы, которые являются последними дочерними элементами в своих родителях

:nth-child(n)

Получает все элементы, которые являются n-ными элементами в своих родителях (нумерация идет с единицы)

:only-child

Получает все элементы, которые являются единственными дочерними элементами в своих родителях

:parentПолучает все элементы, которые имеют, как минимум, один дочерний элемент



Фильтры форм


:buttonПолучает все элементы button и элементы input с типом button

:checkbox Получает все элементы checkbox

:checkedПолучает все отмеченные элементы checkbox и radio

:disabled Получает все элементы, которые отключены

:enabled Получает все элементы, которые включены

:input Получает все элементы input

:password Получает все элементы password

:radio Получает все элементы radio

:reset Получает все элементы reset

:selected Получает все отмеченные элементы option

:submit Получает все элементы input с типом submit

:text Получает все элементы input с типом text



События jQuery

jQuery предоставляет специальные методы для распространенныхсобытий, как например, click или submit. Можно повесить своиобработчики для событий mouseover или keydown на любой элементвеб-страницы.

Например, обработчик нажатия мыши на элемент с id="bg" мог бы

выглядеть следующим образом.

$("#bg").mousedown (function (e) {}});

Или обработка нажатие клавиши:

$(document).keydown(function(e){

// если нажата клавиша вверх

if (e.which==38)

{

// поднимаем некоторый элемент на 5 пикселей вверх

$("#paddleB").css("top",top-5);

}

});



Методы jQuery

Метод Описание

addClass('someClass') Добавляет для выбранного элемента класс someClass

removeClass('someClass') Удаляет для выбранного элемента класс someClass

toggleClass('someClass')Переключает для выбранного элемента класс someClass - если его нет, он добавляется, а если он есть - то удаляется

css('свойство', 'значение')Устанавливает для указанного свойства выбранного элемента указанное значение ($("#paddleB").css("top",25);)

append('новый элемент')

Вставляет внутрь выбранного элемента новый элемент в качестве последнего дочернего ($("#results").append('<li>Новый элемент списка</li>');)

prepend('новый элемент')Вставляет внутрь выбраного элемента новый элемент в качестве первого дочернего

empty() Удаляет все дочерние элементы у выбранного элемента

remove() Удаляет элемент из структуры элементов DOM

attr('атрибут','значение') Устанавливает для атрибута новое значение

removeAttr('атрибут') Удаляет атрибут у выбранных элементов

children() Получает все дочерние элементы у выбранных элементов

parent() Получает все родительские элементы у выбранных элементов

parent() Получает все родительские элементы у выбранных элементов

hide() Скрывает выбранные элементы

show() Отображает выбранные элементы

toggle() Скрывает видимые элементы и отображает невидимые

animate() Анимирует элемент



Пример jQuery

Например, стандартный прием, когда по наведению курсора мыши наизображение, оно увеличивается в размерах, а после отвода курсора -уменьшается:

$(function () {

$("img").mouseover(function () {

$(this).animate({ height: '+=20', width: '+=20' });

});

$("img").mouseout(function () {

$(this).animate({ height: '-=20', width: '-=20' });

});

});

Сначала при помощи селектора мы выбираем все элементы img, затемвешаем на них обработчик наведения курсора mouseover. Обработчиксобытия наведения мыши в качестве аргумента принимает анонимнуюфункцию, которая срабатывает при наведении курсора.



AJAX

AJAX (Асинхронный JavaScript и XML) представляет собой технологиюгибкого взаимодействия между клиентом и сервером. Благодаря ееиспользованию мы можем осуществлять асинхронные запросы ксерверу без перезагрузки всей страницы. Правда, в настоящее времявсе больше вместо формата XML используется формат JSON длявзаимодействия между клиентом и сервером.

Применительно к ASP.NET MVC использование AJAX вылилось в целуюконцепцию под названием "ненавязчивого AJAX" и ненавязчивогоJavaScript (unobtrusive Ajax/JavaScript).

Смысл этой концепции заключается в том, что весь необходимый кодJavaScript используется не на самой веб-странице, а помещается вотдельные файлы с расширением *.js. А затем с помощью тега<script> мы а веб-станице ссылаемся на данный файл кода.

Таким образом мы отделяем визуализацию от логики приложения.

Кроме того, выделение скрипта в отдельный загружаемый файлувеличивает производительность сайта, поскольку файл сохраняется вкэше и затем от туда подгружается.



Настройка ненавязчивого JavaScript/ AJAX

Во-первых, соответствующие настройки должны быть указаны в файлеWeb.config:

<appSettings>

<add key="webpages:Version" value="2.0.0.0" />

<add key="webpages:Enabled" value="false" />

<add key="PreserveLoginUrl" value="true" />

<add key="ClientValidationEnabled" value="true" />

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

</appSettings>

Во-вторых, нам надо подключить соответствующие файлы JavaScript:

@Scripts.Render("~/scripts/jquery-1.7.1.js")

@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")

Первый файл - общая библиотека jQuery.

Второй файл (jquery.unobtrusive-ajax.js) подключает к приложениюфункциональность Ajax-хелперов, например, Ajax-форм.



AJAX-хелперы

Хелпер Описание

Ajax.ActionLink

Создает гиперссылку на действие контроллера, по нажатию на которую происходит ajax-запрос к этому действию

Ajax.RouteLink

Похож на хелпер Ajax.ActionLink, только ссылка создается на определенный маршрут, а не на действие контроллера

Ajax.BeginForm

Создает html-форму, которая отправляет ajax-запросы к определенному действию определенного контроллера

Ajax.BeginRouteForm

Похож на Ajax.BeginForm, только ajax-запросы направляются не к действию контроллера, к по определенному маршруту

Ajax.GlobalizationScriptСоздает ссылку на скрипт, который содержит информацию о культуре

Ajax.JavaScriptStringEncode Кодирует строку для использования в JavaScript



Ajax-Формы

@using (Ajax.BeginForm("SearchByName",

new AjaxOptions {

UpdateTargetId = "searchresults",

InsertionMode = InsertionMode.Replace }))

{

<input type="text" name="name" id="search" />

<input type="submit" value="Поиск" id="send" />

}

<p>

<div id="searchresults" class="simplediv">

</div>

</p>



Параметры объекта AjaxOptions

• Confirm - настраивает сообщение о подтверждении отправки запросана сервер. Если пользователь не подтвердит, то запрос не будетотправлен

• HttpMethod - устанавливает метод (Get или Post), с помощьюкоторого выполняется запрос

• InsertionMode - устанавливает, как полученные результаты будутотображаться на странице. Может принимать одно из трех значенийперечисления InsertionMode: InsertAfter, InsertBefore и Replace(поумолчанию).

• LoadingElementId- устанавливает id элемента html-страницы,который будет отображаться во время запроса. Обычно это какая-нибудь анимация, которая дает знать, что некоторая работавыполняется в фоновом режиме

• LoadingElementDuration - устанавливает количество миллисекунд,через которое появится элемент, указанный в параметреLoadingElementId



Параметры объекта AjaxOptions

• OnBegin - задает обратный вызов перед отправкой запроса.Соотносится с событием beforeSend библиотеки jQuery

• OnComplete - задает обратный вызов, который вызывается послеудачного выполнения запроса. Соотносится с событием completeбиблиотеки jQuery

• OnFailure - задает обратный вызов, который вызывается посленеудачного выполнения запроса. Соотносится с событием errorбиблиотеки jQuery

• OnSuccess - задает обратный вызов, который вызывается послевыполнения запроса (как удачного, так и неудачного). Соотносится ссобытием success библиотеки jQuery

• UpdateTargetId - указывает на id элемента, в котором будутвыводиться результаты запроса

• Url - устанавливает адрес Url сервера, на который отправляетсязапрос. Установив данное свойство, можно не использовать названиеимя контроллера и его действие в качестве параметров Ajax.BeginForm



AJAX-ссылки

Другим часто используемым AJAX-хелпером является Ajax.ActionLink. Онво многом похож на хелпер Ajax.BeginForm за тем исключением, чтогенерирует специальные ajax-ссылки.

@Ajax.ActionLink("Random persone",

"RandomPersone",

new AjaxOptions {

UpdateTargetId = "randompersone",

InsertionMode = InsertionMode.Replace })

<p>

<div id="randompersone" class="boarddiv">

</div>

</p>



AJAX-запросы с помощью jQuery

<script type="text/javascript">

$(document).ready(function () {

$('#submit').click(function (e) {

var name = $('#search2').val();

$('#searchresults2').load(

"http://localhost:58923//Home/SearchByName?name="

+ name);

});

});

</script>



Пример. Немного обновленная модель

public class TEntity {

public int ID { get; set; }

public string Name { get; set; }

}

public class Position : TEntity {

}

[Serializable]

public class Persone : TEntity {

public string Surname { get; set; }

public string Middle { get; set; }

public string Login { get; set; }

public string Password { get; set; }

public string Email { get; set; }

public int PosID { get; set; }

public virtual Position Pos { get; set; }

public override string ToString() {

return Surname + " " + Name + " " + Middle;

}

}

public class TeamContext : DbContext {

public DbSet<Persone> Persones { get; set; }

public DbSet<Position> Positions { get; set; }

}



Пример. Немного обновленный репозиторий

public interface IRepository<T> {

void Insert(T entity);

void Delete(T entity);

void Update(T entity, T newValue);

IQueryable<T> SelectAll();

IEnumerable<T> SelectByName(string name);

T Select(int id);

void SubmitAll();

}

public class Repository<T> : IRepository<T> where T : TEntity {

...

public IEnumerable<T> SelectByName(string name) {

var res = from d in DBContext.Set<T>()

where d.Name.ToLower().Contains(name.ToLower())

select d;

if (res.Count<T>() > 0) {

return res.ToList<T>();

}

else {

return null;

}

}

...

}



Пример. Контроллер

static Random random = new Random();

...

public ActionResult SearchByName(string name)

{

var personsFound = persons.SelectByName(name);

return PartialView(personsFound);

}

...

public ActionResult RandomPersone()

{

int id = random.Next(persons.SelectAll().Count<Persone>());

var persone = persons.Select(id);

return PartialView(persone);

}

...



Пример. Частичный типизированный SearchByName.cshtml

@model IEnumerable<jsjqajx.Models.Persone>

@if (Model != null && Model.Count() > 0)

{

<ul>

@foreach (var item in Model)

{

<li>@item.ToString()</li>

}

</ul>

}



Пример. Частичный типизированный RandomPersone.cshtml

@model jsjqajx.Models.Persone

@if (Model != null)

{

<ul>

<li>@Model.ToString()</li>

</ul>

}



Пример. Часть Index.cshtml

<p>

@using (Ajax.BeginForm("SearchByName", new AjaxOptions {



{



}

</p><p>

<div id="searchresults" class="simplediv"></div>

</p><p>

@Ajax.ActionLink("Random persone", "RandomPersone", new AjaxOptions {



</p><p>

<div id="randompersone" class="boarddiv"></div>

</p>



Пример. Часть Index.cshtml

<p>

<input type="text" name="name2" id="search2" />

<input type="submit" id="submit" value='Поиск' />

<div id="searchresults2" class="redleafdiv"></div>







+ name);

});

});

</script>

</p>



Результат



jQuery и jQuery UI

• jQuery Учебник

• jQuery Справочник

• jQuery UI Учебник

• jQuery UI Справочник


http://www.wisdomweb.ru/JQ/jquery-first.php

http://www.wisdomweb.ru/JQd/selectors.php

http://www.wisdomweb.ru/JQ/ui.php

http://www.wisdomweb.ru/JQd/interaction.php


jQuery UIОдним из наиболее популярных плагинов jQuery является jQuery UI,

поэтому его и включили в стандартный набор скриптов.

Этот плагин предназначен для работы с пользовательским интерфейсом исодержит, во-первых, ряд интересных визуальных эффектов, типаbounce, explode, fade, pulsate и shake.

Во-вторых, он содержит набор виджетов, как accordion, autocomplete,button, datepicker, dialog, progressbar, slider и tabs.

Чтобы начать работать с jQuery UI, надо прежде всего подключить этубиблиотеку:

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")"

rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")"

type="text/javascript"></script>

Или:

@Styles.Render("~/Content/themes/base/jquery-ui.css")

@Scripts.Render("~/Scripts/jquery-ui-1.8.24.min.js")



Виджеты jQuery UI

Виджет Описание

accordion Превращает выбранный элемент в виджет accordion.

autocompleteПревращает выбранный элемент в виджет autocomplete.

buttonПревращает выбранный элемент в стилизованную кнопку, внешний вид которой можно настраивать.

datepicker Превращает выбранный элемент в виджет datepicker.

dialog Превращает выбранный элемент в диалоговое окно.

progressbar Превращает выбранный элемент в полосу загрузки.

slider Превращает выбранный элемент в виджет slider.

tabs Превращает выбранный элемент в виджет tabs.



Пример

<div id="accordion">

<h2><a href="#">Ajax-форма</a></h2>

<div>

<p>

@using (Ajax.BeginForm("SearchByName", new AjaxOptions {



{



}

</p>

<p>

<div id="searchresults" class="simplediv">

</div>

</p>

</div>



Пример

<h2><a href="#">Ajax-ссылка</a></h2>

<div>

<p>

@Ajax.ActionLink("Random persone", "RandomPersone", new AjaxOptions {



</p>

<p>

<div id="randompersone" class="boarddiv">

</div>

</p>

</div>



Пример

<h2><a href="#">jQuery-запрос</a></h2>

<div>

<p>

<input type="text" name="name2" id="search2" />

<input type="submit" id="submit" value='Поиск' />

<div id="searchresults2" class="redleafdiv"></div>







+ name);

});

});

</script>

</p>

</div>

</div>



Пример


$("#accordion").accordion();

</script>



Результат



Пример 2

<div id="accordion">

<ul id="accordion-nav">

<li><a href="#tab1">Ajax-форма</a></li>

<li><a href="#tab2">Ajax-ссылка</a></li>

<li><a href="#tab3">jQuery-запрос</a></li>

</ul>

<div id="tab1">

...

</div>

<div id="tab2">

...

</div>

<div id="tab3">

...

</div>

</div>



Пример 2


$("#accordion").tabs();

</script>



Результат



Лабораторная работа №12

Лабораторной работе по ASP.NET MVC добавить JavaScript/Ajax/jQuery-активность (анимация элементов по событию, простая игра или т.п.).


c# web. Занятие 12

Education