ASP .NET - Usando JavaScript - II

 Neste artigo vou apresentar os conceitos básicos do JavaScript e como usar os seus recursos na ASP .NET.

Em continuação ao meu artigo, Usando JavaScript I onde apresentei alguns conceitos básicos relacionados ao JavaScript, vou mostrar alguns exemplos práticos que você pode usar para tornar as suas aplicações ASP.NET mais interativas e funcionais.

1- Usando janelas pop-up estilo Lookup

Em aplicações desktop, é muito comum a utilização de consultas lookup onde uma janela é aberta e apresenta as opções e o usuário efetua a sua escolha. Talvez o exemplo clássico seja uma consulta de clientes em um formulário de cadastro de pedidos. Vejamos como implementar a mesma funcionalidade em ASP.NET usando JavaScript.

Abra o Visual Web Developer e crie um novo web site , menu File->New Web Site, com o nome de janelasPopUpJs.

A seguir você deve criar uma conexão com o banco de dados Northwind.mdf no SQL Server 2005. Você pode usar o DataBase Explorer e criar a conexão no seu projeto Local ou usar o Management Studio (configura o meu artigo: .NET  2005 - Usando o SQL Server Management Studio ).

Após ter a conexão criada vamos criar um DataSet tipado :

1- Clique com o botão direito do mouse sobre o nome do projeto na janela Solution Explorer e acione a opção Add New Item;
2- Na janela Templates selecione DataSet e informe o nome Northwind.xsd e clique no botão Add;
3- O VWD irá perguntar se você deseja colocar o DataSet na pasta App_Code, clique em Yes e interrompa o processo neste ponto;
4- Abra a janela Database Explorer e expanda a conexão Northwind criada de modo a exibir as tabelas;
5- Estando com o DataSet aberto a seguir arraste a tabela Categorias do DataBase Explorer para  janela do DataSet;

Será criada o DataTable Categories e o TableAdpater CategoriesTableAdapter

Agora selecione o arquivo Default.aspx e alterne para o modo Design e vamos criar um formulário de cadastro de Produtos. A partir do menu Layout selecione Insert Table e inclua uma tabela com 4 linhas e 2 colunas construindo o formulário de cadastro conforme a figura abaixo:

Este formulário esta na página Default.aspx e será a página principal, durante o cadastro o usuário poderá clicar no botão Busca e será aberta uma nova janela exibindo as categorias cadastradas permitindo a seleção da categoria desejada.

Configure as seguintes propriedades da célula Categoria do formulário:

- ID do botão Busca igual btnBuscaCategoria
- ID txtCodigoProduto para o primeiro TextBox
 - ID txtCodigoCategoria para o segundo primeiro TextBox
- ID txtNomeCategoria para o seguinte TextBox
- ID txtNomeProduto para o quarto TextBox

Vamos então incluir  um nova página chamada Categorias.aspx. No menu WebSite selecione  Add New Item e marque o template Web Form informando o nome da página e clicando no botão Add.

A partir da ToolBox, na guia Data, arraste o componente GriView para a página Categorias.aspx e em Choose Data Source selecione <new data source>

Na janela Choose a Data Source Type marque a opção Object e altere o nome para oCategoriasDS e clique no botão Next>

Na próxima janela selecione o objeto de negócio : NorthwindTableAdapters.CategoriasTableAdapter e clique em Next> até encerrar o processo e termine clicando em Finish.

Você deverá ver o GridView exibindo os dados da tabela Categorias. Clique no link Edit Columns e exclua o campo Description.

A seguir em Available fields localize e expanda CommandField e inclua uma coluna do tipo Select definindo a sua propriedade ButtonType como Button e defina sua propriedade Text para Selecionar:

Aplique uma formatação e ative a paginação do GridView; o resultado final pode ser visto na figura abaixo:

Temos portando duas páginas :  a página Default.aspx que é a página de cadastro e a página Categorias.aspx que á página que será usada para buscar e selecionar dados de uma categoria.

Volte a página Default.aspx e no evento Click do botão Busca vamos incluir o código JavaScript:

Este código define um código javaScript que usa a função window.open para abrir um janela pop-up. A página Categorias.aspx será então aberta como uma janela pop-up com as seguintes propriedades:

O RegisterClientScriptBlock da propriedade ClientScript do objeto Page executa o javascript incluindo-o na página Default.aspx.

Para abrir uma janela com Javascript podemos utilizar a sentença window.open(). (cuidado JavaScript é case sensitive)

1. Sentença Javascript para abrir uma janela
A sentença é chamar a função window.open(). A função possui muitos parâmetros. Vejamos os mais importantes:

A função window.open() usa três parâmetros:  window.open( URL ,  nome_da_janela,  forma_da_janela)

 

Exemplo:
<script language="javascript">
    window.open("pagina_a_ser_aberta" , "nome_da_página" );
</script>
 

Abrindo pop-up (macoratti.html):
<script language="javascript">
     window.open("macoratti.html" , "macoratti");
</script>
 

