Sobre a implementação do ASP.NET chamando JavaScript

Este artigo combina exemplos para descrever como usar scripts Javascript do lado do cliente em aplicativos ASP.net para melhorar a eficiência de execução do programa e obter mais funções.

1. ASP.Net e Javascript

.Net é o núcleo da estratégia de próxima geração da Microsoft, e ASP.Net é a implementação específica da estratégia .Net no desenvolvimento Web. Ele herda a simplicidade e facilidade de uso do ASP, ao mesmo tempo que supera as deficiências dos programas ASP que são mal estruturados e difíceis de ler e compreender. Em particular, a introdução de controles do lado do servidor e de modelos orientados a eventos tornou o desenvolvimento de aplicações Web mais próximo do desenvolvimento de programas de desktop no passado.

Em vários artigos e livros que apresentam o ASP.Net, o foco está nos controles de servidor e no .Net Framework SDK porque essas são as melhorias mais recentes e revolucionárias no ASP.Net, em contraste, o JavaScript de script do lado do cliente (também incluindo VBScript), que; desempenhou um papel importante no desenvolvimento web no passado, raramente é mencionado. Parece que com programas do lado do servidor, os scripts do lado do cliente não são mais necessários. No entanto, o programa do lado do servidor requer uma interação entre o navegador e o servidor Web. Para ASP.Net, é um envio de página, que requer o envio de uma grande quantidade de dados. verificação de entrada ou confirmação de exclusão, estão completamente ok. Portanto, ainda é necessário explorar como utilizar Javascript em ASP.Net.

2. Exemplos de aplicações Javascript

1. Adicionar um evento Javascript a um controle de servidor na página

O controle de servidor gera HTML comum, como gerando texto de entrada. Cada controle HTML no formulário possui seu próprio evento Javascript, como Textbox possui evento onchange, Button possui evento onclick, Listbox possui evento onchange, etc. Para adicionar eventos do lado do cliente a um controle de servidor, você precisa usar a propriedade Attributes. O atributo Attributes é um atributo que todos os controles de servidor possuem. Ele é usado para adicionar algumas tags personalizadas ao HTML final gerado. Suponha que haja um botão salvar btnSave no formulário da Web e você queira perguntar ao usuário se ele realmente deseja salvar ao clicar neste botão (por exemplo, uma vez salvo, não pode ser restaurado, etc.), o código a seguir deve ser adicionado ao evento Page_Load:

se não for page.isPostBack() then

btnSave.Attributes.Add("onclick","Javascript:return confirm('Tem certeza de salvar?');")

end if

Deve-se observar que 'return' não é omitido, caso contrário, mesmo que o usuário clique em Cancelar, os dados ainda serão salvos.

2. Adicione um evento Javascript para cada linha do Datagrid

Suponha que cada linha do Datagrid tenha um botão de exclusão. Quando o usuário clicar neste botão, espera-se que o usuário seja questionado se realmente deseja excluir este registro, caso. o usuário clica na linha errada ou apenas clica no botão Excluir.

Não importa qual seja o nome deste botão de exclusão, ele não pode ser referenciado diretamente como no exemplo anterior, porque cada linha possui esse botão e eles são controles filhos no Datagrid. Neste caso, você precisa usar o evento OnItemDataBound do Datagrid. O evento OnItemDataBound ocorre depois que cada linha de dados no Datagrid é vinculada ao Datagrid (ou seja, ele é acionado uma vez por linha). Primeiro, adicione o seguinte código à declaração do Datagrid:

...Definição de colunas aqui

Aqui é explicado que o ItemDataBound é chamado quando o evento OnItemDataBound ocorre, adicione a definição deste método no arquivo code-behind:

Sub ItemDataBound (ByVal sender As Object, ByVal e As DataGridItemEventArgs)

If e.Item.ItemType <> ListItemType.Header And e.Item.ItemType <> ListItemType.Footer Then

Dim oDeleteButton As LinkButton = e.Item.Cells(5). Controls(0)

oDeleteButton.Attributes("onclick") = "javascript:return Confirm ('Tem certeza que deseja excluir" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"

Fim If

End Sub

Como a linha de título e a linha de rodapé do Datagrid também acionarão esse evento, primeiro considera-se que a linha que aciona esse evento não é a linha de título ou a linha de rodapé. Supõe-se aqui que o botão Excluir está localizado na coluna 6 do Datagrid (a primeira coluna é 0), e a fonte de dados do Datagrid contém uma coluna chamada "m_sName"

3. Referência aos controles no Datagrid no estado de edição

A função de edição integrada do Datagrid é um método de edição quando o número de campos no registro é pequeno. O usuário não precisa entrar em uma página separada para editar o registro, mas pode clicar diretamente no botão de edição para colocar a linha atual no modo de edição. Por outro lado, existem alguns programas Javascript que precisam referenciar o nome do controle. Por exemplo, muitos programas fornecem um controle de data quando o usuário precisa inserir uma data para garantir a legalidade do formato da data. Quando o usuário clica no ícone de controle, uma nova janela aparece para o usuário selecionar uma data. Neste momento, você precisa fornecer o ID da caixa de texto que exibe a data na nova janela para que o valor possa ser preenchido na caixa de texto quando o usuário selecionar a data.

