Темы лекции: 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 3
Некоторые скрипты
• 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 по соответствующим библиотекам в Visual
Studio
Чтобы подключить файл javascript используется метод Render класса
System.Web.Optimization.Scripts:
@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")
http://www.slideshare.net/IgorShkulipa 4
jQuery
jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействии
JavaScript, HTML и CSS.
Что умеет jQuery:
• Обращаться к любому элементу DOM (объектной модели
документа) и не только обращаться, но и манипулировать ими.
• Работать с событиями.
• Легко осуществлять различные визуальные эффекты.
• Работать с AJAX.
• Имеет огромное количество JavaScript плагинов, предназначенных
для создания элементов пользовательских интерфейсов.
http://www.slideshare.net/IgorShkulipa 5
Функция $()
$("div") вернет все div-элементы на странице.
$(".someBlock") вернет все элементы с классом
someBlock.
$("#content") вернет элемент с идентификатором
content.
$("#content2 div.someBlock")
вернет div-элементы с классом
someBlock, которые находятся внутри
элемента с идентификатором
content2.
$("div:odd") вернет div-элементы, находящиеся на
странице под нечетными номерами.
$("[value = 5]") вернет все элементы с атрибутом
value, равным 5.
С помощью функции $() из библиотеки, можно находить элементы на
странице по различным параметрам
http://www.slideshare.net/IgorShkulipa 6
Функция $()
$("#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.
http://www.slideshare.net/IgorShkulipa 7
Цепочки методов
Важной особенностью большинства методов jQuery, является возможность
связывать их в цепочки. Методы, манипулирующие элементами
документа, обычно возвращают эти объекты для дальнейшего
использования, что позволяет писать примерно следующее:
$("#bigIt").empty().attr("class", "noContent");
// в результате, у элемента с идентификатором bigIt будет удалено
все содержимое,
// после чего ему будет установлен класс noContent.
http://www.slideshare.net/IgorShkulipa 8
Работа с набором элементов
Помимо манипуляций с выбранными элементами, 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-ов).
http://www.slideshare.net/IgorShkulipa 9
Фильтры jQuery
Фильтр Значение
:eq(n) Выбирает n-й элемент выборки (нумерация
начинается с нуля)
:even Выбирает элементы с четными номерами
:odd Выбирает элементы с нечетными номерами
:first Выбирает первый элемент выборки
:last Выбирает последний элемент выборки
:gt(n) Выбирает все элементы с номером, большим n
:lt(n) Выбирает все элементы с номером, меньшим n
:header Выбирает все заголовки (h1, h2, h3)
:not(селектор) Выбирает все элементы, которые не
соответствуют селектору, указанному в скобках
http://www.slideshare.net/IgorShkulipa 10
Фильтры контента
Фильтр Значение
:contains('content') Получает все элементы, которые содержат content
:has('селектор')
Получает все элементы, которые содержат хотя
бы один дочерний элемент, соответствующий
селектору
:empty Получает все элементы, которые не имеют
дочерних элементов
:first-child
Получает все элементы, которые являются
первыми дочерними элементами в своих
родителях
:last-child
Получает все элементы, которые являются
последними дочерними элементами в своих
родителях
:nth-child(n)
Получает все элементы, которые являются n-ными
элементами в своих родителях (нумерация идет с
единицы)
:only-child
Получает все элементы, которые являются
единственными дочерними элементами в своих
родителях
:parent Получает все элементы, которые имеют, как
минимум, один дочерний элемент
http://www.slideshare.net/IgorShkulipa 11
Фильтры форм
Фильтр Значение
: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
http://www.slideshare.net/IgorShkulipa 12
События 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);
}
});
http://www.slideshare.net/IgorShkulipa 13
Методы 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() Анимирует элемент
http://www.slideshare.net/IgorShkulipa 14
Пример jQuery
Например, стандартный прием, когда по наведению курсора мыши на
изображение, оно увеличивается в размерах, а после отвода курсора -
уменьшается:
$(function () {
$("img").mouseover(function () {
$(this).animate({ height: '+=20', width: '+=20' });
});
$("img").mouseout(function () {
$(this).animate({ height: '-=20', width: '-=20' });
});
});
Сначала при помощи селектора мы выбираем все элементы img, затем
вешаем на них обработчик наведения курсора mouseover. Обработчик
события наведения мыши в качестве аргумента принимает анонимную
функцию, которая срабатывает при наведении курсора.
http://www.slideshare.net/IgorShkulipa 15
AJAX
AJAX (Асинхронный JavaScript и XML) представляет собой технологию
гибкого взаимодействия между клиентом и сервером. Благодаря ее
использованию мы можем осуществлять асинхронные запросы к
серверу без перезагрузки всей страницы. Правда, в настоящее время
все больше вместо формата XML используется формат JSON для
взаимодействия между клиентом и сервером.
Применительно к ASP.NET MVC использование AJAX вылилось в целую
концепцию под названием "ненавязчивого AJAX" и ненавязчивого
JavaScript (unobtrusive Ajax/JavaScript).
Смысл этой концепции заключается в том, что весь необходимый код
JavaScript используется не на самой веб-странице, а помещается в
отдельные файлы с расширением *.js. А затем с помощью тега
<script> мы а веб-станице ссылаемся на данный файл кода.
Таким образом мы отделяем визуализацию от логики приложения.
Кроме того, выделение скрипта в отдельный загружаемый файл
увеличивает производительность сайта, поскольку файл сохраняется в
кэше и затем от туда подгружается.
http://www.slideshare.net/IgorShkulipa 16
Настройка ненавязчивого 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-форм.
http://www.slideshare.net/IgorShkulipa 17
AJAX-хелперы
Хелпер Описание
Ajax.ActionLink
Создает гиперссылку на действие контроллера,
по нажатию на которую происходит ajax-запрос к
этому действию
Ajax.RouteLink
Похож на хелпер Ajax.ActionLink, только ссылка
создается на определенный маршрут, а не на
действие контроллера
Ajax.BeginForm
Создает html-форму, которая отправляет ajax-
запросы к определенному действию
определенного контроллера
Ajax.BeginRouteForm
Похож на Ajax.BeginForm, только ajax-запросы
направляются не к действию контроллера, к по
определенному маршруту
Ajax.GlobalizationScript Создает ссылку на скрипт, который содержит
информацию о культуре
Ajax.JavaScriptStringEncode Кодирует строку для использования в JavaScript
http://www.slideshare.net/IgorShkulipa 18
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>
http://www.slideshare.net/IgorShkulipa 19
Параметры объекта AjaxOptions
• Confirm - настраивает сообщение о подтверждении отправки запроса
на сервер. Если пользователь не подтвердит, то запрос не будет
отправлен
• HttpMethod - устанавливает метод (Get или Post), с помощью
которого выполняется запрос
• InsertionMode - устанавливает, как полученные результаты будут
отображаться на странице. Может принимать одно из трех значений
перечисления InsertionMode: InsertAfter, InsertBefore и Replace(по
умолчанию).
• LoadingElementId- устанавливает id элемента html-страницы,
который будет отображаться во время запроса. Обычно это какая-
нибудь анимация, которая дает знать, что некоторая работа
выполняется в фоновом режиме
• LoadingElementDuration - устанавливает количество миллисекунд,
через которое появится элемент, указанный в параметре
LoadingElementId
http://www.slideshare.net/IgorShkulipa 20
Параметры объекта AjaxOptions
• OnBegin - задает обратный вызов перед отправкой запроса.
Соотносится с событием beforeSend библиотеки jQuery
• OnComplete - задает обратный вызов, который вызывается после
удачного выполнения запроса. Соотносится с событием complete
библиотеки jQuery
• OnFailure - задает обратный вызов, который вызывается после
неудачного выполнения запроса. Соотносится с событием error
библиотеки jQuery
• OnSuccess - задает обратный вызов, который вызывается после
выполнения запроса (как удачного, так и неудачного). Соотносится с
событием success библиотеки jQuery
• UpdateTargetId - указывает на id элемента, в котором будут
выводиться результаты запроса
• Url - устанавливает адрес Url сервера, на который отправляется
запрос. Установив данное свойство, можно не использовать название
имя контроллера и его действие в качестве параметров Ajax.BeginForm
http://www.slideshare.net/IgorShkulipa 21
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>
http://www.slideshare.net/IgorShkulipa 22
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>
http://www.slideshare.net/IgorShkulipa 23
Пример. Немного обновленная модель
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; }
}
http://www.slideshare.net/IgorShkulipa 24
Пример. Немного обновленный репозиторий
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;
}
}
...
}
http://www.slideshare.net/IgorShkulipa 25
Пример. Контроллер
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);
}
...
http://www.slideshare.net/IgorShkulipa 26
Пример. Частичный типизированный
SearchByName.cshtml
@model IEnumerable<jsjqajx.Models.Persone>
@if (Model != null && Model.Count() > 0)
{
<ul>
@foreach (var item in Model)
{
<li>@item.ToString()</li>
}
</ul>
}
http://www.slideshare.net/IgorShkulipa 27
Пример. Частичный типизированный
RandomPersone.cshtml
@model jsjqajx.Models.Persone
@if (Model != null)
{
<ul>
<li>@Model.ToString()</li>
</ul>
}
http://www.slideshare.net/IgorShkulipa 28
Пример. Часть Index.cshtml
<p>
@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><p>
<div id="searchresults" class="simplediv"></div>
</p><p>
@Ajax.ActionLink("Random persone", "RandomPersone", new AjaxOptions {
UpdateTargetId = "randompersone",
InsertionMode = InsertionMode.Replace })
</p><p>
<div id="randompersone" class="boarddiv"></div>
</p>
http://www.slideshare.net/IgorShkulipa 29
Пример. Часть Index.cshtml
<p>
<input type="text" name="name2" id="search2" />
<input type="submit" id="submit" value='Поиск' />
<div id="searchresults2" class="redleafdiv"></div>
<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>
</p>
http://www.slideshare.net/IgorShkulipa 30
Результат
http://www.slideshare.net/IgorShkulipa 31
jQuery и jQuery UI
• jQuery Учебник
• jQuery Справочник
• jQuery UI Учебник
• jQuery UI Справочник
http://www.slideshare.net/IgorShkulipa 32
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")
http://www.slideshare.net/IgorShkulipa 33
Виджеты jQuery UI
Виджет Описание
accordion Превращает выбранный элемент в виджет accordion.
autocomplete Превращает выбранный элемент в виджет
autocomplete.
button Превращает выбранный элемент в стилизованную
кнопку, внешний вид которой можно настраивать.
datepicker Превращает выбранный элемент в виджет datepicker.
dialog Превращает выбранный элемент в диалоговое окно.
progressbar Превращает выбранный элемент в полосу загрузки.
slider Превращает выбранный элемент в виджет slider.
tabs Превращает выбранный элемент в виджет tabs.
http://www.slideshare.net/IgorShkulipa 34
Пример
<div id="accordion">
<h2><a href="#">Ajax-форма</a></h2>
<div>
<p>
@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>
<p>
<div id="searchresults" class="simplediv">
</div>
</p>
</div>
http://www.slideshare.net/IgorShkulipa 35
Пример
<h2><a href="#">Ajax-ссылка</a></h2>
<div>
<p>
@Ajax.ActionLink("Random persone", "RandomPersone", new AjaxOptions {
UpdateTargetId = "randompersone",
InsertionMode = InsertionMode.Replace })
</p>
<p>
<div id="randompersone" class="boarddiv">
</div>
</p>
</div>
http://www.slideshare.net/IgorShkulipa 36
Пример
<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>
<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>
</p>
</div>
</div>
http://www.slideshare.net/IgorShkulipa 37
Пример
<script type="text/javascript">
$("#accordion").accordion();
</script>
http://www.slideshare.net/IgorShkulipa 38
Результат
http://www.slideshare.net/IgorShkulipa 39
Пример 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>
http://www.slideshare.net/IgorShkulipa 40
Пример 2
<script type="text/javascript">
$("#accordion").tabs();
</script>
http://www.slideshare.net/IgorShkulipa 41
Результат
http://www.slideshare.net/IgorShkulipa 42
Лабораторная работа №12
Лабораторной работе по ASP.NET MVC добавить JavaScript/Ajax/jQuery-
активность (анимация элементов по событию, простая игра или т.п.).

