02 июня 2020 года    
Вторник | 12:20    
Главная
 Новости
Базы данных
Безопасность PC
Всё о компьютерах
Графика и дизайн
Интернет-технологии
Мобильные устройства
Операционные системы
Программирование
Программы
Связь
Сети
 Документация
Статьи
Самоучители
 Общение
Форум



Ремонт детской комнаты купить по лучшей цене stkmig.ru/remont-detskoi-komnaty/.




Разделы / Интернет-технологии / ASP.NET

Popup календарь на ASP.NET странице

Popup календарь на ASP.NET странице 
Автор: Веденин Вадим

В состав среды разработки VS.NET входит очень удобное средство для выбора даты – web-control Calendar. Он позволяет осуществить выбор даты пользователем и осуществляет проверку корректности выбранной даты. Но, к сожалению, эта компонента занимает на странице слишком большой размер, что отрицательно сказывается на дизайне страницы. Поэтому целесообразно ввод даты пользователем и работу с введенной датой осуществлять на разных страницах. Для этого будем использовать комбинацию из клиентских и серверных скрипов.

Создадим страницу, на которой будем работать с датой.

Разместим на ней объекты в соответствии со следующей таблицей

имя объекта

класс

назначение

lblNotSave

System.Web.UI.WebControls.Label

в данной метке будем хранить дату без сохранения состояния страницы

lblSave

System.Web.UI.WebControls.Label

в данной метке будем хранить дату с сохранением состояния страницы

lform

Html тэг input

при помощи этого тэга будем сохранять значение метки lblSave в коллекции Viewstate состояния сеанса страницы

textR

System.Web.UI.WebControls.TextBox

в данной строке ввода будем хранить дату с сохранением состояния страницы

btnCallCalendar

Html Тег input

при помощи данной кнопки будем вызывать страницу с календарем

btnUpdate

System.Web.UI.WebControls.Button

кнопка, при помощи которой будем проверять текущее состояние страницы

Страница index.aspx должна быть следующей

<form id="Form1" method="post" runat="server">
<h1 align="center">Popup календарь</h1>
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="500" border="1">
<TR>
    <TD vAlign="top" align="center">Label без сохранения состояния (сегодняшняя дата)</TD>
    <TD vAlign="top" align="center">Label  с сохранением состояния</TD>
    <TD vAlign="top" align="center">TextBox</TD>
</TR>
<TR>
    <TD vAlign="top"><asp:label id="lblNotSave" runat="server">исходная дата</asp:label></TD>
    <TD vAlign="top"><asp:label id="lblSave" runat="server"></asp:label>
    <INPUT id="lform" type="hidden" runat="server"></TD><TD vAlign="top">
    <asp:TextBox id="textR" runat="server"></asp:TextBox></TD>
</TR>
<TR>
    <TD align="center" colSpan="3">
    <INPUT id="btnCallCalendar" onclick="javascript:OpenD();" 
    type="button" value="вызвать календарь"></TD>
</TR>
<TR>
    <TD align="center" colSpan="3"><asp:button id="btnUpdate" 
    runat="server" Text="обновить страницу"></asp:button></TD>
</TR>
</TABLE>
</form>

Алгоритм работы следующий

  1. выбранную дату будем хранить и в строке ввода и в виде простого текста на странице index.aspx
  2. по выбору html кнопки btnCallCalendar будем вызывать страницу calendar.aspx, содержащую в себе календарь для выбора даты.
  3. после выбора даты выбранную дату будем передавать обратно на страницу index.aspx

Страница calendar.aspx вызывается со страницы index.aspx следующим клиентским скриптом

<script>

function OpenD()
{
!--

var r=window.showModalDialog("calendar.aspx",null, _
	"dialogWidth:450px;menubar:0;dialogHeight:450px");

if (r!=null && r!="")
{

    document.all("lform").value=r;
    document.all("textR").value=r;
    document.all("lblSave").innerHTML=r; 
    document.all("lblNotSave").innerHTML=r; 
}
}
-->

</script>

Страница с календарем вызывается при помощи функции window.showModalDialog, обеспечивающая вызов страницы как web-диалог.

После вызова результат выбора пользователя присваивается html элементам на странице

document.all("lform").value=r; 
document.all("lblSave").innerHTML=r; 
document.all("textR").value=r; 
document.all("lblNotSave").innerHTML=r;

Таким образом можно обработать дату, выбранную пользователем на странице calendar.aspx. Но тут возникает проблема – необходимо выбранную дату сохранить в коллекцию ViewState состояний сеанса страницы, так как вышеприведенный скрипт является клиентским и никак не может воздействовать на серверную коллекцию Viewstate.

Это проблема актуальная, так как выбранную дату пользователь скорее всего захочет использовать в серверных скриптах, которые как раз и извлекают значения элементов страницы из коллекции ViewState.

Для строки ввода textR дополнительных манипуляций делать не нужно – данные из нее буду корректно передаваться в коллекцию Viewstate.

Для того, чтобы передать значение метки типа Label, необходимо завести на странице input тэк с атрибутом hidden

<INPUT id="lform" type="hidden" runat="server">

причем важно добавить атрибут runat="server". Для добавления значения метки lblSave в коллекцию ViewState в метод Page_Load добавьте следующий код

If Not Page.IsPostBack Then
	
    lblSave.Text = Now.Today.ToShortDateString.ToString
		(New System.Globalization.CultureInfo("ru-ru"))

Else

    Dim ltext As String
    ltext = Request.Form("lform")
    If Not ltext Is Nothing AndAlso ltext <> "" Then
    	lblSave.Text = ltext
    End If
    
End If

Благодаря ему вы сможете использовать значение метки lblSave в вашем приложении.

Страница calendar.asxp, предназначенная для выбора даты, кроме календаря, больше ничего в себе не содержит.

Обработка выбора пользователя осуществляется при помощи отклика на событие SelectionChanged календаря:

Private Sub c1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) 
              Handles c1.SelectionChanged

Page.RegisterStartupScript("CloseScript", _
	"<script>CloseW("" & c1.SelectedDate.ToShortDateString.ToString
	(New System.Globalization.CultureInfo("ru-ru")) _
	& "")</script>")

End Sub

То есть после выбора даты пользователем в результирующий html код старницы записывается вызов функции CloseW, которая возвращает родительскому окну выбранную дату и закрывает дочернее окно

<script>

<!--
function CloseW(dateR)
{
window.returnValue=dateR;
window.close();
}
-->

</script>

Также необходимо вставить в раздел head страницы тэг base

<base target="_self">

Рассмотрим полученную страницу.

Нажмите на кнопку "выбрать календарь" и установите какую-нибудь дату. Выбранная вами дата появится во всех ячейках второй строки таблицы. Но если вы нажмете на кнопку "обновить страницу", то выбранная вами дата сохраниться только в столбце "Label с сохранением состояния" и "TextBox", а в строке "Label без сохранения состояния" появиться дата, установленная при первой загрузке страницы. Это происходит из-за того, что управлением состояния метки мы lblSave занимались принудительно, строка ввода textR занимается сохранением состояния сама, а метка lblNotSave сама свое состояние сохранить не может.

Таким образом можно создать удобный popup календарь, который просто внедрить в дизайн любой страницы.

Popup календарь на ASP.NET странице
Лента новостей


2006 (c) Copyright Hardline.ru