desenvolvimento de software para internet · asp.net e um web user control: ... • como programar...

DESENVOLVIMENTO DE SOFTWARE PARA INTERNET

1

quarta-feira, 17 de outubro de 12

WEB USER CONTROLS

2


WEB USER CONTROLS

3

HTML CONTROLS

HTML SERVER CONTROLS

WEB SERVER CONTROLS

VALIDATION CONTROLS

USER CONTROLS

Tipos de Web Controls:


WEB USER CONTROLS

4

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.


WEB USER CONTROLS

5

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>


WEB USER CONTROLS

6

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>


http://www.w3.org/1999/xhtml


WEB USER CONTROLS

6


<%@ 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>





WEB USER CONTROLS

7


<%@ Control Language="C#" %>

<asp:TextBox id=”txtPrimeiro” runat=”server”></asp:TextBox><asp:Button id=”btnOk” runat=”server” Text=”OK”></asp:Button>


WEB USER CONTROLS

8

A diretiva @Control passa informações para a página que será executada. os principais atributos utilizados pela diretiva @Control são:

Atributo Descrição

ClassName Nome da classe que contém o código que deve ser utilizado pelo user control.

Description Contém a descrição da página.

ClientIDMode Define qual algoritmo será usado para gerar o identificador de controles.

EnableTheming Indica se os temas devem ou não ser usados.

EnableViewState Se for true, mantém-se o estado da página após cada chamada. O valor-padrão é true.

Inherits Define a classe a partir da qual o web user control implementa a herança.

Language A linguagem de programação utilizada.

Src Referência para o arquivo que contém o código do web user control. Utilize o atributo CodeFile.

CodeFile Referência para o arquivo que contém o código do web user control.


WEB USER CONTROLS

9

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 Descrição

TagPrefix O prefixo utilizado para colocar o cotrole dentro do formulário (web form). Similar aos prefixos “asp” utilizados pelos web server controls.

TagName O nome da tag utilizada pelo novo controle (web user control).

Src O caminho absoluto ou relativo em que se encontra o arquivo .ascx.


WEB USER CONTROLS

10

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>


WEB USER CONTROLS

11

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>


WEB USER CONTROLS

12


WEB USER CONTROLS

13

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”/>


WEB USER CONTROLS

14

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” %>


WEB USER CONTROLS

15

Arquivo WebUserControl.ascx.cs:using System;using System.Text;using System.Web.UI.WebControls;

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()); }


http://Web.UI.UserControl

http://Web.UI.UserControl

WEB USER CONTROLS

16

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; } }}


WEB USER CONTROLS

17

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" /> </form> </body></HTML>


WEB USER CONTROLS

18


WEB USER CONTROLS

19

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.


WEB USER CONTROLS

20

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:

Defina os valores das propriedades do user control:

Em seguida, adicione o user control à página ASP.NET:

WebUserControl userCtr = (WebUserControl)LoadControl(“WebUserControl.ascx”);

userCtr.Linha = 7;userCtr.Coluna = 5;

Page.Controls.Add(userCtr);


WEB USER CONTROLS

21

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"> <title>Carregando um web user control dinamicamente</title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body></html>


WEB USER CONTROLS

22

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); }}


http://Web.UI.Page

http://Web.UI.Page

WEB USER CONTROLS

23


COMO CRIAR UM WEB USER CONTROL

24


CRIANDO UM WEB USER CONTROL

25

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.



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


http://msdn.microsoft.com/library






OBRIGADO

57

PROF. EMILIO PARMEGIANI

DOWNLOAD DO MATERIAL


desenvolvimento de software para internet · asp.net e um web user control: ... • como programar...

Documents