Entendendo Aplicações WEB
Entendendo Aplicações WEB
Renato Haddad
Microsoft Most Valuable Professional MVP, MCT, MCPD e MCTS
Tecnologias
Visual Studio .NET 2010, C#
Introdução
Neste artigo vamos falar sobre aplicações ASP.NET e Web Services. As aplicações feitas para rodarem em navegadores atingiram um nível de apresentação e interação com o internauta excelente. Os próprios recursos atualmente nos permite executar aplicações ASP.NET com desempenhos ótimos, por exemplo, sites do governo, pesquisa de preços, classificados e portais. Alguns destes tem uma grande quantidade de internautas simultâneos e a aplicação aguenta tranquilamente.
Já o Web Service é uma forma de expor informações de uma aplicação via WEB através de XML, HTTP e o protocolo SOAP (Simple Object Access Protocol). Internamente é uma classe como outra qualquer contendo alguns atributos. O conceito de Web Service é compartilhar informações entre aplicações e plataformas.
Aplicação ASP.NET
Toda aplicação ASP.NET contém o layout que chamamos de interface com o usuário. Existe a linguagem HTML que é aceita por todos os navegadores, e sendo assim, é correto pensar em gerar o máximo possível de HTML e Java Script para que a compatibilidade fique 100%.
No entanto, o ASP.NET tem uma particularidade porque a maioria dos tipos de controles utilizados nas páginas são assinados com a tag <asp:. Isto significa dizer que são controles executados no servidor, e o fluxo de execução ocorre da seguinte forma: o internauta faz uma requisição no servidor, onde o mesmo processa o código, gera um HTML e devolve para o navegador do internauta. Isto ocorre a cada solicitação no servidor. Desta maneira, o responsável por gerar o HTML é o servidor. Perceba então que o desenvolvedor não coloca controles HTML no código ASP.NET, mesmo porque se você usar os controles do ASP.NET assinados como <asp: tem a enorme vantagem de disparar eventos, atribuir propriedades, ou seja, ele é um objeto.
Em relação ao layout das páginas ASP.NET, 100% dos sites utilizam um arquivo de CSS (Cascade Style Sheet) o qual contém todas as configurações de layout, cores, tamanhos e aspectos gerais de formatação. Uma aplicação ASP.NET pode ser modificada quase que 100% só com a utilização de CSS, então, dominar CSS é muito importante, facilitando o desenvolvimento.
Para referenciar um arquivo CSS numa página ASP.NET coloque a seguinte declaração na sessão HEAD da página. Normalmente declaramos na Master.Page, assim todas as páginas que herdarem a Master já enxergam o CSS. Antes que você pergunte, sim é possível ter vários CSS na mesma página.
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
No Visual Studio .NET 2010 quando você cria uma aplicação ASP.NET, já são criados alguns modelos para facilitar o desenvolvimento, por exemplo a Master.Page, um CSS, a página Default. Veja no código a seguir os controles ASP.NET inseridos no ContentPlaceHolder da página default.aspx. Veja que há declarações HTML como <h2>, <p>, <br /> assim como <asp:TextBox>, <DropDownList>, <Button> e <Label>. Cada controle contém as propriedades pois são objetos.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="https://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
Nome:
<asp:TextBox ID="txtNome" runat="server"></asp:TextBox>
<br />
Categoria:
<asp:DropDownList runat="server" ID="ddlCategorias">
<asp:ListItem Text="Bebidas" />
<asp:ListItem Text="Massas" />
<asp:ListItem Text="Automoveis" />
<asp:ListItem Text="Acessorios" />
</asp:DropDownList>
<br />
<asp:Button Text="Enviar" runat="server" id="btnEnviar" CssClass="bold" onclick="btnEnviar_Click"/>
<br />
<asp:Label id="lblNome" runat="server" CssClass="failureNotification" />
</asp:Content>
A figura seguinte ilustra exatamente o código anterior.
Como há um botão chamado btnEnviar, dê um duplo clique para criar o evento de clicar. Digite o seguinte código que irá exibir no Label lblNome o nome digitado no txtNome concatenado da categoria selecionada no DropDownList ddlCategorias.
protected void btnEnviar_Click(object sender, EventArgs e)
{
lblNome.Text = txtNome.Text +
" - categoria: " + ddlCategorias.Text;
}
Para executar pressione F5 e teste no navegador.
Exatamente no evento clicar do botão, é enviada uma requisição ao servidor que irá ler os dados digitados/selecionados, gerar o HTML e devolver ao cliente o resultado. Isto é o que chamamos de execução no servidor.
Já o processamento do lado do cliente é usado o Java Script porque todo navegador entende isto. Desta forma, como tudo está no cliente, não há requisição feita no servidor, deixando o processamento muito mais rápido, afinal fica tudo local.
As declarações do Java Script podem ser feitas na sessão HEAD do HTML. Quando se utiliza Mater.Page na Master há o PlaceHolder chamado HeaderContent e é exatamente aqui que declaramos o Java Script, conforme o código a seguir. Está código mostrará uma caixa de mensagem Olá toda vez que a página for carregada. O comando alert do Java Script contém a mensagem que quer exibir ao usuário.
Em alguns tipos de aplicações quando é preciso identificar um elemento na página, é usado o document.getElementsByName("lblNome"); contendo o nome do controle em si, neste caso o lblNome.
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
alert('Ola');
document.getElementsByName("lblNome");
</script>
</asp:Content>
Isto foi apenas para você ter uma ideia de processamento no cliente e no servidor.
Quando tiver um formulário aberto no VS, abra a Toolbox para ver quais controles podem ser usados na aplicação, conforme a seguinte figura.
Web Service
Web Service é uma forma de compartilhar informações entre aplicações e plataformas, permitindo assim expor serviços de leitura e escrita pela WEB. Basicamente se eu disser que muitas aplicações trocam arquivos texto para conversarem você saberá o que estou dizendo. No entanto, Web Service foi feito para ser transparente, ou seja, você cria um método que recebe a solicitação via WEB, executa um determinado código que só o método sabe, e no retorno ao cliente é gerado um XML. Para o tráfego é utilizado o protocolo SOAP (Simple Object Access Protocol) que é trafegado via HTTP.
Veja no código a seguir um Web Service criado no Visual Studio contendo os atributos de [WebService] e [WebServiceBinding]. Veja que a classe chama-se WebService1, poderia ser qualquer outro nome também o qual herda de System.Web.Service.WebServices.
Já na declaração dos métodos, o mais importante é a declaração do atributo [WebMethod] que indica que este método será exposto via WEB. Neste exemplo, temos dois métodos, o HelloWorld que é default e eu não o apaguei, e o Somar que digitei. Este Somar retorna um tipo int (inteiro) e tem dois parâmetros de entrada do tipo int, que são os números a serem somados. O conteúdo do método é apenas a soma dos dois parâmetros n1 e n2.
[WebService(Namespace = "https://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod(Description = "Somar 2 numeros")]
public int Somar(int n1, int n2)
{
return n1 + n2;
}
}
Na execução do Web Service no navegador (veja que a extensão do arquivo é .asmx) são mostrados os dois métodos.
Clique em Somar e aparecerá uma tela solicitando a digitação dos dois números.
Digite por exemplo os números 27 e 3 e clique no botão Invoke. O resultado final será um XML contendo o resultado da soma 30.
Agora vou mostrar como montar uma página ASP.NET chamada ConsomeWebService contendo o layout a seguir que irá invocar o web servisse criado.
<h1>Consome web service</h1>
número 1:
<asp:TextBox runat="server" id="txt1"/>
<br />
número 2:
<asp:TextBox runat="server" id="txt2"/>
<br />
<asp:Button Text="Somar" ID="btnSomar" runat="server" onclick="btnSomar_Click" />
<br />
<asp:Label Text="0" ID="lblSomar" runat="server" />
Veja o layout do código.
Dê um duplo clique no botão Somar e digite o seguinte código que irá instanciar a classe WebService1, invocar o método Somar passando os dois números digitados como argumentos. O uso do int.Parse é necessário porque os parâmetros no Web Service esperam um número do tipo int.
protected void btnSomar_Click(object sender, EventArgs e)
{
WebService1 ws = new WebService1();
lblSomar.Text = ws.Somar(int.Parse(txt1.Text),
int.Parse(txt2.Text)).ToString();
}
Este exemplo é prático porque fiz o Web Service no mesmo projeto, mas se você quiser separar os projetos, um de ASP.NET e outro de Web Service ou ainda referenciar um Web Service do mercado, basta adicionar a referencia no projeto ASP.NET. Neste caso, informa a URL completa do Web Service.
Bons estudos e sucesso nos projetos.
Sobre o Autor
Renato Haddad (rehaddad@msn.com – www.renatohaddad.com ) é MVP, MCT, MCPD e MCTS, palestrante em eventos da Microsoft em diversos países, ministra treinamentos focados em produtividade com o VS.NET 2010, ASP.NET 4, Entity Framework, Reporting Services e Windows Phone. Visite o blog https://weblogs.asp.net/renatohaddad.