Pela função window.open podemos controlar o tamanho da janela:
<script language="javascript">
   window.open("macoratti.html", "Macoratti" , "height = 350 , width = 350");
   //Height = Altura, Width = largura.
   //Abre uma Nova Janela de 350 x 350 com o título "Macoratti"
</script>
 

Esta função permite escolher entre exibir ou não: a barra de rolagem, a barra de status, a barra de menu,
barra de ferramentas, barra de endereços, barra de títulos, exibir em tela cheia... Exemplo para exibir a barra de rolagem:
 

<script language="javascript">
    window.open("macoratti.html", "Macoratti" ,"scrollbars = yes");
</script>

As demais opções são:   Barra de status: status=yes/no,  Barra de menu: menubar=yes/no ,  Barra de ferramentas: toolbar=yes/no ,  
                                       Barra de título: titlebar=yes/no, Barra de endereços:location=yes/no ,  Tela cheia:fullscreen=yes/no ,  
                                       Barra de diretórios:directories=yes/no

Se executarmos a página Default.aspx e clicarmos no botão Busca iremos obter:

Precisamos agora obter os dados da seleção do usuário na janela pop-up (o código da categoria e o seu nome) e preencher as caixas de texto no formulário principal.

Como fazer isso ?

Usando JavaScript , ora bolas...

Selecione a página Categorias.aspx e no evento SelectedIndexChanged do controle GridView vamos incluir o código abaixo:

Protected Sub gdvCategorias_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles gdvCategorias.SelectedIndexChanged
 

Dim jscript As String = ""

Dim codigo As String = gdvCategorias.SelectedRow.Cells(1).Text

Dim nome As String = gdvCategorias.SelectedRow.Cells(2).Text


jscript += "<script language='JavaScript'>"

jscript += ";window.opener.document.forms[0].txtCodigoCategoria.value= '"

jscript += codigo

jscript += "';window.opener.document.forms[0].txtNomeCategoria.value= '"

jscript += nome

jscript += "';window.close();"

jscript += "</script>"


Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "Categorias", jscript)

 

End Sub

Executando a página Default.aspx e clicando agora no botão Busca. A página Categorias.aspx é aberta e quando selecionamos uma categoria o valor do código da categoria e do nome da mesma são retornados para os controles TextBox da janela que a chamou , a opener:

Nota: Quando se trabalha com janelas popups às vezes precisamos manipular a janela "pai", aquela janela gerou a janela popup. Neste caso podemos usar a propriedade opener do objeto window.  Quando uma janela é aberta a partir de outra janela , ela mantêm uma referência para a primeira janela através de  window.opener.

2- Efetuando a formatação do formulário com estilos

Vamos agora melhorar o visual do formulário efetuando a formatação do mesmo usando um arquivo de estilo.

Clique com o botão direito do mouse sobre o nome do projeto e selecione a opção Add ASP.NET Folder->Theme , e em seguida informe o nome da sub-pasta como Tema.

A seguir clique com o botão direito sobre a pasta Tema e selecione Add New Item

Na janela Templates selecione Style Sheet e aceite o nome padrão: StyleSheet.css

Agora vamos definir alguns estilos para o arquivo StyleSheet.css usando o editor de estilos do VWD, conforme figura abaixo:

Neste arquivo de estilos eu estou definindo 4 classes de formatação que serão ativadas via JavaScript usando os seguintes eventos:

Para ativar o estilo vamos definir no arquivo web.config a propriedade page Theme="Tema" conforme figura a seguir:

Finalmente vamos usar atribuir os estilos no evento Load da página Default.aspx :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


If Not Page.IsPostBack Then

   txtCodigoProduto.Focus()

   txtCodigoProduto.Attributes.Add("onFocus", "this.className='CaixaTextoDestaque';")

   txtCodigoProduto.Attributes.Add("onBlur", "this.className='CaixaTextoNormal';")

   txtCodigoCategoria.Attributes.Add("onFocus", "this.className='CaixaTextoDestaque';")

   txtCodigoCategoria.Attributes.Add("onBlur", "this.className='CaixaTextoNormal';")

   txtNomeCategoria.Attributes.Add("onFocus", "this.className='CaixaTextoDestaque';")

   txtNomeCategoria.Attributes.Add("onBlur", "this.className='CaixaTextoNormal';")

   txtNomeProduto.Attributes.Add("onFocus", "this.className='CaixaTextoDestaque';")

   txtNomeProduto.Attributes.Add("onBlur", "this.className='CaixaTextoNormal';")

   txtPrecoProduto.Attributes.Add("onFocus", "this.className='CaixaTextoDestaque';")

   txtPrecoProduto.Attributes.Add("onBlur", "this.className='CaixaTextoNormal';")

End If

End Sub

Executando a página Default.aspx ao navegar pelas caixas de texto veremos a aplicação do estilo definido :

Eu poderia também definir mensagens ao usuário , texto de ajuda , etc. usando a mesma técnica , mas vou deixar isso para um próximo artigo.

Pegue o projeto completo aqui:  janelasPopUpJs.zip (sem a base de dados)

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti