:
Master Page
Deve ficar como mostra a Figura 9.4: capítulo
9
Figura 9.4. Aprofundando no uso do controle UpdatePanel 135
Esse texto serve apenas para colocarmos algum conteúdo na Master Page de forma que durante o exemplo fique claro que algum conteúdo da página está sendo recuperado da página Master Page. É claro que, em suas aplicações, a Master Page terá bem mais conteúdo, como imagens e até mesmo controles de menu etc. 6. Vá para o modo Design na Master Page, o conteúdo das páginas serão executados em lugar do ContentPlaceHolder, como mostra a Figura 9.5:
Figura 9.5.
7. Vamos agora excluir a página Default.aspx porque ela não faz referência à Master Page. Para isto, clique com o botão direito sobre a página Default.aspx na janela Solution Explorer e selecione Delete, como mostra a Figura 9.6 a seguir:
136 Universidade AJAX
Figura 9.6.
Você pode adicionar a referência à página Master Page, no código HTML de uma página ASP.NET sem precisar excluir o arquivo caso seja necessário. Para isto, você deve adicionar o atributo MasterPageFile=”~/MasterPage.master” à diretiva @Page da página em questão e colocar o conteúdo da página dentro da tag Content. Para simplificar, no exemplo apenas excluímos a página. Vamos agora adicionar uma nova com referência à Master Page. 8. Clique com o botão direito sobre o nome do projeto e selecione Add New Item. 9. Em Templates, selecione Web Form. O nome do arquivo deve ser Default.aspx e devem estar marcadas as opções Place code in separate file e Select master page, como mostra a Figura 9.7:
Aprofundando no uso do controle UpdatePanel 137
capítulo
9
Figura 9.7.
A opção Select master page faz com que uma nova caixa de diálogo seja exibida após o clique no botão Add, permitindo a escolha de uma Master Page. 10. Clique em Add. 11. Na janela Select a Master page, selecione MasterPage.master e clique em OK, como mostra a Figura 9.8:
Figura 9.8.
Você pode ter mais do que uma Master Page em sua aplicação. A janela Select a Master Page permite que você escolha qual Master Page será associada à página 138 Universidade AJAX
que você está criando. Como no nosso exemplo o objetivo é mostrar como utilizar o UpdatePanel em aplicações com Master Page, apenas a criação de uma será o suficiente. A página Default.aspx deve estar semelhante à Figura 9.9 a seguir:
Figura 9.9.
O conteúdo acinzentado deixa claro que o mesmo é proveniente da Master Page. O conteúdo desta página deve ser adicionado dentro do Content que em tempo de execução substitui o ContentPlaceHolder da Master Page. 12. Volte para a Master Page e arraste um controle ScriptManager na página utilizando a guia AJAX Extensions na Toolbox, como mostra a Figura 9.10:
capítulo
9
Figura 9.10. Aprofundando no uso do controle UpdatePanel 139
Você pode adicionar o controle ScriptManager diretamente na Master Page ou dentro do Content apenas na página que for utilizar AJAX. Durante o exemplo, vamos trabalhar das duas formas. Quando você adiciona o ScriptManager na Master Page, todas as páginas que o tiverem referenciado poderão utilizar o AJAX ASP.NET sem que você precise arrastar o controle novamente dentro delas. Ou seja, o controle estará disponível em todas as páginas referenciadas. Neste caso, se você desejar que alguma das páginas “filhas” não possa usar, o controle precisará fazer isso programaticamente. Caso você adicione o controle ScriptManager apenas na página, dentro do Content, nenhuma outra página poderá utilizar o AJAX ASP.NET; a menos, é claro, que você também adicione um controle ScriptManager dentro da página em questão. 13. Na página Default.aspx, adicione um UpdatePanel e dentro dele adicione os seguintes controles: 2 TextBox; 1 Label; 1 Button. 14. Altere a propriedade Text do Button1 para Resultado. 15. Organize os controles, como mostra a Figura 9.11 a seguir:
Figura 9.11. 140 Universidade AJAX
16. Dê um clique duplo sobre o Button1 e digite o seguinte código dentro do seu procedimento de evento: int a = Int32.Parse(TextBox1.Text); int b = Int32.Parse(TextBox2.Text); int res = a / b; Label1.Text = res.ToString();
Em VB.NET: Dim a As Integer = TextBox1.Text Dim b As Integer = TextBox2.Text Dim res As Integer = a / b Label1.Text = res.ToString()
Seu painel de código deve estar assim:
capítulo
9
Figura 9.12.
17. Execute sua aplicação e teste. O resultado deve ser obtido de maneira assíncrona, como se o controle ScriptManager estivesse diretamente na página Default. aspx. Aprofundando no uso do controle UpdatePanel 141
Veja na Figura 9.13 o resultado da aplicação:
Figura 9.13.
Se você desejar desabilitar a atualização assíncrona apenas em uma página, será necessário usar o evento Page_Init da página em questão para iniciar uma instância do ScriptManager e mudar sua propriedade EnablePartialRendering para false. Para isso: 18. Adicione o seguinte código dentro da classe da página Default.aspx: protected void Page _ Init(object sender, EventArgs e) { ScriptManager sm = ScriptManager.GetCurrent(Page); sm.EnablePartialRendering = false; }
Em VB.NET: Protected Sub Page _ Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init Dim sm As ScriptManager = ScriptManager.GetCurrent(Page) sm.EnablePartialRendering = False End Sub
Seu painel de código deve estar como na Figura 9.14:
142 Universidade AJAX
Figura 9.14.
19. Execute e teste sua aplicação. Agora a atualização não deve ser assíncrona e a página deve ser atualizada completamente a cada clique no botão. 20. Remova o procedimento Page_Init ou comente o mesmo para que possamos utilizar a atualização assíncrona novamente na página Default.aspx. 21. Remova o controle ScriptManager da Master Page e adicione o mesmo na página Default.aspx, como mostra a Figura 9.15 a seguir: capítulo
9
Figura 9.15. Aprofundando no uso do controle UpdatePanel 143
22. Execute e teste sua aplicação. Ela deve funcionar normalmente.
Figura 9.16.
Vamos agora compreender um pouco melhor como customizar erros em nossas aplicações AJAX ASP.NET. 23. Para gerar erro em nossa aplicação, basta solicitar uma divisão por zero, como mostra a Figura 9.17:
Figura 9.17.
Uma exceção (erro) é gerada, como mostra a seguinte mensagem (Figura 9.18):
144 Universidade AJAX
Figura 9.18.
24. Agora, execute a aplicação sem o Debug para que o mesmo não intercepte e faça a manipulação do erro. Para isto, você pode clicar em Ctrl + F5 ou, no menu Debug, selecionar Start Without Debugging. 25. Faça novamente uma divisão por zero. O AJAX ASP.NET intercepta e trata o erro, mas a mensagem (Figura 9.19) é genérica e pode não ser agradável ao usuário final do seu projeto.
Figura 9.19.
Vamos agora personalizar essa mensagem. capítulo
26. Altere o código do procedimento de evento Button1_Click para o seguinte: try {
int a = Int32.Parse(TextBox1.Text); int b = Int32.Parse(TextBox2.Text); int res = a / b; Label1.Text = res.ToString();
} catch (DivideByZeroException) { throw new Exception(“Você não pode efetuar uma divisão de “ + TextBox1.Text + “ por “ + TextBox2.Text); }
Aprofundando no uso do controle UpdatePanel 145
9
Em VB.NET: Try Dim a As Integer = TextBox1.Text Dim b As Integer = TextBox2.Text Dim res As Integer = a / b Label1.Text = res.ToString() Catch ex As Exception Throw New Exception(“Você não pode efetuar uma divisão de “ & TextBox1.Text & “ por “ & TextBox2.Text) End Try
Seu painel de código deve estar como na Figura 9.20:
Figura 9.20.
Apenas adicionamos o bloco de tratamento de erros Try...Catch...Finally com o objetivo de verificar qual erro está ocorrendo e emitir assim, a mensagem de erro adequada. Você pode ter vários catch (como você já deve fazer em suas aplicações ASP.NET) em seus blocos de tratamento de erros verificando as possibilidades de erros e tratando-os de forma adequada. 27. Agora, novamente execute a aplicação sem o Debug para que o mesmo não intercepte e faça a manipulação do erro. Para isto, você pode teclar Ctrl + F5 ou no menu Debug selecionar Start Without Debugging.
146 Universidade AJAX
28. Tente novamente fazer uma divisão por zero. A seguinte mensagem personalizada deve ser exibida:
Figura 9.21.
29. Clique em OK e pare a execução do projeto. Agora você já sabe como criar mensagens de erros personalizadas para suas aplicações. Você pode usar todo o poder do bloco de tratamento de erros Try...Cath... Finally como usa atualmente em suas aplicações ASP.NET. Para finalizar, neste Capítulo vamos estudar o uso de Web User Controls em nossas aplicações AJAX ASP.NET. 30. Clique com o botão direito sobre o nome do projeto e selecione Add New Item. 31. Agora, em Templates, selecione Web User Control. Mude o nome do controle para calendario.ascx. Certifique-se que esteja marcada a opção Place code in separate file e clique em Add. capítulo
9
Figura 9.22. Aprofundando no uso do controle UpdatePanel 147
32. Na Toolbox, localize o controle calendar e adicione o mesmo dentro do Web User Control calendario.aspx, como mostra a Figura 9.23:
Figura 9.23.
33. Adicione um UpdatePanel na página Default.aspx e arraste o Web User Control calendario.aspx para dentro dele, como mostra a Figura 9.24:
Figura 9.24.
148 Universidade AJAX
34. Execute sua aplicação.
Figura 9.25.
Ao clicar no calendário, os dias são alterados assincronamente sem que a página seja completamente atualizada. Para utilizar um Web User Control com o AJAX ASP.NET em sua aplicação, você pode adicionar o mesmo dentro de um UpdatePanel, como acabamos de fazer, ou já adicionar o UpdatePanel dentro do controle. Vamos criar um novo Web User Control para mostrarmos como funciona a segunda opção. 35. Adicione um segundo Web User Control ao projeto chamado ExibirData.ascx, como mostra a Figura 9.26:
Figura 9.26. Aprofundando no uso do controle UpdatePanel 149
capítulo
9
36. Dentro deste Web User Control, adicione um UpdatePanel com um Label dentro do mesmo, como mostra a Figura 9.27:
Figura 9.27.
37. No procedimento de evento Page_Load do Web User Control ExibirData. ascx adicione o seguinte código: Label1.Text = DateTime.Now.ToLongTimeString();
Em VB.NET: Label1.Text = DateTime.Now.ToLongTimeString()
Veja na Figura 9.28 como deve ficar o código:
150 Universidade AJAX
Figura 9.28.
38. Adicione o Web User Control que acabamos de criar à página Default.aspx, como mostra a Figura 9.29:
capítulo
9
Figura 9.29.
Aprofundando no uso do controle UpdatePanel 151
39. Execute e teste a aplicação.
Figura 9.30.
A hora é exibida no Label como especificamos no controle. Vamos agora colocar um botão na página Default.aspx que, ao ser clicado, atualiza assincronamente a hora do controle ExibirData.ascx. 39. Adicione um Button na página Default.aspx, como mostra a Figura 9.31:
Figura 9.31.
40. Volte para o Web User Control ExibirData.ascx e adicione o seguinte código dentro da classe: 152 Universidade AJAX
public UpdatePanelUpdateMode UpdateMode { get { return this.UpdatePanel1.UpdateMode; } set { this.UpdatePanel1.UpdateMode = value; } } public void Update() { this.UpdatePanel1.Update(); }
Em VB.NET: Public Property UpdateMode() As UpdatePanelUpdateMode Get Return Me.UpdatePanel1.UpdateMode End Get Set(ByVal value As UpdatePanelUpdateMode) Me.UpdatePanel1.UpdateMode = value End Set End Property Public Sub Update() Me.UpdatePanel1.Update() End Sub
O painel de código do Web User Control deve ficar assim (Figura 9.32):
capítulo
9
Figura 9.32.
Aprofundando no uso do controle UpdatePanel 153
O código anterior torna acessível publicamente por meio do modificador public a propriedade UpdateMode do controle UpdatePanel1 que está no Web User Control e o método Update do mesmo controle. 41. Novamente na página default.aspx, selecione o Web User Control ExibirData. ascx e, na janela Properties, localize a propriedade UpdateMode. 42. Mude a propriedade UpdateMode para Conditional, como mostra a Figura 9.33:
Figura 9.33.
Esta propriedade só está disponível aqui porque deixamo-la pública no Web User Control. 43. Dê um clique duplo sobre o Button2 e adicione o seguinte código no procedimento de evento Button2_click: this.ExibirData1.Update();
Em VB.NET: me.ExibirData1.Update()
Veja na Figura 9.34 como deve ficar o código:
154 Universidade AJAX
Figura 9.34.
Este método também só está disponível porque o tornamos público no Web User Control. 44. Execute e teste sua aplicação. A cada clique no botão, o controle ExibirData. ascx é atualizado, mas a página é completamente atualizada. Isso acontece porque o controle Button2 é um Server Control e força uma atualização síncrona através de Post. Para resolver isto, basta adicionar este Button dentro de um UpdatePanel que esteja na página ou arrastar mais um UpdatePanel para a mesma e o colocar dentro dela. 45. Adicione um UpdatePanel dentro da página Default.aspx e arraste o Button2 para dentro do mesmo, como mostra a Figura 9.35:
Aprofundando no uso do controle UpdatePanel 155
capítulo
9
Figura 9.35.
46. Execute e teste sua aplicação. Agora, temos uma atualização AJAX, ou seja, assíncrona sempre que o button2 é clicado, fazendo uma atualização em um Web User Control.
156 Universidade AJAX
Capítulo 10 Aprofundando no uso de Web Services e no desenvolvimento voltado para o navegador (Cliente-Centric)
Este capítulo é muito importante para quem deseja criar uma aplicação voltada para o navegador (Client-Centric). Nele, você aprenderá: • recuperar e enviar dados em forma de tipos complexos, como objetos, por exemplo, através de Web Services; • usar um arquivo separado de código Javascript, centralizando o código no mesmo, melhorando assim a clareza e facilitando a manutenção; • conhecer e usar o controle ScriptManagerProxy; • usar métodos da classe da própria página para comunicação em XML como em um Web Service; • conhecer ainda mais profundamente sobre a manipulação de erros em chamadas a Web Services. Vamos compreender os conceitos propostos na prática como de costume. Para isso: 1. Crie uma nova aplicação usando o Template ASP.NET AJAX - Enabled Web Site chamada WebServiceAvancado, como mostra a Figura 10.1 a seguir. Neste exemplo, usarei a linguagem C#.
Figura 10.1.
Primeiramente, vamos criar uma Master Page visando futuramente apresentar o controle ScriptManagerProxy.
158 Universidade AJAX
2. Na janela Solution Explorer, clique com o botão direito sobre o nome do projeto e selecione Add New Item. 3. Em Templates, selecione Master Page, certifique-se que a opção Place code in separate file, na parte inferior esteja selecionada, como mostra a Figura 10.2:
Figura 10.2.
4. Clique em Add. 5. Arraste um controle ScriptManager na página Master Page utilizando a guia AJAX Extensions na Toolbox. OBSERVAÇÃO
capítulo
Quando você adiciona o ScriptManager na Master Page, todas as páginas que a tiverem referenciado poderão utilizar o AJAX ASP.NET sem que você precise arrastar o controle novamente dentro delas. Ou seja, o controle estará disponível para todas as páginas referenciadas. Quando você adiciona o controle ScriptManager apenas na página dentro do Content, nenhuma outra página poderá utilizar o AJAX ASP.NET; a menos, é claro, que você também adicione um controle ScriptManager dentro da página em questão.
Aprofundando no uso de Web Services ... 159
10
6. No código HTML da Master Page, digite o seguinte código logo a seguir da tag de fechamento do controle ScriptManager, como ilustra a Figura 10.3:
Master Page
Figura 10.3.
Este texto serve apenas se colocarmos algum conteúdo na Master Page, de forma que, durante o exemplo, fique claro que algum conteúdo está sendo recuperado da página Master Page. 7. Vamos agora excluir a página Default.aspx criada automaticamente pelo Visual Studio porque ela não faz referência à Master Page. Para isto, clique com o botão direito sobre a página Default.aspx na janela Solution Explorer e selecione Delete. Você pode adicionar a referência à página Master Page no código HTML de uma página ASP.NET sem precisar excluir o arquivo caso seja necessário. Para simplificar nosso exemplo, apenas excluímos a página. Vamos agora adicionar uma nova página com referência à Master Page. 160 Universidade AJAX
8. Clique com o botão direito sobre o nome do projeto e selecione Add New Item. 9. Em Templates selecione Web Form, o nome do arquivo deve ser Default.aspx e devem estar marcadas as opções Place code in separate file e Select master page, como mostra a Figura 10.4:
Figura 10.4.
OBSERVAÇÃO Você pode ter mais do que uma Master Page em sua aplicação. A janela Select a Master Page permite que você escolha qual Master Page será associada à página que você está criando. A opção Select master page faz com que uma nova caixa de diálogo seja exibida após o clique no botão Add, permitindo a escolha de uma Master Page. 10. Clique em Add. 11. Na janela Select a Master page selecione MasterPage.master e clique em OK como mostra a Figura 10.5:
Aprofundando no uso de Web Services ... 161
capítulo
10
Figura 10.5.
A nova página Default.aspx é criada. O próximo passo é adicionar um Web Service à nossa aplicação. 12. Na janela Solution Explorer clique com o botão direito sobre o nome do projeto e selecione Add New Item. 13. Em Templates, selecione Web Service. Certifique-se que a opção Place code in separate file esteja selecionada, como mostra a Figura 10.6:
Figura 10.6.
162 Universidade AJAX
14. Clique em Add. Para que você possa compreender como transmitir e usar um tipo complexo em suas aplicações, vamos criar uma classe simples chamada Produto, antes de programarmos o código em nosso Web Service. No nosso exemplo vamos transmitir um objeto produto por meio do nosso Web Service. Para isso: 15. Novamente, clique com o botão direito sobre o nome do projeto e selecione Add New Item. 16. Em Templates, selecione Class e nomeie a nova classe como Produto.cs, como mostra a Figura 10.7: Se a linguagem utilizada for VB.NET, o nome da classe será Produto.vb.
Figura 10.7. capítulo
10
17. Clique em Add. 18. Você então é questionado se deseja adicionar o arquivo da classe em uma pasta especialmente reservada a ele chamada App_Code. Isto é uma boa prática, clique em Sim.
Figura 10.8.
Aprofundando no uso de Web Services ... 163
19. Digite o seguinte código dentro da classe Produto: private String _ nome; private String _ descricao; private int _ quantidade; public String Nome { get { return _ nome; } set { _ nome = value; } } public String Descricao { get { return _ descricao; } set { _ descricao = value; } } public int Quantidade { get { return _ quantidade; } set { _ quantidade = value; } }
Em VB.NET: Private _ nome As String Private _ descricao As String Private _ quantidade As Integer Public Property Nome() As String Get Return _ nome End Get Set(ByVal value As String) _ nome = value End Set End Property Public Property Descricao() As String Get Return _ descricao End Get Set(ByVal value As String) _ descricao = value End Set End Property Public Property Quantidade() As Integer Get Return _ quantidade 164 Universidade AJAX
End Get Set(ByVal value As Integer) _ quantidade = value End Set End Property
Seu painel de código deve estar semelhante ao da Figura 10.9:
Figura 10.9.
Vamos agora implementar o código do Web Service. Para permitir que o Web Service seja acessado via Script você precisa adicionar o atributo ScriptServiceAttribute à classe do mesmo. Este atributo está no namespace System.Web.Script.Services. 20. Importe o namespace System.Web.Script.Services usando o seguinte código: using System.Web.Script.Services;
Em VB.NET: Imports System.Web.Script.Services
Aprofundando no uso de Web Services ... 165
capítulo
10
21. Adicione a referência ao atributo logo acima da declaração da classe com o código: [ScriptService]
Em VB.NET:
_ _ _ Public Function RecuperaProduto() As Produto Dim p As New Produto p.Nome = “Produto1” p.Descricao = “Descricao” p.Quantidade = 30 Return p End Function 166 Universidade AJAX _ Public Shared Function RecuperarHoraLoad() As String Return HttpContext.Current.Session(“agora”).ToString End Function A tag nos permite disponibilizar um conteúdo alternativo ao disposto via script. Isso significa que dentro desta tag disponibilizamos conteúdo para o usuário que não tiver suporte ao Javascript em seu navegador. Veja um exemplo: Olá fulano.
na forma de texto.Chamar a Função Chamar a Função são filhas do mesmo parent (pai). Então, a tag e são siblings (irmãs). A tag está localizada dentro da tag
, assim a tag é filha dessa última. Na nomenclatura do DOM a chamaremos de child node (tag
) ou child. 240 Universidade AJAX
em sua marcação HTML e que essa tag esteja com o atributo ID definido como menu. Podemos utilizar o método getElementById para acessá-la e o método innerHTML para manipular seu conteúdo ou marcação HTML. Exemplo de como alterar o conteúdo de uma tag: var obj = document.getElementById(“menu”); obj.innerHTML = “Novo conteúdo.”;
