DESENVOLVIMENTO DE SOFTWARE PARA INTERNET 1
WEB USER CONTROLS 2
Tipos de Web Controls: WEB USER CONTROLS HTML CONTROLS HTML SERVER CONTROLS WEB SERVER CONTROLS VALIDATION CONTROLS USER CONTROLS 3
Tipos de Web Controls: WEB USER CONTROLS HTML CONTROLS HTML SERVER CONTROLS WEB SERVER CONTROLS VALIDATION CONTROLS USER CONTROLS 3
WEB USER CONTROLS Web user controls são páginas que contêm porções de outras páginas e que podem ser utilizadas em diferentes locais de uma aplicação web. São uma alternativa ao chamados arquivos de inclusão (Server-Side include), os quais apresentam vários problemas quando são utilizados em um projeto complexo, como: Conflito de variáveis Não é possível incluir o mesmo arquivo em diferentes locais da página Não é possível atribuir em tempo de execução valores a métodos e propriedades. 4
WEB USER CONTROLS O processo de criação de um web user control é igual ao usado para criar páginas ASP.NET com web server controls. Veja as diferenças entre uma página ASP.NET e um web user control: Página ASP.NET contém extensão.aspx Web user control utiliza arquivos com extensão.ascx Um web user control não pode conter os elementos <html>, <body>, <form> 5
WEB USER CONTROLS Podemos facilmente transformar qualquer página ASP.NET em um web user control, basta remover os elementos <html>, <body> e <form> e trocar a diretiva @Page por @Control. <%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>exemplo de uma Página com Web Server Control</title> </head> <body> <form id= form1 runat= server > <asp:textbox id= txtprimeiro runat= server ></asp:textbox> <asp:button id= btnok runat= server Text= OK ></asp:button> </form> </body> </html> 6
WEB USER CONTROLS Podemos facilmente transformar qualquer página ASP.NET em um web user control, basta remover os elementos <html>, <body> e <form> e trocar a diretiva @Page por @Control. <%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>exemplo de uma Página com Web Server Control</title> </head> <body> <form id= form1 runat= server > <asp:textbox id= txtprimeiro runat= server ></asp:textbox> <asp:button id= btnok runat= server Text= OK ></asp:button> </form> </body> </html> 6
WEB USER CONTROLS Podemos facilmente transformar qualquer página ASP.NET em um web user control, basta remover os elementos <html>, <body> e <form> e trocar a diretiva @Page por @Control. <%@ Control Language="C#" %> <asp:textbox id= txtprimeiro runat= server ></asp:textbox> <asp:button id= btnok runat= server Text= OK ></asp:button> 7
WEB USER CONTROLS A diretiva @Control passa informações para a página que será executada. os principais atributos utilizados pela diretiva @Control são: Atributo ClassName Description ClientIDMode EnableTheming EnableViewState Inherits Language Src CodeFile Descrição Nome da classe que contém o código que deve ser utilizado pelo user control. Contém a descrição da página. Define qual algoritmo será usado para gerar o identificador de controles. Indica se os temas devem ou não ser usados. Se for true, mantém-se o estado da página após cada chamada. O valorpadrão é true. Define a classe a partir da qual o web user control implementa a herança. A linguagem de programação utilizada. Referência para o arquivo que contém o código do web user control. Utilize o atributo CodeFile. Referência para o arquivo que contém o código do web user control. 8
WEB USER CONTROLS Para utilizar um web user control em uma página ASP.NET, devemos declará-lo no início da página ASP.NET com a diretiva @Register, a qual contém os seguintes atributos: Atributo TagPrefix TagName Src Descrição O prefixo utilizado para colocar o cotrole dentro do formulário (web form). Similar aos prefixos asp utilizados pelos web server controls. O nome da tag utilizada pelo novo controle (web user control). O caminho absoluto ou relativo em que se encontra o arquivo.ascx. 9
WEB USER CONTROLS Vejamos o exemplo da página teste.aspx: <%@ Register TagPrefix= abc TagName= MeuControle Src= primeiro.ascx %> <HTML> <body> <form id= Formulario1 method= post runat= server > <abc:meucontrole id= MeuControle1 runat= server /> </form> </body> </HTML> 10
WEB USER CONTROLS Para usar mais de uma instância de um web user control, basta adicionar várias vezes o mesmo controle na página ASP.NET: <%@ Register TagPrefix= abc TagName= MeuControle Src= primeiro.ascx %> <HTML> <body> <form id= Formulario1 method= post runat= server > <abc:meucontrole id= MeuControle1 runat= server /> <abc:meucontrole id= MeuControle2 runat= server /> <abc:meucontrole id= MeuControle3 runat= server /> </form> </body> </HTML> 11
WEB USER CONTROLS 12
WEB USER CONTROLS Um web user control contém propriedades públicas que podem ser definidas na página ASP.NET em que o controle foi declarado. Um web user control é muito parecido com um web server control tradicional. A seguir, temos o web server control Button: <asp:button ID= Button1 BackColor= blue runat= server Text= Button /> e em seguida, temos um web user control com duas propriedades públicas definidas pelo usuário: Linha e Coluna. <uc1:webusercontrol Linha= 5 Coluna= 4 ID= WebUserControl1 runat= server /> 13
WEB USER CONTROLS O exemplo a seguir desenha uma tabela na tela usando os valores das propriedades Linha e Coluna. Arquivo WebUserControl.ascx: <%@ Control Language= C# AutoEventWireup= true CodeFile= WebUserControl.ascx.cs Inherits= WebUserControl %> 14
Arquivo WebUserControl.ascx.cs: using System; using System.Text; using System.Web.UI.WebControls; WEB USER CONTROLS public partial class WebUserControl : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { StringBuilder sb = new StringBuilder(); sb.append("<table border=1>"); for (int a = 0; a < this.linha; a++) { sb.append("<tr>"); for (int x = 0; x < this.coluna; x++) { sb.append("<td>"); sb.append(a + x); sb.append("</td>"); } sb.append("</tr>"); } sb.append("</table>"); Response.Write(sb.ToString()); } 15
WEB USER CONTROLS Arquivo WebUserControl.ascx.cs (continuação): private int _linha; private int _coluna; public int Linha { get { return _linha; } set { _linha = value; } } } public int Coluna { get { return _coluna; } set { _coluna = value; } } 16
WEB USER CONTROLS No final, incluímos o web user control na página ASP.NET tabela.aspx: <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %> <HTML> <body> <form id="formulario1" method="post" runat="server"> <uc1:webusercontrol Linha="5" Coluna="10" ID="WebUserControl1" runat="server" /> </HTML> </body> </form> 17
WEB USER CONTROLS 18
WEB USER CONTROLS Também é possível carregar de forma dinâmica um web user control, ou seja, podemos usar código C# para carregar um web user control em uma página ASP.NET. O primeiro passo é criar uma referência para o web user control na página ASP.NET. <%@ Reference Control= WebUserControl.ascx" %> ATENÇÃO: Para carregar um web user control de forma programática, utilize a diretiva @Reference. Para carregar um web user control de forma declarativa, utilize a diretiva @Register. 19
WEB USER CONTROLS No método Page_Load da página ASP.NET, crie uma instância do web user control e, em seguida, invoque o método LoadControl: WebUserControl userctr = (WebUserControl)LoadControl( WebUserControl.ascx ); Defina os valores das propriedades do user control: userctr.linha = 7; userctr.coluna = 5; Em seguida, adicione o user control à página ASP.NET: Page.Controls.Add(userCtr); 20
WEB USER CONTROLS A seguir, temos os arquivos contendo os códigos do exemplo. O primeiro arquivo (Dinamica.aspx) contém as declarações e o código HTML: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dinamica.aspx.cs" Inherits="Dinamica" %> <%@ Reference Control="WebUserControl.ascx" %> <html> <head runat="server"> </head> <body> </html> </body> <title>carregando um web user control dinamicamente</title> <form id="form1" runat="server"> <div> </div> </form> 21
WEB USER CONTROLS O segundo arquivo (Dinamica.aspx.cs) contém o código C# da página ASP.NET: using System; using System.Web.UI; public partial class Dinamica : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { WebUserControl userctr = (WebUserControl)LoadControl("WebUserControl.ascx"); } } userctr.linha = 7; userctr.coluna = 5; Page.Controls.Add(userCtr); 22
WEB USER CONTROLS 23
COMO CRIAR UM WEB USER CONTROL 24
Imaginemos um formulário para compra on-line de ingressos para eventos, onde deve ser cadastrado os dados do usuário, a quantidade de ingressos comprados e os dados do cartão de crédito. Para facilitar nosso trabalho, criaremos um Web User Control que funcione como um controle do tipo Spinner, para que não necessitemos digitar todos os valores, mas sim apenas selecioná-los dentro de uma faixa de valores. 25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
BIBLIOGRAFIA Centro para Iniciantes Microsoft: http://msdn.microsoft.com/pt-br/beginner/default.aspx Como Programar com ASP.NET e C# - Alfredo Lotar - novatec Desenvolvendo para Web usando o Visual Studio 2008 - Ramon Durães - novatec 56
OBRIGADO PROF. EMILIO PARMEGIANI DOWNLOAD DO MATERIAL 57