Existem dois aspectos na codificação do lado do cliente para ASP.NET:
Script do lado do cliente : é executado no navegador e, por sua vez, acelera a execução da página. Por exemplo, a validação de dados do lado do cliente pode capturar dados inválidos e alertar o usuário adequadamente, sem passar por um postback no servidor.
Código-fonte do cliente : a página da web ASP.NET forma esse código-fonte do cliente. Por exemplo, o código-fonte HTML de uma página da Web ASP.NET contém várias áreas ocultas e pode injetar automaticamente o código da linguagem de descrição Java para preservar informações como o estado de visualização ou executar outras tarefas para garantir que a página da Web funcione corretamente.
Todos os controles de servidor ASP.NET permitem codificação responsiva via linguagem Java ou desenho em linguagem VBS. Alguns controles de servidor ASP.NET usam scripts do lado do cliente para responder às necessidades do usuário sem postar de volta no servidor. Por exemplo, controles de validação de dados.
Além desses scripts, o controle de botão possui um método OnClientClick adequado que executa o script do cliente quando o botão é clicado.
Os controles HTML de servidor tradicionais têm os seguintes eventos para executar scripts quando são iniciados:
| evento | propriedade |
|---|---|
| desfocado | Acionado quando o controle perde o foco |
| em foco | Acionado quando o controle ganha foco |
| ao clicar | Dispara quando o controle é clicado |
| em mudança | Disparado quando o valor do controle muda |
| onkeydown | Dispara quando o usuário pressiona um botão do teclado |
| ao pressionar a tecla | Quando o usuário pressiona uma tecla alfanumérica |
| onkeyup | Dispara quando o usuário libera a chave |
| passar o mouse | Disparado quando o usuário move o ponteiro do mouse na interface de controle |
| onserverclick | Quando a interface de controle for clicada, inicie o controle de evento ServerClick |
Discutimos o código-fonte do cliente acima. As páginas da web ASP.NET geralmente são escritas em dois tipos de arquivos:
Arquivo de conteúdo ou arquivo de aprovação (.aspx)
Arquivos code-behind
Os arquivos de conteúdo contêm tags de controle HTML ou ASP.NET e texto para formar a estrutura da página. O arquivo code-behind contém as definições de classificação. Em tempo de execução, o arquivo de conteúdo é analisado e entregue a uma classe de página.
Esta classe de página, bem como as definições de classe no arquivo de codificação e as codificações geradas pelo sistema, juntas constituem a codificação de execução (integração). Essas codificações de integração processam todos os dados de postback, geram respostas e enviam ações de volta ao cliente.
Considere esta página simples:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="clientside._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title> Untitled Page </title> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click" /> </div> <hr /> <h3> <asp:Label ID="Msg" runat="server" Text=""> </asp:Label> </h3> </form> </body></html>Quando esta página é executada em um navegador, a opção Exibir código-fonte exibe a página HTML e a envia ao navegador por meio do tempo de execução do ASP.Net:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" > <head> <title> Untitled Page </title> </head> <body> <form name="form1" method="post" action="Default.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTU5MTA2ODYwOWRk31NudGDgvhhA7joJum9Qn5RxU2M=" /> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKpjZj0DALs0bLrBgKM54rGBhHsyM61rraxE+KnBTCS8cd1QDJ/"/> </div> <div> <input name="TextBox1" type="text" id="TextBox1" /> <input type="submit" name="Button1" value="Click" id="Button1" /> </div> <hr /> <h3><span id="Msg"></span></h3> </form> </body></html>Se você examinar a codificação corretamente, verá que as duas primeiras tags <div> contêm campos ocultos para armazenar o estado de visualização e dados válidos.