C# Web. Занятие 12.

  • 1.
    Темы лекции: ASP.NET.MVC. Часть 4. Практическое задание: ASP.NET. MVC. Тренер: Игорь Шкулипа, к.т.н. Разработка Веб-приложений на платформе Microsoft .NET Framework. Занятие 12
  • 2.
    http://www.slideshare.net/IgorShkulipa 2 Использование JavaScript/jQuery Поумолчанию все проекты, кроме проектов по шаблону Empty, уже содержат необходимый набор скриптов, в том числе библиотеки jQuery большинство скриптов имеют свои двойники с суффиксом min. Оба скрипта представляют одну и ту же функциональность. Но вторая версия представляет минимизированную версию (поэтому и идет с суффиксом min). Минимизированные скрипты гораздо меньше по объему (иногда даже на 60-70%), поэтому их предпочтительнее использовать в реальных приложениях, так как пользователь тратит меньше времени и трафика на их загрузку. В то же время их не очень удобно читать. Поэтому для большего удобства разработчиков полные и минимизированные скрипты идут вместе.
  • 3.
    http://www.slideshare.net/IgorShkulipa 3 Некоторые скрипты •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 по соответствующим библиотекам в Visual Studio Чтобы подключить файл javascript используется метод Render класса System.Web.Optimization.Scripts: @Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")
  • 4.
    http://www.slideshare.net/IgorShkulipa 4 jQuery jQuery –это JavaScript-библиотека, фокусирующаяся на взаимодействии JavaScript, HTML и CSS. Что умеет jQuery: • Обращаться к любому элементу DOM (объектной модели документа) и не только обращаться, но и манипулировать ими. • Работать с событиями. • Легко осуществлять различные визуальные эффекты. • Работать с AJAX. • Имеет огромное количество JavaScript плагинов, предназначенных для создания элементов пользовательских интерфейсов.
  • 5.
    http://www.slideshare.net/IgorShkulipa 5 Функция $() $("div")вернет все div-элементы на странице. $(".someBlock") вернет все элементы с классом someBlock. $("#content") вернет элемент с идентификатором content. $("#content2 div.someBlock") вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2. $("div:odd") вернет div-элементы, находящиеся на странице под нечетными номерами. $("[value = 5]") вернет все элементы с атрибутом value, равным 5. С помощью функции $() из библиотеки, можно находить элементы на странице по различным параметрам
  • 6.
    http://www.slideshare.net/IgorShkulipa 6 Функция $() $("#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.
  • 7.
    http://www.slideshare.net/IgorShkulipa 7 Цепочки методов Важнойособенностью большинства методов jQuery, является возможность связывать их в цепочки. Методы, манипулирующие элементами документа, обычно возвращают эти объекты для дальнейшего использования, что позволяет писать примерно следующее: $("#bigIt").empty().attr("class", "noContent"); // в результате, у элемента с идентификатором bigIt будет удалено все содержимое, // после чего ему будет установлен класс noContent.
  • 8.
    http://www.slideshare.net/IgorShkulipa 8 Работа снабором элементов Помимо манипуляций с выбранными элементами, 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-ов).
  • 9.
    http://www.slideshare.net/IgorShkulipa 9 Фильтры jQuery ФильтрЗначение :eq(n) Выбирает n-й элемент выборки (нумерация начинается с нуля) :even Выбирает элементы с четными номерами :odd Выбирает элементы с нечетными номерами :first Выбирает первый элемент выборки :last Выбирает последний элемент выборки :gt(n) Выбирает все элементы с номером, большим n :lt(n) Выбирает все элементы с номером, меньшим n :header Выбирает все заголовки (h1, h2, h3) :not(селектор) Выбирает все элементы, которые не соответствуют селектору, указанному в скобках
  • 10.
    http://www.slideshare.net/IgorShkulipa 10 Фильтры контента ФильтрЗначение :contains('content') Получает все элементы, которые содержат content :has('селектор') Получает все элементы, которые содержат хотя бы один дочерний элемент, соответствующий селектору :empty Получает все элементы, которые не имеют дочерних элементов :first-child Получает все элементы, которые являются первыми дочерними элементами в своих родителях :last-child Получает все элементы, которые являются последними дочерними элементами в своих родителях :nth-child(n) Получает все элементы, которые являются n-ными элементами в своих родителях (нумерация идет с единицы) :only-child Получает все элементы, которые являются единственными дочерними элементами в своих родителях :parent Получает все элементы, которые имеют, как минимум, один дочерний элемент
  • 11.
    http://www.slideshare.net/IgorShkulipa 11 Фильтры форм ФильтрЗначение :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
  • 12.
    http://www.slideshare.net/IgorShkulipa 12 События 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); } });
  • 13.
    http://www.slideshare.net/IgorShkulipa 13 Методы 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() Анимирует элемент
  • 14.
    http://www.slideshare.net/IgorShkulipa 14 Пример jQuery Например,стандартный прием, когда по наведению курсора мыши на изображение, оно увеличивается в размерах, а после отвода курсора - уменьшается: $(function () { $("img").mouseover(function () { $(this).animate({ height: '+=20', width: '+=20' }); }); $("img").mouseout(function () { $(this).animate({ height: '-=20', width: '-=20' }); }); }); Сначала при помощи селектора мы выбираем все элементы img, затем вешаем на них обработчик наведения курсора mouseover. Обработчик события наведения мыши в качестве аргумента принимает анонимную функцию, которая срабатывает при наведении курсора.
  • 15.
    http://www.slideshare.net/IgorShkulipa 15 AJAX AJAX (АсинхронныйJavaScript и XML) представляет собой технологию гибкого взаимодействия между клиентом и сервером. Благодаря ее использованию мы можем осуществлять асинхронные запросы к серверу без перезагрузки всей страницы. Правда, в настоящее время все больше вместо формата XML используется формат JSON для взаимодействия между клиентом и сервером. Применительно к ASP.NET MVC использование AJAX вылилось в целую концепцию под названием "ненавязчивого AJAX" и ненавязчивого JavaScript (unobtrusive Ajax/JavaScript). Смысл этой концепции заключается в том, что весь необходимый код JavaScript используется не на самой веб-странице, а помещается в отдельные файлы с расширением *.js. А затем с помощью тега <script> мы а веб-станице ссылаемся на данный файл кода. Таким образом мы отделяем визуализацию от логики приложения. Кроме того, выделение скрипта в отдельный загружаемый файл увеличивает производительность сайта, поскольку файл сохраняется в кэше и затем от туда подгружается.
  • 16.
    http://www.slideshare.net/IgorShkulipa 16 Настройка ненавязчивого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-форм.
  • 17.
    http://www.slideshare.net/IgorShkulipa 17 AJAX-хелперы Хелпер Описание Ajax.ActionLink Создаетгиперссылку на действие контроллера, по нажатию на которую происходит ajax-запрос к этому действию Ajax.RouteLink Похож на хелпер Ajax.ActionLink, только ссылка создается на определенный маршрут, а не на действие контроллера Ajax.BeginForm Создает html-форму, которая отправляет ajax- запросы к определенному действию определенного контроллера Ajax.BeginRouteForm Похож на Ajax.BeginForm, только ajax-запросы направляются не к действию контроллера, к по определенному маршруту Ajax.GlobalizationScript Создает ссылку на скрипт, который содержит информацию о культуре Ajax.JavaScriptStringEncode Кодирует строку для использования в JavaScript
  • 18.
    http://www.slideshare.net/IgorShkulipa 18 Ajax-Формы @using (Ajax.BeginForm("SearchByName", newAjaxOptions { 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>
  • 19.
    http://www.slideshare.net/IgorShkulipa 19 Параметры объектаAjaxOptions • Confirm - настраивает сообщение о подтверждении отправки запроса на сервер. Если пользователь не подтвердит, то запрос не будет отправлен • HttpMethod - устанавливает метод (Get или Post), с помощью которого выполняется запрос • InsertionMode - устанавливает, как полученные результаты будут отображаться на странице. Может принимать одно из трех значений перечисления InsertionMode: InsertAfter, InsertBefore и Replace(по умолчанию). • LoadingElementId- устанавливает id элемента html-страницы, который будет отображаться во время запроса. Обычно это какая- нибудь анимация, которая дает знать, что некоторая работа выполняется в фоновом режиме • LoadingElementDuration - устанавливает количество миллисекунд, через которое появится элемент, указанный в параметре LoadingElementId
  • 20.
    http://www.slideshare.net/IgorShkulipa 20 Параметры объектаAjaxOptions • OnBegin - задает обратный вызов перед отправкой запроса. Соотносится с событием beforeSend библиотеки jQuery • OnComplete - задает обратный вызов, который вызывается после удачного выполнения запроса. Соотносится с событием complete библиотеки jQuery • OnFailure - задает обратный вызов, который вызывается после неудачного выполнения запроса. Соотносится с событием error библиотеки jQuery • OnSuccess - задает обратный вызов, который вызывается после выполнения запроса (как удачного, так и неудачного). Соотносится с событием success библиотеки jQuery • UpdateTargetId - указывает на id элемента, в котором будут выводиться результаты запроса • Url - устанавливает адрес Url сервера, на который отправляется запрос. Установив данное свойство, можно не использовать название имя контроллера и его действие в качестве параметров Ajax.BeginForm
  • 21.
    http://www.slideshare.net/IgorShkulipa 21 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>
  • 22.
    http://www.slideshare.net/IgorShkulipa 22 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>
  • 23.
    http://www.slideshare.net/IgorShkulipa 23 Пример. Немногообновленная модель 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; } }
  • 24.
    http://www.slideshare.net/IgorShkulipa 24 Пример. Немногообновленный репозиторий 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; } } ... }
  • 25.
    http://www.slideshare.net/IgorShkulipa 25 Пример. Контроллер staticRandom 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); } ...
  • 26.
    http://www.slideshare.net/IgorShkulipa 26 Пример. Частичныйтипизированный SearchByName.cshtml @model IEnumerable<jsjqajx.Models.Persone> @if (Model != null && Model.Count() > 0) { <ul> @foreach (var item in Model) { <li>@item.ToString()</li> } </ul> }
  • 27.
    http://www.slideshare.net/IgorShkulipa 27 Пример. Частичныйтипизированный RandomPersone.cshtml @model jsjqajx.Models.Persone @if (Model != null) { <ul> <li>@Model.ToString()</li> </ul> }
  • 28.
    http://www.slideshare.net/IgorShkulipa 28 Пример. ЧастьIndex.cshtml <p> @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><p> <div id="searchresults" class="simplediv"></div> </p><p> @Ajax.ActionLink("Random persone", "RandomPersone", new AjaxOptions { UpdateTargetId = "randompersone", InsertionMode = InsertionMode.Replace }) </p><p> <div id="randompersone" class="boarddiv"></div> </p>
  • 29.
    http://www.slideshare.net/IgorShkulipa 29 Пример. ЧастьIndex.cshtml <p> <input type="text" name="name2" id="search2" /> <input type="submit" id="submit" value='Поиск' /> <div id="searchresults2" class="redleafdiv"></div> <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> </p>
  • 30.
  • 31.
    http://www.slideshare.net/IgorShkulipa 31 jQuery иjQuery UI • jQuery Учебник • jQuery Справочник • jQuery UI Учебник • jQuery UI Справочник
  • 32.
    http://www.slideshare.net/IgorShkulipa 32 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")
  • 33.
    http://www.slideshare.net/IgorShkulipa 33 Виджеты jQueryUI Виджет Описание accordion Превращает выбранный элемент в виджет accordion. autocomplete Превращает выбранный элемент в виджет autocomplete. button Превращает выбранный элемент в стилизованную кнопку, внешний вид которой можно настраивать. datepicker Превращает выбранный элемент в виджет datepicker. dialog Превращает выбранный элемент в диалоговое окно. progressbar Превращает выбранный элемент в полосу загрузки. slider Превращает выбранный элемент в виджет slider. tabs Превращает выбранный элемент в виджет tabs.
  • 34.
    http://www.slideshare.net/IgorShkulipa 34 Пример <div id="accordion"> <h2><ahref="#">Ajax-форма</a></h2> <div> <p> @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> <p> <div id="searchresults" class="simplediv"> </div> </p> </div>
  • 35.
    http://www.slideshare.net/IgorShkulipa 35 Пример <h2><a href="#">Ajax-ссылка</a></h2> <div> <p> @Ajax.ActionLink("Randompersone", "RandomPersone", new AjaxOptions { UpdateTargetId = "randompersone", InsertionMode = InsertionMode.Replace }) </p> <p> <div id="randompersone" class="boarddiv"> </div> </p> </div>
  • 36.
    http://www.slideshare.net/IgorShkulipa 36 Пример <h2><a href="#">jQuery-запрос</a></h2> <div> <p> <inputtype="text" name="name2" id="search2" /> <input type="submit" id="submit" value='Поиск' /> <div id="searchresults2" class="redleafdiv"></div> <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> </p> </div> </div>
  • 37.
  • 38.
  • 39.
    http://www.slideshare.net/IgorShkulipa 39 Пример 2 <divid="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>
  • 40.
    http://www.slideshare.net/IgorShkulipa 40 Пример 2 <scripttype="text/javascript"> $("#accordion").tabs(); </script>
  • 41.
  • 42.
    http://www.slideshare.net/IgorShkulipa 42 Лабораторная работа№12 Лабораторной работе по ASP.NET MVC добавить JavaScript/Ajax/jQuery- активность (анимация элементов по событию, простая игра или т.п.).