Vous êtes sur la page 1sur 40

O que ? Feliz ou infelizmente cada vez mais nos estamos a virar para o mundo da WEB e para a CLOUD.

A prever isso a Microsoft lanou j h alguns anos o ASP.NET (Active Server Pages), que ao contrrio do que se diz no uma linguagem de programao mas sim uma Framework para desenvolvimento WEB. Como uma Framework assente na Framework .NET podemos usar para programar as linguagens C# e VB.NET. Em ASP.NET criamos pginas (WEB Forms) dinmicas em que o cdigo corrido no servidor como o caso de outras tecnologias (PHP, JSP). Pressupostos: No que seja imperativo mas para sermos bons programadores de WEB, antes de sequer abrir o Visual Studio, temos de entender o mundo que vai por trs do browser. Temos de entender o protocolo HTTP, Request / Response, ciclos de vida de uma pgina, diferena entre cliente e servidor, State Management, PostBack, JavaScript, CSS e claro HTML. No irei falar sobre tudo isto, apenas do que est relacionado com o ASP.NET, mas bom sabermos o que est por detrs de cada aco que fazemos no browser Cliente VS Servidor: Como j referi uma Web Form ASP.NET executada do lado do servidor, o que significa que cada vez que pedimos (Request) essa pgina ela executada no servidor e posteriormente devolvida (Response) para o browser em HTML, esta operao ocupa largura de banda e tempo, logo se o podermos evitar ou ento no enviar a pgina toda melhor (Partial PostBack (AJAX)), podermos concretizar isso usando JavaScript, que uma linguagem que corre directamente no Browser (Cliente) ou AJAX (Javascript assncrono e XML). No significa que no cliente melhor ou que no servidor mais seguro, o grande desafio das WebForms a fuso entre cdigo do lado do cliente e servidor, tornando assim a pgina rpida e menos pesada. PostBack: O PostBack o nome que se d operao de Request e Response, ou seja, quando uma pgina inteira e o seu contedo so enviados para o servidor, processados e devolvidos para o browser. Sabem quando fazem refresh a uma pgina ou carregam num boto e o browser fica branco e depois aparecem os contedos? isso um PostBack. Mais tarde falaremos da propriedade Page.IsPostBack do ASP.NET. Felizmente existem formas de contornar isso graas ao AJAX que permite que sejam s enviados pedaos da pgina e de modo assncrono o que permite continuar a trabalhar sem o browser bloquear. Ciclos de vida de uma pgina: Falaremos aqui do mais importante e utilizado o Load. a melhor altura para fazer aces devido ao facto de que os controlos j esto todos carregados, o viewstate disponvel e ainda no tarde para fazer alteraes pois no chegou ao Render que quando o HTML da pgina j est todo desenhado. Para mais informaes podem seguir este link: http://msdn.microsoft.com/enus/library/ms178472.aspx

State Management: Entende-se por State Management a capacidade do ASP.NET poder guardar informao entre PostBacks da mesma ou de outras (vrias) pginas. Existem vrias opes relacionadas com desempenho e capacidade, cliente ou servidor: Do lado do cliente: View State: o view state vive nas pginas, se por curiosidade virem um source code de um aspx (extenso das pginas ASP.NET) vo reparar numa data de gatafunhos contidos num Hidden Field chamado viewstate. O viewstate criado a partir de cada controlo que adicionamos nossa pgina para, entre postbacks, poder manter o seu valor. Ex: Temos uma caixa de texto na pgina e ao carregar num boto a pgina faz postback mas o valor permanece na caixa de texto. Vantagens: Simples, no requer implementao Desvantagens: No recomendado para guardar muita informao pois a pgina ficar lenta. Hidden Fields: Uma espcie de varivel global na prpria pgina Vantagens: Fcil implementao Desvantagens: Pouco seguro (ao ver o source da pgina est l o valor) e claro pesa na pgina Cookies: Todos j ouvimos este termo, so pequenos ficheiros guardados no lado do cliente para poupar viagens desnecessrias ao servidor. Vantagens: Pode ser configurado o tempo de expirao e simples implementao Desvantagens: Pouca capacidade de armazenamento, cliente tem de aceitar cookies, pouco seguro pois o cliente pode alterar as informaes. Do lado do Servidor: Application State: Informao guardada no servidor disponvel em todas as pginas e utilizadores at que o processo da aplicao termine. Vantagens: Variveis globais, fcil implementao. Desvantagens: Ocupa memria no servidor. Session State: Informao guardada no servidor disponvel em todas as pginas enquanto a sesso do utilizador estiver disponvel (mesmo Browser), tem limite de tempo de inactividade. Vantagens: Variveis globais, fcil implementao. Desvantagens: Ocupa memria no servidor. Ferramentas teis para ajudar no desenvolvimento e debug: Firebug: http://getfirebug.com/ Fiddler: http://www.fiddler2.com/fiddler2/ Debugger do Internet Explorer 8

