ASP.NET - Janela Modal com calendário

Um recurso muito interessante fornecido pelo JavaScript e Internet Explorer é a possibilidade de abrir uma janela Modal, de forma que o navegador fique preso nessa janela até que a mesma seja fechada. Fazendo com que o usuário tome uma ação nessa janela para continuar, impedindo assim que ele ignore a mesma, como acontece com uma janela normal. Para tornar esse exemplo mais interessante estarei combinando com Calendário para que o usuário selecione uma data e a mesma seja retornada para uma caixa de texto na pagina conforme Figura 01.

Figura 01 - Janela Modal

Janela Modal

Em um novo projeto web, adicione um nova pagina chamada de modal.aspx, depois adicione um textbox(ID=txtData) e um Image(ID=imgOpenModal,ImageUrl=images\calendario.gif) conforme Figura 01. Depois adicione o código apresentado na Listagem 01 que está dividida em duas partes (HTML e Código).

Listagem 01 - Janela Modal (modal.aspx e modal.aspx.vb)

Código modal.aspx <HTML> - Adicione após tag <Body>

<script> 

function ShowDialog() 

{
 var retorno=""; 

retorno = showModalDialog("modal_frame.aspx",
    "window","help:no;status:no;scroll:yes;edge:raised;dialogWidth:179px;edge:raised;dialogHeight:189px") 

   if(retorno!="" && retorno!=null)
        {
         document.getElementById("txtData").value=retorno;
        } 

 }
</script>

<Código modal.aspx.vb> 

Public Class modal
    Inherits System.Web.UI.Page
    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) 
      Handles MyBase.Load 

        If Not Page.IsPostBack Then
            imgOpenModal.Attributes.Add("onclick", "javascript:ShowDialog()")
            imgOpenModal.ToolTip = "Carrega Calendário Modal"
            imgOpenModal.Style("cursor") = "hand"
            Me.txtData.ToolTip = "Clique na figura ao lado"
            Me.txtData.Enabled = False
        End If
    End Sub 

End Class

Agora adicione uma nova pagina chamada de modal_frame.aspx e no modo <HTML> adicione o código da Listagem 02. dentro da Tags <Form>, copie apenas a linha do Iframe.

Listagem 02 - Janela Modal (modal_frame.aspx)

<form id="Form1" method="post" runat="server"> 

  <iframe src="modal_calendario.aspx" width="100%" height="100%"></iframe> 

</form>

Após concluir esta etapa, adicione mais uma pagina chamada de Modal_Calendario.aspx, e incluir um controle Calendário. Depois adicione no mesmo o código apresentado na Listagem 03.

Listagem 03 - Janela Modal (modal_calendario.aspx.vb)

Public Class modal_calendario 

    Inherits System.Web.UI.Page  

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) 
      Handles MyBase.Load 

        Dim js As New System.Text.StringBuilder 

        js.Append("<script>")
        js.Append(vbCrLf)
        js.Append("function FechaPagina ()")
        js.Append(vbCrLf)
        js.Append("{")
        js.Append(vbCrLf)
        js.Append("window.returnValue=document.getElementById(""txtDataHidden"").value;")
        js.Append(vbCrLf)
        js.Append("window.close();")
        js.Append(vbCrLf)
        js.Append("}")
        js.Append(vbCrLf)
        js.Append("</script>")
        js.Append(vbCrLf) 

  

        If (Not IsClientScriptBlockRegistered("fechar")) Then
            RegisterClientScriptBlock("fechar", js.ToString)
        End If 

    End Sub 

  
Private Sub Calendar1_SelectionChanged(ByVal sender As System.Object, 
ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged 

        "Definindo valor para retornar! 

        Dim js As New System.Text.StringBuilder
        js.Append("<script>")
        js.Append("window.onload=FechaPagina();")
        js.Append("</script>")

        If (Not IsClientScriptBlockRegistered("Wclose")) Then
            RegisterClientScriptBlock("Wclose", js.ToString)
        End If 

        RegisterHiddenField("txtDataHidden", Calendar1.SelectedDate.ToString("dd/MM/yyyy")) 

End Sub 

End Class

Após adicionar esse código já pode realizar o teste chamando a pagina modal.aspx, a mesma deve chamar a janela modal do calendário e quando o usuário escolher uma data a mesma vai ser retornada para caixa de texto conforme já apresentado na Figura 01.

Finalizando

Você aprendeu nesse artigo como utilizar JavaScript para criar janela modal . Então como está mostrado nesse artigo, você pode continuar utilizando os códigos JavaScript para incrementar sua pagina. Observe o comando "RegisterClientScriptBlock" que é utilizado para adicionar o código JavaScript a pagina.

O que você gostaria saber?

Aguardo seu comentário! Ele é muito importante. Participe!!! Até próximo artigo!

Você é de Salvador Bahia, então participe do grupo de usuários .NET: http://www.mutex.com.br.

Desenvolvimento - ASP. NET

ASP.NET - Janela Modal com calendário
Um recurso muito interessante fornecido pelo JavaScript e Internet Explorer é a possibilidade de abrir uma janela Modal, de forma que o navegador fique preso nessa janela até que a mesma seja fechada...
por Ramon Durães

Leia também

Desenvolvimento - ASP. NET

ASP.NET - Janela Modal com calendárioUm recurso muito interessante fornecido pelo JavaScript e Internet Explorer é a possibilidade de abrir uma janela Modal, de forma que o navegador fique preso nessa janela até que a mesma seja fechada...por Ramon Durães

Leia também

ASP.NET - Janela Modal com calendário
Um recurso muito interessante fornecido pelo JavaScript e Internet Explorer é a possibilidade de abrir uma janela Modal, de forma que o navegador fique preso nessa janela até que a mesma seja fechada...
por Ramon Durães