C# Web. Занятие 12.
-
Upload
igor-shkulipa -
Category
Education
-
view
89 -
download
2
Transcript of 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 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 по соответствующим библиотекам в VisualStudio
Чтобы подключить файл 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 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 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 42
Лабораторная работа №12
Лабораторной работе по ASP.NET MVC добавить JavaScript/Ajax/jQuery-активность (анимация элементов по событию, простая игра или т.п.).