Criar Projecto:

Para comear abrimos o Visual Studio 2008 e fazemos File -> New ->Website e escolhemos ASP.NET WebSite. Escolham a directoria e nome do projecto, depois clicar em OK. Este projecto cria dois ficheiros, um chamado default.aspx (a nossa pgina) outro o Web.config (falaremos deste ficheiro mais tarde). Vemos tambm que a nossa pgina tem agarrado um ficheiro, nesse ficheiro onde vamos escrever toda a lgica de servidor (eventos, mtodos, etc) que iro ocorrer na nossa pgina, chama-se a este ficheiro code-behind. No obrigatrio ter dois ficheiros para pgina e cdigo, pode ficar tudo na pgina como acontece com ASP ou outras linguagens como PHP, mas assim fica muito mais limpo e organizado e evita-se o esparguete.
ASPX:

Esta a extenso das pginas criadas em ASP.NET No topo das pginas temos sempre as directivas que controlam os settings, propriedades da pgina, dll e user controls. Existem 8 tipos de directivas:

@ Page @ Control @ Import @ Implements @ Register @ Assembly @ OutputCache @ Reference

Como podemos ver na imagem logo no inicio da pgina temos a directiva @ Page. Esta directiva tem como finalidade controlar a pgina em tempo de execuo e compilao.

Vamos analisar os atributos que esto na imagem:

Language: Indica a linguagem que vai ser utilizada caso queiramos colocar cdigo directamente na pgina CodeBehind: Indica o nome do ficheiro que servir de cdigo para a pgina, a linguagem deste ficheiro tem de ser igual ao definido no atributo Language. Inherits: De que classe herda esta pgina, por norma a mesma classe do ficheiro codeBehind( geralmente o nome do ficheiro) AutoEventWireup: Indica se os eventos da pgina so automaticamente ligados ou no. Se tivermos o atributo AutoEvenWireup = true o nosso mtodo page_load no code-behind vai funcionar, se estiver a false precisamos de criar um handler para esse evento algo como this.Load += new System.EventHandler(this.Page_Load);

Depois temos umas tags que servem para a nossa pgina cumprir os standards de XHTML. Logo depois comea a nossa pgina propriamente dita. Dentro da tag head onde podemos definir o titulo da nossa pgina(aparece na barra do browser) podemos definir metatags e importar CSS, SCRIPTS e definir os prprios scripts na pgina. Temos o body que como o nome indica o corpo do site e depois vem o principal que a form, dentro da form onde vamos colocar todo o nosso site. A form tem de ter o atributo runat=server, este atributo pode ser usado em qualquer controlo e indica que pode ser visto e utilizado do lado do servidor tornando-o assim um server control.
Eventos:

Para comear a interagir com a nossa pgina vamos adicionar um boto.

Como se pode ver o boto tem um ID que tem de ser nico, o atributo runat=server e o Text. O que vamos fazer agora adicionar o evento onclick, podemos faz-lo de duas maneiras, mudando para o Design e carregar duas vezes no boto ou ento manualmente escrevendo onclick=nome funo(no esquecer que a assinatura do mtodo tem de corresponder a de um evento, ou seja, tem de ter sender e eventargs). A funo do lado do servidor (code-behind) ter este aspecto:
protected void Button1_Click(object sender, EventArgs e)
Request/Response

Agora que temos o nosso evento podemos testar um assunto que falamos no tutorial anterior, Request/Response. Para simplificar Request quem faz o pedido (Browser para Web Server) e response quem recebe o pedido (Web Server para Browser). Vamos ento fazer um pequeno cdigo para saber algumas informaes de quem fez o pedido e escrever esses dados no browser.

Request:

Request.UserHostAddress: Endereo do browser que fez o pedido ao servidor. Request.Browser.Browser: Nome do Browser que efectuou o pedido.
Response:

Response.Write: Escreve no browser , pode ser texto simples, HTML, scripts e at ficheiros para depois fazermos download. Response.End: Termina a execuo da pgina
Execuo:

Para correrem o site podem faz-lo de vrias formas: No Visual Studio: Podemos carregar na tecla F5 ou em cima da pgina default.aspx com o boto direito do rato e escolher View in Browser. No IIS: Se no quisermos utilizar o Visual Studio podemos copiar a pasta do projecto para: C:\Inetpub\wwwroot\Nome da Pasta, este mtodo far com que seja possvel correr o site pelo IIS bastando apenas colocar no browser o endereo http://127.0.0.1/Nome da Pasta.

Web.Config:

Este o ficheiro mais importante de uma aplicao ASP.NET. Tem o formato XML para fcil entendimento, e serve para guardar todas as configuraes da nossa aplicao e variveis que sejam comuns a toda a aplicao, tais como a cultura, strings de conexo, controlo de acessos, etc. S pode existir um Web.Config por aplicao. Utilizao: Para utilizar o Web.Config temos de adicionar Keys e o respectivo valor:

Como podem ver adicionei uma Key e um Value e temos criada uma varivel que persiste por toda a nossa aplicao. A tag connectionStrings indicada para guardar as strings de conexo porque podemos codificar os valores e oferece mais funes que o appsettings. Para utilizar estes campos no cdigo:

Utilizando a classe System.Configuration.ConfigurationManager podemos aceder aos valores do Web.Config e depois utiliza-los no nosso cdigo em todas as pginas do nosso projecto.
Global Application Class (.asax):

um ficheiro opcional, apenas podendo existir um, mas de muita importncia. Permite declarar objectos que persistem pela aplicao e por todos os utilizadores e apanhar eventos a nvel da sesso e aplicao. Os mtodos mais utilizados so:

Application_Start: Acontece quando a aplicao inicia. Session_Start: Acontece quando a sesso do utilizador inicia. Application_BeginRequest: Acontece cada vez que feito um request Session_End: Acontece quando a sesso termina ou faz time out Application_End: Acontece quando a aplicao termina ou faz time out

Utilizao:

Como podem ver declaramos objectos do tipo Application e atribumos-lhe um valor. Neste exemplo criei um contador para mostrar quantos utilizadores esto online na aplicao. Cada vez que entra um novo utilizador incrementado o valor da varivel. Estou a contabilizar tambm o nmero de requests. Utilizao no cdigo:

Tal como referi o objecto Application encontra-se por toda a aplicao, assim basta utilizar Application[nome da Key] para aceder aos valores.
Generic Handler (.ashx)

um Handler HTTP genrico que funciona como uma pgina ASPX normal mas sem a sequncia de eventos to ampla que so necessrios para o render de uma pgina, ou seja, como trabalhar em baixo nvel. Testes comprovam tambm que tm uma performance melhor que as pginas normais. Os valores tm de ser passados por QueryString. Uma boa utilizao para este objecto a apresentao de imagens. Utilizao:

Depois de adicionar o objecto ao nosso projecto vemos que ele implemeta o interface IHttpHandler . Adicionamos cdigo ao mtodo ProcessRequest que nos ir devolver a soma de dois valores passados por QueryString. Utilizao no cdigo:

Para j ignorem a funo createXMLHttpRequest, falaremos dela depois. O que interessa ver a forma como chamamos o nosso handler.
var campo1 = document.getElementById("campo1").value; var campo2 = document.getElementById("campo2").value;

Estas duas linhas de cdigo servem para podermos aceder aos valores das caixas de texto do lado do cliente, passando esse valor para variveis. xmlHttpReq.open(GET, Handler1.ashx?campo1= + campo1 +&campo2= + campo2, false); Depois passamos essas duas varivies por QueryString para o nosso Handler. O Handler vai devolver a soma e escreve-la na nossa pgina. document.getElementById(Resultado).innerHTML += + xmlHttpReq.responseText; Depois deste cdigo todo o resultado da aplicao:

Como podem ver tenho duas janelas abertas e a aplicao mostra que realmente esto 2 utilizadores. As somas funcionam na perfeio. E tudo isto feito sem refrescar a pgina.

Esse ser um dos meus principais objectivos destes tutoriais usar e abusar de AJAX e CALLBACKS.

Ajax? O Ajax permite que a comunicao entre o cliente e o servidor seja feita sem interrupes no browser e sem o total PostBack da pgina ao servidor, o que melhora e muito a experiencia de utilizao do nosso site.

A primeira aplicao no mundo a utilizar Ajax foi o Exchange Webmail da Microsoft, para tornar a aplicao Web o mais semelhante possvel aplicao Windows. Depois veio a era Google e de todas as suas aplicaes totalmente criadas com recurso ao Ajax, Gmail, Google Docs e at a simples sugesto na caixa de pesquisa da Google. Neste momento podemos afirmar que a ideia de aplicaes Web totalmente dependentes do servidor so coisa de 1995, neste momento est a ser cada vez mais usado o Ajax. Quem ganha com isso a Web, aplicaes mais interactivas e dando a sensao de ser uma aplicao Desktop. Ajax ou AJAX? Ao lerem livros ou pesquisas na Net vo encontrar muito estas duas nomenclaturas, porqu? O nome original e globalmente utilizado desta tecnologia Ajax. A verso AJAX pertence Microsoft, porque os rapazes de Redmond para ajudar os programadores de .NET criaram APIS para ser mais fcil utilizar Ajax em aplicaes ASP.NET. AJAX tem duas vertentes, servidor e cliente:

A vertente servidor para ser o mais simples possvel de implementar utilizando controlos criados pela Microsoft (AJAX Control Toolkit) que permitem criar um site com suporte Ajax em poucos minutos.

Os principais controlos so o ScriptManager e o UpdatePanel que permite fazer partial postbacks do contedo que envolve.

A vertente cliente a que permite mais controlo e que mais se assemelha ao Ajax. (O futuro)

Comunicao cliente servidor (vice-versa) Para comunicar do cliente para o servidor existem duas maneiras: Sem Ajax: Qualquer controlo que faa PostBack para o servidor comunica do cliente para o servidor. O ponto negativo que a pgina tem de ir para o servidor e ser novamente renderizada, tudo isto causa impactos na performance, trfego de rede e claro uma m experiencia para o utilizador pois o browser faz refresh e fica todo branco. Com Ajax: Com Ajax o caso muda de figura, s enviamos para o servidor o que realmente precisa de ir e de forma assncrona actualizamos o nosso browser sem que o cliente veja pginas a piscar. Os mtodos mais comuns:

XMLHttpRequest: um objecto da DOM que invocado por Javascript ou outra linguagem de cliente (Jquery) e que envia um http request para o servidor e carrega a resposta directamente para a linguagem cliente. Como a resposta enviada e recebida pelo cliente tudo isto feito para que o cliente no faa nenhum PostBack. Essa resposta pode vir em texto ou XML. Foi graas a esta implementao que temos hoje o Ajax. PageMethods: Utilizados em conjunto com o ScriptManager, so uma maneira simples de implementar uma chamada ao Servidor de forma assncrona criada pela Microsoft. Tem o mesmo funcionamento de um WebService. UpdatePanel: um objecto criado pela Microsoft que permite simular chamadas assncronas ao Servidor. um PostBack camuflado, se forem programadores experientes aconselho a no o utilizarem. WebServices: Com as novas ferramentas (AJAX, Jquery) muito simples chamar WebServices do lado do cliente.

ClientScript e ScriptManager:

Estes dois objectos disponibilizados pela Framework AJAX permitem chamar cdigo de cliente do lado do Servidor, por exemplo: ClientScript.RegisterClientScriptBlock(this.GetType(), teste, alert(Estou no servidor);, true); Esta linha iria mostrar uma mensagem no nosso browser. O ScriptManager tem as mesmas funes que o ClientScript mas utilizado se o nosso controlo estiver dentro de um UpdatePanel. Utilizao Vamos ento fazer uns exemplos das tecnologias acima mencionadas ( excepo de Jquery, vamos ter um tutorial s sobre isso) - XMLHttpRequest:

Adicionamos um boto <input id=Button2 type=button value=Teste XMLHttpRequest onclick=TesteXmlHttpRequest(); /> Este boto vai chamar uma funo JavaScript TesteXmlHttpRequest(); Esta funo faz um pedido XMLHttpRequest a um Handler http que vai ao servidor e retorna uma mensagem com o numero de cliques que foram passados como querystring. - PageMethods:

Adicionamos novamente um boto <input id=Button3 type=button value=Teste PageMethods onclick=TestePageMethods(); /> Este boto chama uma funo JavaScript TestePageMethods(); Esta funo chama um mtodo PageMethods.RetornaPageMethod. Este mtodo est definido no cdigo c# (Code Behind) Como vem este mtodo tem o atributo [WebMethod], o que lhe permite ser chamado atravs de cdigo cliente (Javascript), quem faz com que tudo isto acontea o objecto ScriptManager no qual indicamos EnablePageMethods=true. O mtodo simples PageMethods.RetornaPageMethod(cliquesPM, oncompletePM); Recebe um inteiro que so os cliques e como assincrono tem de ter uma funo de retorno que se chama oncompletePM. - UpdatePanel:

Este o caso mais simples de todos, a Microsoft realmente fez um excelente trabalho neste objecto, mas, se forem experientes aconselho no o utilizarem. O que fazemos adicionar um UpdatePanel e dentro dele abrir uma tag ContentTemplate onde vamos colocar o nosso boto e uma TextBox. Ao clicar no boto vamos ao servidor e actualizamos a TextBox com a hora do servidor, tudo isto sem fazer refresh pgina. - WebServices:

Criamos um WebService (.asmx) por defeito vm com o mtodo HelloWorld, o qual vamos aproveitar. Uma nota importante para o WebService funcionar tem de ter o atributo [System.Web.Script.Services.ScriptService] Na nossa pgina temos de adicionar ao ScriptManager a tag Services e ServiceReference dando ao valor do Path o local do nosso WebService. Adicionamos um boto, que ir chamar a funo esteWebService();. Para chamar o WebService temo de faz-lo desta maneira Namespace.Nome Webservice.Mtodo fica assim: WebApplication1.WebService1.HelloWorld(cliquesWS,completoWebservice); Novamente passamos a varivel de cliques e a funo de retorno. O resultado final da nossa aplicao

O que ?

jQuery uma biblioteca Open Source de javascript muito leve, rpida, intuitiva e que rapidamente (nasceu em 2006) se tornou numa das mais populares bibliotecas para programar na WEB. Com esta biblioteca melhoramos e simplificamos de forma significativa a interaco entre Javascript e HTML. Outra das suas grandes vantagens ser compatvel com todos os Browsers existentes. Em muito menos linhas de cdigo conseguimos obter resultados que em Javascript dariam para preencher vrias folhas A4. Uma das principais caractersticas o facto de podermos encadear comandos. O slogan Write less, do more.
Selectors?