Se for um controle de caixa de texto de servidor comum, seu ID é igual ao ID da caixa de entrada HTML gerada, mas no estado de edição do Datagrid, os dois IDs não são iguais (o motivo é o mesmo do exemplo acima; ), que requer o uso da propriedade ClientID do controle.

Sub ItemEdit protegido (fonte ByVal como objeto, ByVal e como System.Web.UI.WebControls.DataGridCommandEventArgs)

Dim sDateCtrl como string

sDateCtrl = grd1. . ClientID

End Sub

Supõe-se aqui que o método ItemEdit é o manipulador de eventos OnItemEdit do Dategrid e que a terceira coluna do Datagrid contém um controle de caixa de texto do servidor chamado txtDate.

4.

se refere ao programa Javascript gerado automaticamente pelo ASP.Net

é voltado para desenvolvedores. Não há distinção entre servidor e cliente no programa fonte HTML gerado. JavaScript. A razão pela qual ele pode responder à entrada do usuário é que o manipulador de eventos de cada controle eventualmente gera um script. Esse script reenvia a página para que o servidor Web tenha a chance de responder e processar novamente. Normalmente não precisamos saber o que é esse script ou chamá-lo diretamente, mas em alguns casos, chamar esse script de maneira adequada pode simplificar muito trabalho. Dê uma olhada nos dois exemplos a seguir.

● Clique em qualquer lugar no Datagrid para selecionar uma linha.

O Datagrid fornece um botão de seleção integrado. Quando esse botão é clicado, a linha atual é selecionada (a propriedade SelectedItemStyle pode ser definida para dar à linha atual uma aparência diferente). No entanto, os usuários podem estar mais acostumados a selecionar uma linha clicando em qualquer lugar. Seria bastante complicado implementar essa função inteiramente por conta própria. Uma boa ideia é adicionar um botão de seleção, mas ocultar a coluna, e chamar o Javascript gerado por esse botão quando alguma linha for clicada.

Sub Item_Bound (ByVal remetente As Object, ByVal e As DataGridItemEventArgs )

Dim itemType As ListItemType

itemType = CType (e.Item.ItemType, ListItemType)

If (itemType <> ListItemType.Header) E _

(itemType <> ListItemType.Footer) E _

(itemType <> ListItemType.Separator) Então

Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)

e.Item.Attributes("onclick") = GetPostBackClientHyperlink (oSelect, " ")

End Sub

Isso pressupõe que o botão de seleção esteja localizado na coluna 6. e.Item representa uma linha a julgar pelo HTML gerado, um evento onclick é adicionado a cada . O método Page.GetPostBackClientHyperLink retorna o script do cliente gerado pelo controle LinkButton na página. O primeiro parâmetro é o controle Linkbutton e o segundo parâmetro é o parâmetro passado para esse controle, que geralmente está vazio. Se não for um controle LinkButton, existe uma função semelhante GetPostBackClientEvent. Os leitores podem consultar o MSDN.

● Scripts gerados pelo servidor entram em conflito com scripts adicionados manualmente.

Os eventos de servidor dos controles do servidor geralmente correspondem aos eventos correspondentes dos controles do cliente. Por exemplo, o evento SelectedIndexChanged do Dropdownlist corresponde ao evento onchange do HTML . Se você quiser adicionar manualmente um evento onchange, dois onchanges serão gerados no lado do cliente e o navegador irá ignorar um. Por exemplo, o usuário deseja salvar no banco de dados toda vez que altera as opções do Dropdownlist (embora não seja muito comum, mas essa necessidade existe), mas ao mesmo tempo, ele também deseja lembrar ao usuário se ele realmente quer economizar. Obviamente, o código salvo deve ser colocado no evento SelectedIndexChanged e o lembrete deve ser adicionado manualmente com um evento onchange. O resultado é que apenas um dos dois onchanges pode ser executado. O método correto deveria ser adicionar um botão salvar invisível e chamar o programa gerado por este botão no evento onchange adicionado manualmente.

O método Page_Load é o seguinte:

Dim sCmd as string

sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")

Se não for page.isPostback então

Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """ )")

Terminar se

A função ConfirmUpdate é a seguinte:

A função Javascript eval é usada aqui para chamar uma string de comandos contidos em . Deve-se observar que a string que contém o comando não pode ser colocada entre aspas simples, pois o script gerado automaticamente inclui aspas simples, portanto, aqui duas aspas duplas são usadas para representar as aspas duplas da própria string.

3. Conclusão

Acima discutimos brevemente diversas situações de inserção de Javascript em ASP.Net. A inserção adequada de scripts Javascript do lado do cliente no programa do servidor pode melhorar a eficiência de execução do programa e fornecer uma interface de usuário mais amigável.