Изскачащ календар на страница
| Изскачащ календар на страницата на ASP.NET |
| Автор: Веденин Вадим |
Средата за разработка на VS.NET включва много удобен инструмент за избор на дата, календара за уеб контрол. Той позволява на потребителя да избере дата и проверява дали избраната дата е правилна. Но, за съжаление, този компонент заема твърде много място на страницата, което се отразява негативно на дизайна на страницата. Затова е препоръчително да въвеждате датата от потребителя и да работите с въведената дата на различни страници. За да направим това, ще използваме комбинация от клиентски и сървърни скриптове.
Нека създадем страница, на която ще работим с датата.
Поставете предмети върху него според следната таблица
в този етикет ще съхраняваме датата, без да запазваме състоянието на страницата
в този етикет ще съхраняваме датата със запазване на състоянието на страницата
използвайки този таг, ние ще запазим стойността на етикета lblSave в колекцията Viewstate на състоянието на сесията на страницата
в този входен ред ще съхраним датата със запазване на състоянието на страницата
чрез този бутон ще извикаме страницата с календара
бутон, с който ще проверяваме текущото състояние на страницата
Страницата index.aspx трябва да бъде следната
Алгоритъмът на работа е следният
- ще съхраним избраната дата както във входния ред, така и като обикновен текст на страницата index.aspx
- чрез избиране на бутона html btnCallCalendar ще извикаме страницата calendar.aspx, която съдържа календар за избор на дата.
- след като изберете дата, избраната дата ще бъде върната обратно на страницата index.aspx
Извиква се страницата calendar.aspxот страницата index.aspx със следния клиентски скрипт
Страницата с календара се извиква с помощта на функцията window.showModalDialog, която гарантира, че страницата се извиква като уеб диалог.
Веднъж извикан, резултатът от избора на потребителя се присвоява на html елементите на страницата
По този начин можете да обработите датата, избрана от потребителя на страницата calendar.aspx. Но тук възниква проблем – необходимо е избраната дата да се запише в колекцията ViewState от състояния на сесията на страницата, тъй като горният скрипт е клиентски и не може да повлияе по никакъв начин на колекцията Viewstate на сървъра.
Това е уместен проблем, тъй като потребителят най-вероятно ще иска да използва избраната дата в сървърни скриптове, които извличат стойностите на елементите на страницата от колекцията ViewState.
Няма нужда да правите допълнителни манипулации за реда за въвеждане на textR - данните от него ще бъдат правилно прехвърлени в колекцията Viewstate.
За да предадете стойността на етикет от типа Label, трябва да създадете стек на страницата за въвеждане с атрибута hidden
и е важно да добавите атрибута runat="server". За да добавите стойността на етикета lblSave към колекцията ViewState в метода Page_Load, добавете следния код
Благодарение на него ще можете да използвате стойността на етикета lblSave във вашето приложение.
Страницата calendar.asxp, предназначена за избор на дата, освен календара, не съдържа нищо друго.
Изборът на потребител се обработва чрез отговор на събитието SelectionChanged на календара:
Тоест, след като потребителят избере дата, полученият html код на страницата съдържа извикване на функцията CloseW, която връща избраната дата в родителския прозорец и затваря дъщерния прозорец
Трябва също да поставите в секцията на главатастраници с базови етикети
Помислете за получената страница.
Кликнете върху бутона "избор на календар" и задайте някаква дата. Избраната от вас дата ще се появи във всички клетки на втория ред на таблицата. Но ако щракнете върху бутона "опресняване на страницата", тогава избраната от вас дата ще бъде запазена само в колоните "Stateful Label" и "TextBox", а датата, зададена при първото зареждане на страницата, ще се появи в реда "Stateless Label". Това се дължи на факта, че бяхме принудени да управляваме състоянието на етикета lblSave, редът за въвеждане на textR запазва състоянието, а самият етикет lblNotSave не може да запази състоянието си.
По този начин можете да създадете удобен изскачащ календар, който е лесен за внедряване в дизайна на всяка страница.