KNOW INTUIT, Лекция, Добавяне на динамични компоненти към Интернетмагазин

Можете да изтеглите файловете за упражнения от тук.

15.1. Въведение

Следващата стъпка в разработката на сайта е разработването на клиентски скриптове, които ще направят интерфейса на сайта по-интерактивен. Освен това, друга възможност, която скриптовете от страна на клиента ни предоставят, е отказът да презаредим напълно страницата, замествайки я с частично преначертаване.

Функционалността от страна на сървъра на ASP.NET може да бъде разширена с функционалност за скриптове от страна на клиента в уеб страници на ASP.NET. Клиентският скрипт може да се използва, за да предостави на потребителите по-функционално и интерактивно преживяване. Можете също да използвате клиентски скрипт, за да правите асинхронни извиквания към уеб сървъра, докато страницата работи в уеб браузъра.

ASP.NET предоставя два подхода за използване на функции от страна на клиента. Първият подход е да се използват функциите на AJAX на платформата ASP.NET. Технологията AJAX в ASP.NET включва библиотека от функции за скриптове от страна на клиента, внасяйки много от предимствата на обектно-ориентираното програмиране и ASP.NET моделите за скриптове от страна на клиента. AJAX в ASP.NET също така предоставя поддръжка от страна на сървъра, която включва контроли на уеб сървъра, които автоматично изобразяват скрипта от страна на клиента, необходим за функционалността на AJAX.

Вторият подход е да създадете клиентски скрипт и да го интегрирате сами в ASP.NET уеб страници. Този подход е полезен, ако частите от клиентския скрипт са много малки или ако искате да интегрирате съществуващ клиентски скрипт във вашия . Този подход се използва от много ASP.NET уеб сървърни контроли (например валидатори) за създаване на клиентска странафункционалност.

15.2. AJAX приложение

Първо, нека разгледаме използването на технологията AJAX. За да направите това, добавете следния код към шаблона на страницата в самото начало на съдържанието на формуляра (таг на формуляра):

15.2.1. Свързване на клиентски скриптове

Да отидем на главната страница. Използвайки библиотеката jquery, ще анимираме основния текст на страницата, така че да изскача бавно и ще направим надписа "Ново!" проблесна. За да направите това, добавете следния код към PlaceHolderScripts:

Тук са дефинирани две функции. Първата, анонимна функция, ще работи в момента, в който страницата се генерира от браузъра. Тъй като на основния текст първоначално беше присвоен CSS класът text-init, който съдържа правилото display:none, този текст няма да се показва, когато страницата се зареди. $('#MainText') ще намери елемента с идентификатор MainText и методът toggle(1000) ще промени видимостта на този елемент (в този случай ще го покаже), а процесът на показване на текста ще бъде анимиран и ще отнеме 1 секунда.

За елемента с id News , стилът h3 ще се включва и изключва последователно, а функцията toogle ще скрие и покаже етикета, създавайки ефект на мигане. Това използва претоварване на функцията за превключване, която след изпълнение за секунда ще извика функцията animateText. Тази функция от своя страна ще промени отново видимостта на етикета и ще се самоизвика.

Резултатът от добавянето на визуални ефекти е показан на фиг. 15.1.

лекция

15.2.2. Работа с UpdatePanel

На пръв поглед UpdatePanel е подобен по работа на обикновения панел. В резултат на изобразяването на страницата, този компонент също се заменя с HTML div елемент и служи за групиране и оформление на страницата. Особеността на този компонент е, че всекизаявка, направена от елемент в UpdatePanel, е асинхронна и води само до преначертаване на неговото съдържание. Останалата част от страницата не се променя. Дори ако по време на обратното изпращане потребителят промени структурата или набора от компоненти извън UpdatePanel, тогава на етапа Render от жизнения цикъл на страницата тези промени няма да бъдат взети под внимание, HTML маркирането ще бъде генерирано само за съдържанието на компонента и това маркиране ще бъде изпратено на клиента. Клиентската страна на ASP.NET AJAX ще обработи получения код и ще промени маркирането вътре в div, съответстващ на UpdatePanel.

По този начин, като поставите няколко UpdatePanel на страницата (и можете да поставите произволен брой от тях, вмъквайки се, например, един в друг), можете да реализирате интерфейс, който никога няма да преначертае страницата и в същото време предоставя цялата функционалност на сайта.

Понякога не е достатъчно да се актуализира само съдържанието на UpdatePanel ', който извика обратното изпращане. Трябва да принудите другите UpdatePanel на страницата също да се актуализират. Това може да стане по два начина:

  • В ASP маркирането или в задния код UpdatePanel, укажете тригерите ( Triggers ), които ще доведат до преначертаване на съдържанието на този панел. Параметрите са идентификаторите на сървърните компоненти извън UpdatePanel, което трябва да доведе до актуализиране на неговото съдържание.
  • В задния код можете да извикате метода UpdatePanel .Update(), който ще накара съдържанието му да бъде изобразено на сървъра и изпратено до клиента.

Всичко това означава, че за внедряване на AJAX в нашия онлайн магазин е достатъчно да поставите всички необходими компоненти в UpdatePanel и, ако е необходимо, да посочите тригери: