MS Swit 2010

Создание ASP.NET приложений при помощи AJAX, JQuery и Visual Studio 2010

Денис РезникDigital Cloud Technologies

Модель работы Запрос-Ответ

Работа без перезагрузки страницы

Как это работаетCLIENT

SERVER

TRANSPORT

HTTP

XML HTTP Request Object

DOM, JavaScript, CSS, XML, JSON, etc.

C#, VB.NET, ASPX, XML, SQL, etc.

Web Service

Business Logic Application Data

Business Logic Application Data

AJAXfunction createRequestObject(){ if (window.XMLHttpRequest) { try { return new XMLHttpRequest(); } catch (e){} } else if (window.ActiveXObject) { try { return new ActiveXObject('Msxml2.XMLHTTP'); } catch (e){ try { return new

ActiveXObject('Microsoft.XMLHTTP'); } catch (e){} } }

return null;}

Ajax frameworks

http://en.wikipedia.org/wiki/File:Jquerylogo.png

http://en.wikipedia.org/wiki/File:Swfobject_logo.gif

http://en.wikipedia.org/wiki/File:Yuilib.jpg

http://en.wikipedia.org/wiki/File:Scriptaculous_logo.png

http://en.wikipedia.org/wiki/File:Amplesdk-logo-48.png

http://en.wikipedia.org/wiki/File:Dojo.logo.svg

http://en.wikipedia.org/wiki/File:Mootools.png

http://en.wikipedia.org/wiki/File:NewSproutCoreLogo.png

ASP.NET AJAX

Составные части ASP.NET AJAX

Update Panel

• Самая популярная штука• Частичный рендеринг страницы

– Автоматическое преобразование постбеков в асинхронные колбеки

– Автоматическое обновление контента при помощи результатов колбека

– Не нужно никаких знаний JavaScript или XmlHttpRequest

• Высокоуровневая надстройка над XmlHttpRequest– Преимущества: Крайне просто в

использовании– Недостатки: Менее эффективено чем

класический AJAX

Update Panel

Browser Web Server

Browser submits HTTPrequest to server

1

Server responds with content;browser renders that content

2

Browser submits async XML-HTTP request to server; UIremains responsive; pagedoesn't flash

3

XML-HTTP request completes;JavaScript refreshes portion ofpage affected by response

4

AJAX Toolkit

• Самый популярный проект на CodePlex

> 25 000 скачиваний каждую неделю

• Легко интегрируется в Visual Studio 2010

• Идеально подходит для Web Forms проектов

AJAX и SEO

AJAX и SEO

• AJAX – плохо для SEO• Поисковые роботы любят чистый HTML• Убедитесь, что у вас есть URL для каждой

"страницы", которую вы хотите показать роботам и желаете, чтобы она была проиндексирована

• Загрузите часть контента с ключевыми словами не динамически

• Разделы меню, ссылки и другие важные структурные аспекты сайта должны работать без AJAX и/или JavaScript

Индексация AJAX контента

AJAX CDN

• CDN (Content Delivery Network) — географически распределённая сетевая инфраструктура, позволяющая оптимизировать доставку контента конечным пользователям

AJAX CDN

Использование AJAX CDNПодгрузка скриптов c CDN

AJAX Library Client Side is dead. Почему?

Потому что jQuery

jQuery

Почему jQuery это круто?

• Легковесный и быстрый фреймворк

• Огромное комьюнити (в которое входит и Майкрософт)

• Скрывает от разработчиков множество низкоуровневых вещей

• Множество плагинов• Интуитивно понятный синтаксис

$('#something').hide().css('background', 'red').fadeIn();

Кто использует jQuery?

http://jquery.com/

http://jquery.com/

http://www.forum.nokia.com/Develop/Web/

Статистика использования

jQuery Mobile

http://jquerymobile.com/

http://jquerymobile.com/

http://jquerymobile.com/demos/1.0a2/

Microsoft & jQuery

1997: Classic ASP 1, 2, 32002: ASP.NET 1.0 and WebForms

Ajax Control Toolkit2003 to 2007: ASP.NET 1.1, 2, 3, 3.52008: Visual Studio 2008 - including jQuery2008: Official Support for jQuery 2009: ASP.NET MVC – including jQuery2009: ASP.NET Ajax Library2009: jQuery on the Microsoft CDN2010: ASP.NET 4 – including jQuery

ДемоВключение Intellisence для jQuery в Visual Studio 2010

jQuery(Selectors)

Selectors

//Selects all the anchor tags in the DOM$('a')

//Selects all the anchor tags inside of div elements in the DOM$('div a')

//Selects all the elements with a class of 'odd'$('.odd')

//Selects all the tr elements with a class of 'odd'$('tr.odd')

Selectors

// Selects all links that ends with mp3 in the href$("a[href$='mp3']")

// Selects all links that are set to open a new window$("a[target='_blank']")

// Selects all links that have a class that begins with "custom"$("a[class^='custom']")

Selectors

// Selects all the input elements$(':input')

// Selects all the disabled input elements$(':disabled')

// Selects the 4rd (0 based) list item$('li:eq(3)')

// Selects links to pdf that are children of a list item$('li > a[href$=pdf]')

// Selects list items that have links inside of them$('li:has(a)')

Selector Context

// use "span a" selector to find the link$('span a.myClass').addClass('highlight');

// Start at #myDiv context & use "span a" selector to find the link$('span a.myClass', '#myDiv').addClass('highlight');

Caching Selectors

// Uncached code$('#myButton').click(function() {

$('#alertMessage').hide();$('#alertMessage').html('Really Bad Error

');$('#alertMessage').fadeIn('slow');

});

// Cached code$('#myButton').click(function() {

var $alertMessage = $('#alertMessage');$alertMessage.hide();$alertMessage.html('Really Bad Error');$alertMessage.fadeIn('slow');

});

Caching Selectors

// Chaining$('#myButton').click(function() {

$('#alertMessage').hide().html('Really Bad Error').fadeIn('slow');

});

ДемоSelectorGadget

http://www.selectorgadget.com/

jQuery(Storing Data)

Storing Data (Bad Practice)

//Storing special information about the anchor in the alt attribute$('a').attr('alt', 'Special info about this HTML tag');

//Getting the special information from the anchor's alt attribute$('a').attr('alt')

Storing Data (Best Practice)

// Storing a complex data structure under the specialInfo key$('a').data('specialInfo', {

firstName: 'Denis',lastName: 'Reznik'});

//Getting the complex data structure specialInfo & accessing the firstName property$('a').data('specialInfo').firstName;

Storing Data (Best Practice)

$("li.demo").data({firstName: “Denis", lastName: “Reznik“

});

console.dir($("li.demo").data());

$("li.demo").data("someKey",{ firstName: “John", lastName: “Smith“

});

console.dir($("li.demo").data());console.log($("li.demo").data().someKey.firstName);

jQuery(Events)

Event Bubbling<ul id="sites">

<li><a id="microsoft"

href="http://www.microsoft.com"> microsoft</a>

</li> <li>

<a id="jquery" href="http://www.jquery.com"> jquery</a>

</li> <li>

<a id="google" href="http://www.google.com"> google</a>

</li> <li>

<a id="facebook" href="http://www.facebook.com"> facebook</a>

</li></ul>

Event binding

// bind couple of eventsvar clickMe = function() {

console.log('Hello World!');};

$("p.clickMe").click(clickMe).dblclick(clickMe);

// Another variant of binding$("p.clickMe").bind("click dblclick", clickMe);

Event unbinding

//really dangerous$("p.clickMe").unbind();

//moderately dangerous$("p.clickMe").unbind("click dblclick");

//safe$("p.clickMe").unbind("click dblclick", clickMe);

Live and Die

// Dynamic Hello will not have click handler$("p.sayHello").bind('click', function() {

console.log('Hello World!');});$('body').append("Dynamic Hello");

// Dynamic Hello will have click handler$("p.sayHello").live('click', function() {

console.log('Hello World!');});/* die() || die("click") || die("click", clickMe) */$('body').append("Dynamic Hello");

Preventing default behavior

// Preventing event bubbling$('a').click(function () {

return false;});

return false = e.preventDefault() + e.stopPropagation

// Doesn't prevent event bubbling$('a').click(function (e) {

e.preventDefault();});

Delegate and Undelegate

// Event will not bubble upvar clickMe = function() {

var element = $(this);element.text(element.text() + ' :)');

};

$("ul.demo").delegate("li", "click", clickMe);/* undelegate(), undelegate("li", "click"),undelegate("li", "click", clickMe) */$("ul.demo").append("<li>Dynamic Item</li>");

jQuery(AJAX)

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

• Базовый метод для подгрузки контента с сервера:– load()

• url• parameters: данные которые будут передаваться

(string, object...). Если указаны, идёт POST, если нет - GET

• callback (optional)

• Наряду с load() можно использовать $.get()/$.getJson() or $.post()

$('#someDiv').load('test.html',function () { ('Load was performed.'); });


• Если необходим больший контроль над AJAX запросом, используем:– $.ajax()

• options: определяет объект, содержащий все параметры для запроса

• Когда параметров много, используем– $.ajaxSetup

• options: определяет объект, содержащий все параметры для запроса, который становится дефолтным для всех Ajax запросов


$.ajax({url: 'document.xml',type: 'GET',

dataType: 'xml',timeout: 1000,error: function () {

alert('Error loading XML document');},success: function (xml) {

// do something with xml}

});$('#stats').load('stats.html');


$.ajaxSetup ({ cache: false

});

$.ajaxSetup({type: 'POST',timeout: 5000,dataType: 'html'

});

ДемоИспользование AJAX в jQuery

Свежие новости!

• 3 новых плагина от Microsoft– jQuery Templates– jQuery Data Link– jQuery Globalization

• Теперь это официальные плагины• Будут частью jQuery (в версии 1.5)

jQuery Templates

• Шаблоны это разметка HTML (содержащая символы подстановки)

• 3 метода:– .tmpl(): рендерит шаблон– .tmplItem(): находит шаблонный

элемент– .template(): компилирует шаблон

<script id="movieTemplate" type="text/x-jquery-tmpl"><li>${Name} (${ReleaseYear})</li>

</script>

.tmpl()

• Берёт шаблон и рендерит его контент, используя определённый набор данных

• .tmpl( [ data ], [ options ] )– Data: Данные для рендеринга. Может быть

любого типа, включая Array и Object– Options: дополнительный набор пар ключ-

значение, определяемых пользователем

• Может использоваться в связке с локальными данными, и удалёнными данными (ajax)

$("#myTemplate").tmpl(myData)

ДемоИспользование jQuery Templates

jQuery Data Link

• Data linking – механизм привязки данных в jQuery– Позволяет связывать поле объекта с

полем другого объекта– Связвание происходит через

функцию .link()

– Когда значение поля меняется, свойство связанного объекта также меняется

• По-умолчаниию связывание двустороннее

var person = {};$("form").link(person);

ДемоjQuery Data Link

jQuery Globalization

• Содержит в себе информацию о более чем 350 (!) культурах– Валюта– Формат даты (вкючая названия

месяцев)– Числовые форматы

• Использование стандартизированных идентификаторов культуры (uk-ua, и т.д.)

ДемоjQuery Globalization

Summary

• Легковесный и легкий в использовании JavaScript фреймворк

• Кросс-браузерность, сокрытие низкоуровневых деталей

• Понятная модель событий• Может работать с MVC и WebForms• Легко расширяем

Welcome to the Party!!!

Денис РезникРуководитель департамента разработки, DCTTrainer, Microsoft Innovation CenterMicrosoft MVP (SQL Server)Microsoft Certified [email protected]://reznik.uneta.com.ua/http://twitter.com/DenisReznikMCPD - Web Developer 4MCITP – Database Developer 2008MCTS - .NET Framework 4, Web ApplicationsMCTS - SQL Server 2008, Database DevelopmentMCTS - .NET Framework 4, Data Access with ADO.NETMCTS - SQL Server 2008, Implementation and MaintenanceMCITP - SQL Server 2008, Implementation and Maintenance

Technology

MS Swit 2010