Olá pessoal,
gostaria de ensinar e mostrar de forma prática; como uma janela de forma modal
web, ou seja, na internet. Esse dia atrás estava precisando disso e não tinha
achado da forma que necessitava.
É bem simples de fazer, mas até descobrir
como fazer eu penei um pouco e, para ajudar publico como artigo agora para quem
quiser. O problema de abrir de forma modal é que caso necessite de alguma outra
coisa da janela anterior, tem que fechar a modal.
Requisitos:
Javascript
Linguagem C#.NET
Ferramenta de
desenvolvimento: Visual Studio .NET 2008
JavaScript
No meu caso, criei um arquivo .js e
importei na minha página .ASPX. Eu posso chamar a função criada no arquivo .js
de qualquer plataforma ou linguagem. No meu caso estou chamando dentro de um
componente chamado GridView. Segue o arquivo (Referência: Code 1)
|
/*
### função que
abre um popup de forma modal
### deve ser
passado a url, nome, tamanho e largura
por exemplo
OnClick="dialogModal('pagina.html', 'nome', '620', '1024');
*/
function
dialogModal(url, nome, nrTamanho, nrLargura) {
eval(window.showModalDialog(url, nome,'Resizable:no; DialogHeight:'+nrTamanho+'px ; DialogWidth:'+nrLargura+'px; Edge:raised; Help:no; Scroll:no; Status:no;
Center:yes;'));
//eval(caixa);
}
|
Referência: Code
1
GridView
Dentro do meu gridview, tenho as
colunas normais da tabela do banco e um botão imagem. (Referência: Code 2)
|
<asp:GridView ID="gridView" runat="server"
AutoGenerateColumns="false"
Width="100%" onrowdatabound="gridView_RowDataBound" HorizontalAlign="Center">
<Columns>
<asp:TemplateField ItemStyle-Wrap="false">
<ItemTemplate>
<asp:ImageButton ID="cmdImagemGrid"
runat="server"
ImageUrl="~/App_Themes/default/image/Doc.gif"></asp:ImageButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Descricao" HeaderText="Crp" />
<asp:BoundField DataField="Sequencial" HeaderText="Passada" />
<asp:BoundField DataField="DataMovimento" HeaderText="Data Movimento" />
<asp:BoundField DataField="DataInicial" HeaderText="Inicio Transf." />
<asp:BoundField DataField="DataFinal" HeaderText="Fim Transf." />
<asp:BoundField DataField="TempoTransferencia" HeaderText="Tempo
Trans." />
<asp:BoundField DataField="QtdDocumentos" HeaderText="Qtd. Docs" />
<asp:BoundField DataField="QtdFalhas" HeaderText="Falhas" />
<asp:BoundField DataField="Responsavel" HeaderText="Digitalizado por" />
<asp:BoundField DataField="PassadaId" HeaderText="Passada" />
</Columns>
</asp:GridView>
|
Referência: Code
2
O botão dentro do gridview está
separado, dentro da tag <ItemTemplate>. Referência Code 3.
|
<ItemTemplate>
<asp:ImageButton ID="cmdImagemGrid" runat="server" ImageUrl="~/App_Themes/default/image/Doc.gif"></asp:ImageButton>
</ItemTemplate>
|
Code 3
Código C#
Para pegar esse botão e adicionar uma
propriedade pra ele, tenho que criar o RowDataBound do componente GridView,
isso dentro código C#. Referência Code 4.
|
protected
void gridView_RowDataBound(object sender, GridViewRowEventArgs
e)
{
if
(e.Row.RowType == DataControlRowType.DataRow)
{
//adiciona
no botao de imagem o comando javascript dialogModal no onclickClient
ImageButton
img = (ImageButton)(e.Row.FindControl("cmdImagemGrid"));
img.OnClientClick = "dialogModal ('ControleQualidadeImagem.aspx"','pesquisa1',
'620', '1000')";
}
}
|
Referência: Code
4
É bem simples, verifiquei primeiro se o
tipo da linha era DataRow, depois usei o FindControl para achar o componente
chamado cmdImagemGrid e depois
adicionei a esse componente, o atributo OnClienteClick
passando o nome da função criada em JavaScript anteriormente.
Resultado Final
O resultado final é uma janela é a
mostrada a seguir. (Referência Imagem 1)
Referência:
Imagem 1
Espero ter
ajudado.
Qualquer dúvida
pode entrar em contato pelo comentário do site.