Como o nome indica servem para seleccionar um elemento da DOM para assim poder ser manipulado. Existem vrias formas de chegar a um elemento: 1. $(document); Procura um objecto DOM (neste caso o document) 2. $(#mydiv) Procura um div que tenha o id mydiv 3. $(p.first) Procura todas as tags < p > com a classe first.
jQuery e ASP.NET?

Em 2008 e pela primeira vez a Microsoft adoptou e distribuiu na sua Framework uma biblioteca Open Source. Esta unio trouxe grandes benefcios aos developers ASP.NET que assim passam a ter intellisense de jQUERY no Visual Studio e as novas verses do ASP.NET AJAX vo passar a utilizar jQUERY.
Utilizao?

Para utilizar a biblioteca basta fazer o download da ultima verso de jQUERY e adicionar o script no header da nossa pgina: A sintaxe comea sempre com o smbolo $ (dlar) que uma funo para o objecto jQUERY.
$(document).ready(function() { alert('Hello World'); });

$(document).ready() Esta a funo que chamada quando o documento foi carregado. Tem como

argumento uma funo annima (muito utilizado em jQUERY) que chamada depois de carregar o documento $(div).css(border,9px solid red); Nesta funo procuramos todos os div aplicamos um estilo em que a border ficar com a cor vermelha. $(#myDiv).css(border,3px solid red); Nesta funo procuramos um div com o id myDiv e aplicamos um estilo em que a border ficar com a cor vermelha. PageMethods por jQUERY: Code-Behind:
public partial class _Default : Page { [WebMethod] public static string GetDate() { return DateTime.Now.ToString(); } }

jQUERY:
$.ajax({ type: "POST", url: "Default.aspx/GetDate", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { alert(msg.d); } });

WebServices por jQUERY:


$.ajax({ type: "POST", url: "NomeWebService.asmx/mtodo", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { alert(msg.d); } });

O funcionamento igual a um PageMethod a nica diferena no url, em que colocamos o nome do webservice e o mtodo ao invs do nome da pgina e o mtodo.
Concluso:

Depois de muitos anos no esquecimento o cdigo do lado do cliente voltou em grande fora, sendo um dos grandes impulsionadores o Ajax. Desde o seu regresso muitos criaram formas de melhorar a escrita de cdigo em Javascript mas o jQUERY de longe a melhor biblioteca para desenvolver, fcil, intuitiva, prtica e muito poderosa esta biblioteca vai ajudar-nos a criar sites muito dinmicos. A incluso na Framework .NET vem a facilitar ainda mais a sua utilizao. Por hoje tudo, para a semana iremos comear a desenvolver o nosso site para um clube de vdeo.

Para comear abram o Visual Studio: Cliquem em File->New->Project e escolham um projecto ASP.NET Web Application. Nesta altura definimos a localizao do nosso projecto.

Depois de criado projecto a primeira coisa a fazer apagar a pgina default.aspx, porqu?

Porque vamos usar uma Master Page que ser a me de todas as nossas pginas.

Adicionar uma Master Page: Em cima do projecto, boto direito do rato, add->new-item e escolhemos uma Master Page o nome ser Site.master

Agora vamos comear a definir o nosso layout: Primeiro arrastamos uma tabela HtML (est na toolbox) para a Master Page

Como devem ter reparado esta Master Page tem um controlo chamado ContentPlaceHolder1, este controlo serve para definir a rea onde as pginas derivadas da Master Pager iro aparecer (um gnero de iframe). Vamos colocar o ContentPlaceHolder1 no centro da tabela HTML e colocar o alinhamento vertical dessa clula ao topo. Inserimos uma nova linha no topo da tabela. Vamos tambm fazer o merge da 2 linha da coluna da direita com a 3 linha e o mesmo com a coluna da esquerda.

Agora vamos s pastas: Para adicionar uma nova pasta, boto direito do rato em cima do projecto add->New Folder

Vamos adicionar para j 4 pastas, Img,Scripts,Admin,User .


A pasta img vai conter as imagens do projecto. A pasta Scripts vai conter os ficheiros javascript. As pastas Admin e User vo ser para criar regras de acesso no site.

Adicionar imagem: Para adicionar imagens ao projecto, clicamos com o boto direito do rato em cima da pasta img e add->Existing Item. Procuramos a imagem no disco e adicionamos.

Agora arrastamos a imagem importada para o canto superior esquerdo do nosso layout ou seja a primeira clula da tabela. Adicionamos um texto com o nome do nosso site no topo centro e um rodap.
O que fizemos at agora.

Depois do Layout vamos tratar do nosso Login. Para isso vamos nossa toolbox e adicionamos um controlo LoginView na linha em baixo imagem, este controlo permite definir o que vemos quando o utilizador est autenticado ou annimo.

Existem dois templates neste controlo Anonymous eLoggedIn. Adicionamos ao template Anonymous um controlo Login e ao LoggedIn adicionamos o texto Bemvindo: e frente adicionamos um controlo LoginName (Mostra o nome do utilizador) e tambm um controlo LoginStatus (permite fazer Logout).

Vamos colocar o controlo Login mais bonito, clicamos em cima dele e na seta que aparece e escolhemos Auto Format , depois escolhemos o tema Profissional.

Podemos tambm ir s propriedades do controlo e alterar todas as labels para Portugus, deixo isso para vocs explorarem.

Agora vem a parte complicada (ou no), os acessos! A Microsoft fez um grande trabalho e o Membership Provider uma das prolas do ASP.NET, to simples de configurar que at chateia. Para comear basta ir ao menu Project->ASP.NET Configuration

Ir aparecer-vos a pgina de administrao onde podemos configurar utilizadores, acessos, grupos, etc.

Clicamos no link Security e vamos para a pgina de configurao, onde temos de primeiro fazer a alterao do tipo de atutenticao de Windows para Forms. Clicamos no link Select Authentication Type e escolhemos a opo From the internet e clicamos Done. Est feito Dificil hein?! Neste momento temos disponvel esta ferramenta para criar utilizadores, acessos, profiles, etc. Nota: Esta ferramenta vem configurada com os padres de segurana, uma das coisas que mudo sempre a password strength, no gosto de passwords muito complexas com letras e no alfanumricos. Para resolver isto basta colocar um pedao de cdigo no Web.config onde podemos fazer o override dos defaults. Podem ver como neste blog. Continuando na ferramenta e depois destas alteraes no Web.Config vamos adicionar um utilizador.

Agora vamos activar os roles e adicionar um novo role com o nome Admin. E associamos o nosso utilizador a esse role.

Agora vamos s Access rules e criamos uma nova Access rule. aqui que entram as pastas Admin e User que criamos. Vamos colocar o role Admin com acesso pasta Admin e negar aos anonymous users acesso a esta pasta.

Este o resultado:

Para j ficamos por aqui na ferramenta de administrao, mas ainda c voltamos. Depois destas alteraes o que que aconteceu? Onde esto guardados estes dados? Esta ferramenta cria uma base de dados local (ASPNETDB.MDF) com todos estes dados, podem ver esta base de dados na pasta App_Data. Podemos tambm guardar os dados numa BD SQlServer. Agora para verificarmos que funciona temos de criar uma pgina derivada da nossa Master Page. Para isso, boto direito em cima do projecto Add->New Item e escolhemos uma WebForm, dependendo da vossa verso do Visual Studio, esta pode ser uma pgina normal onde escolhemos uma checkbox a dizer que tem Master Page ou ento adicionamos uma Web Content Form que automaticamente deriva de uma Master Page. O nome desta pgina TEM de ser default.aspx (poupa trabalho).

O resultado desta pgina ser o layout da Master Page, com um sitio para colocar o contedo da pgina o ContentPlaceHolder. Depois iremos tratar desta pgina, para j e para finalizar vamos experimentar o nosso Login.

Correu tudo bem? ptimo, neste momento j tm um site com controlo de acessos e foi to simples.

1. O que ASP.NET? ASP.NET uma tecnologia de scripting do lado do servidor, esta tecnologia permite colocar numa pgina web, scripts que iro ser executados por um servidor.

ASP.NET uma tecnologia de scripting do lado do servidor, esta tecnologia permite colocar numa pgina web, scripts que iro ser executados por um servidor.

ASP, significa Active Server Pages ASP.NET, corre no servidor de IIS IIS (Internet Information Services), um servidor de internet da Microsoft IIS vem instalado e gratuito nos servidores Windows ( inclui Windows 2000 e Windows XP Professional)

ASP.NET compilado no interpretado: ASP.NET bem como todas as aplicaes .NET, so compiladas. impossivel correr cdigo C# ou VB sem que esteja compilado. Felizmente as aplicaes ASP.NET no precisam de ser compiladas todas as vezes que so executadas, em vez disso o cdigo IL criado uma vez e actualizado apenas quando o source code alterado. Os ficheiros ficam em cache no servidor na directoria c:\windows\microsoft.net\framework\[verso]\temporary asp.net files. Esta afirmao depende do tipo de projecto que escolhemos. Se optarmos por um Web Project o cdigo todo compilado quando compilamos o projecto. Caso a opo seja um simples Web Site, cada pgina compilada assim que for feito o Request.
2. Web Forms

As pginas ASP.NET ( conhecidas como Web Forms) so uma parte vital de uma aplicao ASP.NET, pois providenciam o output para o browser depois de o cliente ter feito o Request. Este conceito foi criado para facilitar a migrao de programadores das tecnologias de cliente (Windows Forms) para a Web, usando as mesmas facilidades do interface windows, como arrastar botes. Uma pgina ASP.NET :

gual a uma pgina HTML Pode conter HTML, XML e scripts Os scripts so executados no Servidor Tem a extenso aspx Todos os controlos tm de estar contidos dentro de um <form> A <form> tem de conter uma tag runat=server

O atributo runat=server, este atributo significa que a form deve ser processada no lado do servidor. Tambm indica que os controlos incluidos nesta form esto assecveis do lado do script.

3. Como funciona?

Recordar que:

As aplicaes so executadas no servidor: Imagine que tem uma pgina em que possibilita que os clientes gravem comentrios. O utilizador faz estas operaes no browser, mas para gravar o comentrio precisamos de fazer um update na base de dados, para isso o nosso cdigo tem de correr no servidor. O ASP.NET trata destes eventos com uma tcnica chamada PostBack, que envia a pgina (Form) quando certas aces so executadas. Quando o ASP.NET recebe a pgina, pode executar os eventos correspondentes do lado do servidor. As aplicaes Web so stateless (no guardam estado): Por outras palavras, assim que uma pgina renderizada em HTML, os objectos so destruidos e todas as informaes do cliente so descartadas. Este modelo muito bom para aumentar a escalabilidade e o trfego das aplicaes, mas causa alguns problemas para oferecer uma experincia semelhante a uma aplicao Windows. Para colmatar esta lacuna o ASP.NET oferece vrias ferramentas, a mais notvel o mecanismo chamado View State, que automticamente coloca informao na pgina num hidden field, falaremos melhor desta e outras ferramentas.

ASP.NET utiliza um modelo de eventos, neste modelo, adicionamos controlos pgina e escolhemos que eventos queremos responder. Cada event handler um mtodo discreto que mantm o cdigo limpo e arrumado. Como funcionam os eventos?
1. A nossa pgina corre pela primeira vez. ASP.NET cria a pgina e controlos associados, o cdigo de inicializao executado, a pgina renderizada em HTML e retornada para o cliente. Os objectos so tambm libertados da memria do servidor. 2. Numa determinada altura o utilizador executa uma aco que origina um PostBack, como clicar num boto. Toda a informao da pgina enviada para o servidor. 3. O ASP.NET intercepta a pgina e cria de novo os objectos no servidor, colocando-os no estado em que estavam a ultima vez que foram enviados para o cliente. 4. Depois o ASP.NET verifica qual foi o evento causador do PostBack e dispara o evento correspondente. Nesta altura executamos o cdigo associado ao evento e actualizamos a informao referente aos objectos. 5. A pgina modificada renderizada em HTML e devolvida ao cliente com os novos dados. Os objectos so retirados da memria do servidor.

4. Page Lifecycle

Existem dois tipos de eventos que originam um PostBack:


1. Immediate Response Events : Executados sempre que carregamos num boto ou utilizamos a funo Javascript __DoPostBack() 2. Change Events: Sempre que seja alterado o estado de um controlo, como alterar o valor de uma checkbox ou textbox. Se a propriedade AutoPostBack estiver activa o evento executado imediatamente, caso contrrio executado no prximo PostBack da pgina.

Imaginemos que temos um pgina com um boto de submit e uma textbox sem a propriedade AutoPostBack activa. Alteramos o texto e carregamos no boto. O que acontece? O ASP.NET executa estes eventos, por ordem:
1. 2. 3. 4. 5. 6. Page.Init Page.Load TextBox.TexChanged Button.Click Page.PreRender Page.Unload

Existem mais eventos, mas para j apenas precisamos de saber estes. Exercicio: Testar os eventos. Vamos criar um novo projecto, uma aplicao ASP.NET vazia.

Adicionamos uma nova WebForm:

Adicionamos um boto e uma label. A label tem a propriedade EnableViewState = False, para no incrementar o valor sempre que feito um novo PostBack. Por defeito esta propriedade est activa, uma das formas mencionadas para guardar o estado dos controlos entre cada PostBack.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!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></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" EnableViewState="false"></asp:Label> <br /> <asp:Button ID="Button1" runat="server" Text="Executa PostBack"

onclick="Button1_Click" /> </div> </form> </body> </html>

Carregamos na nova pgina com o boto direito do rato e escolhemos View Code

Adicionamos os eventos que queremos tratar. Os eventos da pgina tm o prefixo page, desta forma o ASP.NET sabe que so metodos especificos que tem de executar. Esta associao feita pelo atributo AutoEventWireup=true na pgina. Para adicionar um evento ao boto podemos ir ao design da pgina e clicar duas vezes no boto.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;

namespace WebApplication1 { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Label1.Text += "Evento Page_Load <br/>"; if (Page.IsPostBack) // Metodo utilizado para saber se a primeira vez que a pgina processada { // ou se um PostBack

Label1.Text += "No a primeira vez que executamos a pgina <br/>"; } } protected void Page_Init(object sender, EventArgs e) { Label1.Text += "Evento Page_Init <br/>"; } protected void Page_PreRender(object sender, EventArgs e) { Label1.Text += "Evento Page_PreRender <br/>"; } protected void Page_Unload(object sender, EventArgs e) { //Este texto nunca aparece pois o HTML nesta altura j foi renderizado Label1.Text += "Evento Page_Unload <br/>"; } protected void Button1_Click(object sender, EventArgs e) { Label1.Text += "Evento do boto <br/>"; } }

De seguida executamos o projecto ( F5 ou ctrl + F5). Este ser o resultado. Primeira execuo: Como podemos observar os eventos so executados pela ordem que j referimos.

Segunda execuo: Depois de clicar no boto, executado o PostBack. Como podemos ver a propriedade Page.IsPostBack verdadeira, logo sabemos que no a primeira execuo da pgina. Depois do evento Page_Load so executados os eventos do controlo que originou o PostBack.

Por hoje terminmos. Neste tutorial incidimos sobre alguns dos conceitos de ASP.NET. No prximo tutorial vamos falar sobre os objectos Request, Response e sobre state management (View State, Cookies, Session, Application).

Caso tenham alguma questo, coloquem nos comentrios, terei todo o gosto em responder.

Vous aimerez peut-être aussi