1. Создание ASP.NET приложений при помощиAJAX, JQueryиVisual Studio 2010 Денис РезникDigital Cloud Technologies

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

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

4. Как это работает CLIENT Business Logic Application Data DOM, JavaScript, CSS, XML, JSON, etc. XML HTTP Request Object TRANSPORT HTTP SERVER Web Service C#, VB.NET, ASPX, XML, SQL, etc. Application Data Business Logic

5. AJAX functioncreateRequestObject(){ if(window.XMLHttpRequest){ try{ returnnewXMLHttpRequest(); }catch(e){} } elseif(window.ActiveXObject){ try{ returnnewActiveXObject('Msxml2.XMLHTTP'); }catch(e){ try{ returnnewActiveXObject('Microsoft.XMLHTTP'); }catch(e){} } } returnnull;}

6. Ajax frameworks

7. ASP.NET AJAX

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

9. Update Panel Самая популярная штука Частичный рендеринг страницы Автоматическое преобразованиепостбековв асинхронные колбеки Автоматическое обновление контента при помощи результатов колбека Не нужно никаких знанийJavaScript илиXmlHttpRequest Высокоуровневая надстройка над XmlHttpRequest Преимущества: Крайне просто в использовании Недостатки: Менее эффективено чем класическийAJAX

10. Update Panel Browser submits HTTP request to server 1 Browser Web Server Server responds with content; browser renders that content 2 Browser submits async XML- HTTP request to server; UI remains responsive; page doesn't flash 3 XML-HTTP request completes; JavaScript refreshes portion of page affected by response 4

11. AJAX Toolkit Самый популярный проект на CodePlex > 25 000 скачиваний каждую неделю Легко интегрируется в Visual Studio 2010 Идеально подходит для Web Forms проектов

12. AJAX и SEO

13. AJAX и SEO AJAX – плохо для SEO Поисковые роботы любят чистый HTML Убедитесь, что у вас есть URL для каждой "страницы", которую вы хотите показать роботам и желаете, чтобы она была проиндексирована Загрузите часть контента с ключевыми словами не динамически Разделы меню, ссылки и другие важные структурные аспекты сайта должны работать без AJAX и/или JavaScript

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

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

16. AJAX CDN

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

19. AJAXLibrary Client Side is dead. Почему? Потому чтоjQuery

20. jQuery

21. Почему jQueryэто круто? Легковесный и быстрый фреймворк Огромное комьюнити (в котороевходит и Майкрософт) Скрывает от разработчиков множество низкоуровневых вещей Множество плагинов Интуитивно понятный синтаксис $('#something').hide().css('background', 'red').fadeIn();

22. Кто использует jQuery? http://jquery.com/

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

24. jQuery Mobile http://jquerymobile.com/

25. Microsoft & jQuery 1997: Classic ASP 1, 2, 3 2002: ASP.NET 1.0 and WebForms Ajax Control Toolkit 2003 to 2007: ASP.NET 1.1, 2, 3, 3.5 2008: Visual Studio 2008 - including jQuery 2008: Official Support for jQuery 2009: ASP.NET MVC – including jQuery 2009: ASP.NET Ajax Library 2009: jQuery on the Microsoft CDN 2010: ASP.NET 4 – including jQuery

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

27. jQuery(Selectors)

28. 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')

29. 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']")

30. 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 pdfthat are children of a list item $('li > a[href$=pdf]') // Selects list items that have links inside of them $('li:has(a)')

31. 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');

32. Caching Selectors // Uncached code $('#myButton').click(function() { $('#alertMessage').hide(); $('#alertMessage').html('<b>Really BadError</b>'); $('#alertMessage').fadeIn('slow'); }); // Cached code $('#myButton').click(function() { var $alertMessage = $('#alertMessage'); $alertMessage.hide(); $alertMessage.html('<b>Really Bad Error</b>'); $alertMessage.fadeIn('slow'); });

33. Caching Selectors // Chaining $('#myButton').click(function() { $('#alertMessage').hide() .html('<b>Really Bad Error</b>') .fadeIn('slow'); });

34. Демо SelectorGadget http://www.selectorgadget.com/

35. jQuery(Storing Data)

36. 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')

37. 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;

38. 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);

39. jQuery(Events)

40. Event Bubbling <ulid="sites"> <li> <aid="microsoft"href="http://www.microsoft.com"> microsoft</a> </li> <li> <aid="jquery"href="http://www.jquery.com"> jquery</a> </li> <li> <aid="google"href="http://www.google.com"> google</a> </li> <li> <aid="facebook"href="http://www.facebook.com"> facebook</a> </li> </ul>

41. Event binding // bind couple of events varclickMe = function() { console.log('Hello World!'); }; $("p.clickMe").click(clickMe).dblclick(clickMe); // Another variant of binding $("p.clickMe").bind("click dblclick", clickMe);

42. Event unbinding //really dangerous $("p.clickMe").unbind(); //moderately dangerous $("p.clickMe").unbind("click dblclick"); //safe $("p.clickMe").unbind("click dblclick", clickMe);

43. Live and Die // Dynamic Hello will not have click handler $("p.sayHello").bind('click', function() { console.log('Hello World!'); }); $('body').append("<p class='sayHello'>Dynamic Hello</p>"); // Dynamic Hello will have click handler $("p.sayHello").live('click', function() { console.log('Hello World!'); }); /* die() || die("click") || die("click", clickMe) */ $('body').append("<p class='sayHello'>Dynamic Hello</p>");

44. Preventing default behavior // Doesn't prevent event bubbling $('a').click(function (e) { e.preventDefault(); }); // Preventing event bubbling $('a').click(function () { returnfalse; }); returnfalse = e.preventDefault() + e.stopPropagation

45. Delegate and Undelegate // Event will not bubble up varclickMe = function() { varelement = $(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>");

46. jQuery(AJAX)

47. Использование AJAX в jQuery Базовый метод для подгрузки контента с сервера: load() url parameters: данные которые будут передаваться(string, object...). Если указаны, идёт POST, если нет -GET callback (optional) Наряду с load() можно использовать $.get()/$.getJson() or $.post() $('#someDiv').load('test.html', function () { ('Load wasperformed.'); });

48. Использование AJAX в jQuery Если необходим больший контроль над AJAX запросом, используем: $.ajax() options: определяет объект, содержащий все параметры для запроса Когда параметров много, используем $.ajaxSetup options: определяет объект, содержащий все параметры для запроса, который становится дефолтным для всех Ajax запросов

49. Использование AJAX в jQuery $.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');

50. Использование AJAX в jQuery $.ajaxSetup({ type: 'POST', timeout: 5000, dataType: 'html' }); $.ajaxSetup ({ cache: false });

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

52. Свежие новости! 3 новых плагина от Microsoft jQuery Templates jQuery Data Link jQuery Globalization Теперь это официальные плагины Будут частью jQuery (в версии 1.5)

53. jQuery Templates Шаблоны это разметкаHTML (содержащая символы подстановки) 3 метода: .tmpl():рендерит шаблон .tmplItem(): находит шаблонный элемент .template(): компилирует шаблон <scriptid="movieTemplate"type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${ReleaseYear})</li> </script>

54. .tmpl() Берёт шаблон и рендерит его контент, используя определённый набор данных .tmpl( [ data ], [ options ] ) Data: Данные для рендеринга. Может быть любого типа, включая Array иObject Options: дополнительный набор пар ключ-значение, определяемых пользователем Может использоваться в связке с локальными данными, и удалёнными данными(ajax) $("#myTemplate").tmpl(myData)

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

56. jQuery Data Link Data linking – механизм привязки данных вjQuery Позволяет связывать поле объекта с полем другого объекта Связвание происходит через функцию.link() Когда значение поля меняется, свойство связанного объекта также меняется По-умолчанииюсвязываниедвустороннее var person = {}; $("form").link(person);

57. Демо jQuery Data Link

58. jQuery Globalization Содержит в себе информацию о более чем350 (!) культурах Валюта Формат даты (вкючая названия месяцев) Числовые форматы Использование стандартизированных идентификаторовкультуры (uk-ua, и т.д.)

59. Демо jQuery Globalization

60. Summary Легковесный и легкий в использовании JavaScriptфреймворк Кросс-браузерность, сокрытие низкоуровневых деталей Понятная модель событий Может работать сMVC иWebForms Легко расширяем

61. Welcome to the Party!!!

62. ДенисРезник Руководитель департамента разработки, DCT Trainer, Microsoft Innovation Center Microsoft MVP (SQL Server) Microsoft Certified Trainer DenisReznik@live.ru http://reznik.uneta.com.ua/ http://twitter.com/DenisReznik MCPD - Web Developer 4 MCITP – Database Developer 2008 MCTS - .NET Framework 4, Web Applications MCTS - SQL Server 2008, Database Development MCTS - .NET Framework 4, Data Access with ADO.NET MCTS - SQL Server 2008, Implementation and Maintenance MCITP - SQL Server 2008, Implementation and Maintenance