Leo62 P Web Matrix

144
ASP.NET Web Matrix Tópicos Avançados.......................................141 Preferências dos usuários..............................141 Desenvolvimento ASP.NET Mobile...........................87 Desenvolvimento ASP.NET Mobile..........................88 Criando uma nova página Mobile..........................87 Testando uma página Mobile..............................91 Páginas ASP.NET com dados................................41 DataList e Templates....................................61 Apresentação de dados com MxDataGrid....................41 O DropDownList do Code Builder..........................66 Como formatar o DataGrid................................59 Como formatar o MxDataGrid..............................45 Como usar o Data Code Builder...........................48 Construindo uma aplicação de ponta a ponta..............114 Sobre a aplicação......................................114 Como criar uma página de Login ........................123 Como criar uma página Master/Detail....................119 Como criar uma página de Registro .....................133 Como criar uma tabela "Users" em um banco de dados.....115 Como criar o arquivo Web.config........................131 Entrando com os dados do usuário.......................117 Executando a aplicação.................................140 Criando um banco de dados................................26 A conexão a um servidor de banco de dados...............26 A conexão a um banco de dados existente.................38 A criação de um novo banco de dados.....................28 Como criar novas tabelas de bancos de dados.............30 Como se desconectar de uma fonte de dados...............37 A edição de dados dentro de uma tabela de banco de dados 35 Introdução ao Web Matrix..................................3 Introdução...............................................3 Apresentação das ferramentas.............................4 Ajuda & Community.......................................100 Class Browser..........................................112

Transcript of Leo62 P Web Matrix

Page 1: Leo62 P Web Matrix

ASP.NET Web Matrix

Tópicos Avançados..............................................................................................141Preferências dos usuários.............................................................................................141

Desenvolvimento ASP.NET Mobile...............................................................87Desenvolvimento ASP.NET Mobile.............................................................................88Criando uma nova página Mobile..................................................................................87Testando uma página Mobile.........................................................................................91

Páginas ASP.NET com dados...........................................................................41DataList e Templates.....................................................................................................61Apresentação de dados com MxDataGrid.....................................................................41O DropDownList do Code Builder................................................................................66Como formatar o DataGrid............................................................................................59Como formatar o MxDataGrid......................................................................................45Como usar o Data Code Builder....................................................................................48

Construindo uma aplicação de ponta a ponta....................................114Sobre a aplicação.........................................................................................................114Como criar uma página de Login ...............................................................................123Como criar uma página Master/Detail.........................................................................119Como criar uma página de Registro ...........................................................................133Como criar uma tabela "Users" em um banco de dados..............................................115Como criar o arquivo Web.config...............................................................................131Entrando com os dados do usuário..............................................................................117Executando a aplicação................................................................................................140

Criando um banco de dados.............................................................................26A conexão a um servidor de banco de dados.................................................................26A conexão a um banco de dados existente....................................................................38A criação de um novo banco de dados..........................................................................28Como criar novas tabelas de bancos de dados...............................................................30Como se desconectar de uma fonte de dados................................................................37A edição de dados dentro de uma tabela de banco de dados.........................................35

Introdução ao Web Matrix...................................................................................3Introdução........................................................................................................................3Apresentação das ferramentas.........................................................................................4

Ajuda & Community.............................................................................................100Class Browser..............................................................................................................112Community..................................................................................................................102Modelos de Arquivos...................................................................................................100My Snippets.................................................................................................................105Pesquisar......................................................................................................................104

ISP/FTP Hosting.......................................................................................................94Desconectando-se de um provedor de hosting..............................................................99Conectando-se a um provedor de Hosting.....................................................................94

Page 2: Leo62 P Web Matrix

Modificando uma página ASP.NET hospedada............................................................96XML Web Services..................................................................................................72

Como criar um novo XML Web service.......................................................................72Como criar um cliente Web service...............................................................................82O acesso a dados pelo WebMethod...............................................................................76O WebMethod 'Subtract'................................................................................................73

Sua primeira página ASP.NET...........................................................................7Adicione um avançado controle de Calendar Server Control à página ASP.NET........11Construa uma página ASP.NET "hello world"................................................................9Como criar uma nova página ASP.NET..........................................................................7Como executar uma página com o uso de um IIS Web Server.....................................15Utilizando o Online Control Gallery.............................................................................17

Page 3: Leo62 P Web Matrix

Introdução ao Web Matrix

Introdução

Bem-vindo ao Projeto do Tour Dirigido do ASP.NET Web Matrix O projeto do Tour dirigido do ASP.NET Web Matrix é composto por vários “percursos” pela ferramenta – que chamaremos de capítulos – acompanhados de comentários. Este Tour foi concebido para que os desenvolvedores se familiarizem com a sintaxe, a arquitetura e todo o poder do ambiente de desenvolvimento do ASP.NET Web Matrix. Os exemplos de cada percurso são resumidos e contêm ilustrações do Web Matrix, muito fáceis de compreender.

Visite os Fóruns de Discussão (situados na guia ”Forums” do site www.asp.net) para obter respostas às suas dúvidas sobre o ASP.NET Web Matrix e sobre este Tour Dirigido.

Que nível de expertise se espera de um participante do Tour? O participante do Tour deveria ser fluente em HTML e na terminologia geral de desenvolvimento da Web. A maior parte dos capítulos não requer conhecimentos prévios sobre ASP.NET, embora recomendamos que você já esteja familiarizado com os conceitos básicos da Web que estão por trás das páginas Web interativas, incluindo Forms, XML e acesso a dados.

Para uma incursão mais detalhada no próprio ASP.NET visite o Tutorial do ASP.NET QuickStart no site http://www.asp.net/Tutorials/quickstart.aspx

Page 4: Leo62 P Web Matrix

Apresentação das ferramentas

As telas abaixo mostram o ASP.NET Web Matrix sendo executado, ressaltando as várias regiões de importância dessa ferramenta com a qual você terá que se familiarizar. A descrição de cada uma das regiões assinaladas por um círculo vermelho está logo a seguir.

ID Feature Description

Barra do Menu A Barra do Menu do ASP.NET Web Matrix Menu é a área que se situa no

topo da janela do ASP.NET Web Matrix, imediatamente abaixo da barra azul do título. A Barra do Menu contém um conjunto de títulos de menu. Cada título do menu dá acesso a um menu drop-down composto por uma série de itens ou opções do menu.

Os menus apresentam uma lista de comandos disponíveis para o usuário. Há vários tipos de menus, incluindo os menus drop-down, menus de atalho e menus em cascata.

Ao apontar para um título do menu, e clicar o botão principal do mouse, o título do menu se ilumina e aparece o menu associado em forma de drop-down. Ao mover a seta sobre os itens do menu, o menu acompanha o movimento da seta, e ilumina cada item à medida que a seta se movimenta sobre aquele campo. Para selecionar o comando associado a um item do menu, aponte para aquele item e clique no botão do mouse. O menu drop-down então se fechará.

É também possível acessar os menus drop-down apertando a tecla ALT (ou F10), para ativar a Barra do Menu. Ao apertar uma tecla alfanumérica enquanto pressiona a tecla ALT, ou após soltar a tecla ALT, o ASP.NET Web Matrix apresenta o menu drop-down referente ao acesso correspondente da tecla alfanumérica. Importante notar que esta ação não é sensível a letras maiúsculas ou minúsculas.

Barra de

Page 5: Leo62 P Web Matrix

Ferramentas Standard(Standard Toolbar)

A Barra de Ferramentas (Toolbar) Standard do ASP.NET Web Matrix é uma área situada no topo da principal janela principal do ASP.NET Web Matrix, imediatamente abaixo da Barra do Menu.

Uma barra de ferramentas é um painel que contém uma série de controles, desenhados para oferecer acesso rápido a determinados comandos ou opções.

Você poderá acessar os controles da barra de ferramentas utilizando um mouse ou as teclas de acesso.

Caixa de Ferramentas (Toolbox)

A Caixa de Ferramentas (Toolbox) do ASP.NET Web Matrix é a área situada do lado esquerdo da janela principal do ASP.NET Web Matrix, imediatamente ao lado à Janela de Documentos. Os itens disponíveis na Caixa de Ferramentas mudam de acordo com a página do designer que estiver em uso.

Uma caixa de ferramentas é um painel que contém uma série de controles e ferramentas utilizadas durante o design de uma aplicação para a Web. Cada conjunto de controles e ferramentas está funcionalmente organizado em guias independentes (tabs) dentro da caixa de ferramentas.

Você poderá selecionar e arrastar itens, texto e controles, da caixa de ferramentas para dentro de formulários, páginas e designers, e poderá também arrastar itens dessas fontes de volta à caixa de ferramentas para uso posterior. Por exemplo, você poderá arrastar um botão de controle da guia HTML para uma página da Web, ou selecionar e arrastar um fragmento de código da Janela de Documentos, armazenando-a na guia da caixa de ferramentas My Snippets.

Janela de Documentos A área chamada de Janela de Documentos (Document Windows) do

ASP.NET Web Matrix é o espaço situado no meio da janela principal do ASP.NET Web Matrix, entre a Caixa de Ferramentas e a janela da Área de Trabalho (Workspace) e as janelas de Propriedades (Properties Windows).

A Janela de Documentos é criada de forma dinâmica a cada vez que você abre ou cria um arquivo. A janela contendo a lista de documentos abertos aparece no menu da janela, exibindo a lista decrescente das últimas janelas listadas.

A janela de documentos tem uma interface de tabulação, oferecendo um acesso único a até quatro diferentes exibições de um arquivo: Design, HTML, Código e Todos (a consolidação das guias HTML e de Código). As exibições (tabs) disponíveis na Janela de Documentos mudam, de acordo com a página do designer em uso.

Janela da Área de Trabalho (Workspace Window)

A Janela da Área de Trabalho do ASP.NET Web Matrix está situada do lado superior direito da janela principal do ASP.NET Web Matrix, imediatamente acima da Janela de Propriedades.

A Janela da Área de Trabalho oferece uma exibição organizada de seu sistema de arquivos e arquivos abertos, bem como do acesso imediato aos Data Stores do MSDE e do SQL Server.

Utilize a Janela da Área de Trabalho para navegar e abrir um dos arquivos abertos do ASP.NET Web Matrix. Você também poderá utilizar a Janela da Área de Trabalho para se conecta ao MSDE e a instâncias do banco de dados do SQL Server, manusear dados e manter tabelas e objetos de stored procedures.

Properties Window  The ASP.NET Web Matrix Properties Window is the area displayed on the

bottom right of the main ASP.NET Web Matrix window directly below the Workspace Window.

Properties define the state, behavior, and appearance of an ASP.NET Page, document or control. Most graphical controls contain properties that can be

Page 6: Leo62 P Web Matrix

changed to define their visual appearance. Controls, and documents, and ASP.NET Pages can also expose properties that specify how they will interact with the user and the information that they need to operate at run time.

The Properties Window displays different types of editing fields, depending on the needs of a particular property. These edit fields include edit boxes, drop-down lists, and links to custom editor dialog boxes. Properties shown in gray are read-only.

Use the Properties Window to view and change the design-time properties and events of selected objects that are located in editors and designers. You can also use the Properties Window to view and search for .NET Assemblies or access the online Community to search for help.

Page 7: Leo62 P Web Matrix

Sua primeira página ASP.NET

Como criar uma nova página ASP.NET

Neste capítulo você irá criar uma nova página ASP.NET. Para realizar essa tarefa, siga os passos abaixo:

1. Abra o Microsoft ASP.NET Web Matrix. Você irá notar que irá aparecer a caixa de diálogo New File.

2. Selecione (General) do painel Templates. 3. Selecione o template ASP.NET Page. 4. Digite um acesso a arquvio na caixa Location. 5. Digite myFirstPage.aspx na caixa Filename. 6. Selecione Visual Basic na caixa drop-down Language.

Clique OK. Eis a caixa de diálogo New File:

7.

Page 8: Leo62 P Web Matrix

O arquivo myFirstPage.aspx irá agora abrir numa exibição em modo de Design e estará pronto para ser editado.

Page 9: Leo62 P Web Matrix

Construa uma página ASP.NET "hello world" NET

Neste capítulo, você irá construir uma página ASP.NET “hello world”, muito simples. Nos passos abaixo você irá executar essa tarefa, adicionando três controles de servidor ASP.NET à página ASP.NET criada no capítulo anterior. Em seguida acrescente uma linha de código para acessá-la e modificá-la dinamicamente no servidor.

1. Da guia Web Controls do Toolbox (do lado esquerdo da ferramenta), arraste um contole Label, um controle TextBox e um controle Button para a página ASP.NET. Aperte a tecla Enter após inserir cada um dos controles.

2. Selecione a guia HTML na base da janela de documentos para visualizar o HTML gerado pelo ASP.NET Web Matrix como resultado da operação de arrastar e soltar acima. Utilizando o ASP.NET Web Matrix, você poderá modificar o conteúdo HTML da página usando a guia de design gráfico (como executado no passo anterior) ou editando diretamente o conteúdo HTML, quer com o uso do tag HTML quer com o uso da guia All da ferramenta.

3. <html>4. <head>5. </head>6. <body>7. <form runat="server">8. <p>9. <asp:Label id="Label1" runat="server">Label10. </asp:Label>11. </p>12. <p>13. <asp:TextBox id="TextBox1" runat="server">14. </asp:TextBox>15. </p>

Page 10: Leo62 P Web Matrix

16. <p>17. <asp:Button id="Button1" onclick="Button1_Click" runat="server"

Text="Button">18. </asp:Button>19. </p>20. </form>21. </body>22. </html>

Selecione a guia Design e dê um duplo clique no controle Button. O ASP.NET Web Matrix irá acionar, automaticamente um método de controle de eventos do ASP.NET do lado do servidor (chamado "Button1_Click") para o evento de clicar do Button e abrir a página na exibição Code.

23. Inclua o código abaixo, em vermelho, no método Button1_Click para atualizar a propriedade Text do controle Label, e assim exibir uma mensagem de boas vindas utilizando o valor digitado no TextBox:

24. Sub Button1_Click(sender As Object, e As EventArgs)25.26. Label1.Text = "Hello " & TextBox1.Text & " welcome to the ASP.NET Web

Matrix Project!" 27.

End Sub 28. Opcionalmente, selecione a guia All para visualizar todo o conteúdo da página ASP.NET. Isso inclui tanto o html como as seções de código da página, e oferece uma visão prática que permite que você veja todo o código e o conteúdo da página:

29. <%@ Page Language="VB" %>30.31. <script runat="server">32.33. Sub Button1_Click(sender As Object, e As EventArgs)34. 35. Label1.Text = "Hello, " & TextBox1.Text & "! Welcome to the ASP.NET

Web Matrix Project"36. 37. End Sub38. 39. </script>40.41. <html>42.43. <body>44. <form runat="server">45. <p>46. <asp:Label id="Label1" runat="server">Label47. </asp:Label>48. </p>49. <p>50. <asp:TextBox id="TextBox1" runat="server">51. </asp:TextBox>52. </p>53. <p>54. <asp:Button id="Button1" onclick="Button1_Click" runat="server"

Text="Button">55. </asp:Button>56. </p>57. </form>58. </body>59. </html>

Neste ponto, você terminou de construir uma simples página “hello world” no ASP.NET. Nos próximos capítulos vamos aprender a executar a página em um servidor da Web.

Page 11: Leo62 P Web Matrix

Adicione um avançado controle Calendar Server Control à página ASP.NET

Neste capítulo você irá adicionar um controle de servidor ASP.NET mais avançado, o controle Calendar, à página ASP.NET desenvolvida anteriormente. Para isso, siga os pasos abaixo:

1. Abra o arquivo myFirstPage.aspx.

2. Selecione a guia Design para visualizar a página em modo de design. 3. A partir da guia Web Controls do Toolbox, arraste um controle Calendar para a página

ASP.NET, entre o controle TextBox e o controle Button.

Nota: O controle Calendar exibe um calendário de um único mês, o que permite que o usuário selecione as datas e se mova para o próximo mês ou o mês anterior. Este é um controle mais avançado, pois ele permite que você personalize sua aparência do controle Calendar, configurando as propriedades que controlam o estilo para diferentes partes do controle, incluindo o conteúdo e formatação de células de dados individuais. No runtime, ele emite um output html padrão, garantindo que ele funcione com qualquer cliente de browser (IE, Netscape, Opera, etc).

4. Selecione o controle Calendar com seu mouse.

5. Clique no link Auto Format na base da janela Properties (na parte inferior direita da ferramenta).

Page 12: Leo62 P Web Matrix

6. A caixa de diálogo Calendar Auto Format irá aparecer. Esta caixa de diálogo permite que você escolha uma entre uma série pré-definida de cores, estilos de margens e outras configurações (denominadas esquemas – ou scheme) aplicando-as ao controle Calendar.

7. Selecione a opção Simple no esquema ListBox. Ao selecionar um esquema, as configurações desse esquema são aplicadas às propriedades do controle. Veja abaixo uma visão preliminar da aparência do Calendar após a aplicação dos esquemas.

Page 13: Leo62 P Web Matrix

8. Clique OK para selecionar o esquema "Simple". 

9. Selecione a guia HTML para apresentar a página numa exibição HTML.

Nota O layout dos controles do esquema Calendar se mantém fixo em forma de um conjunto de configurações de propriedades em HTML. Você poderá atualizar essas propriedades manualmente para personalizar, posteriormente, sua aparência e seu modo de usar. Você poderá também voltar à guia design e utilizar a grade de propriedades para também modificar essas propriedades.

<asp:Calendar id="Calendar1" runat="server" BackColor="White" Width="200px"DayNameFormat="FirstLetter" ForeColor="Black" Height="180px" Font-Size="8pt"Font-Names="Verdana" BorderColor="#999999" CellPadding="4"> <TodayDayStyle forecolor="Black" backcolor="#CCCCCC"> </TodayDayStyle> <SelectorStyle backcolor="#CCCCCC"> </SelectorStyle> <NextPrevStyle verticalalign="Bottom"> </NextPrevStyle> <DayHeaderStyle font-size="7pt" font-bold="True" backcolor="#CCCCCC"> </DayHeaderStyle> <SelectedDayStyle font-bold="True" forecolor="White" backcolor="#666666"> </SelectedDayStyle> <TitleStyle font-bold="True" bordercolor="Black" backcolor="#999999"></TitleStyle> <WeekendDayStyle backcolor="#FFFFCC"> </WeekendDayStyle> <OtherMonthDayStyle forecolor="Gray"> </OtherMonthDayStyle></asp:Calendar>

10. Selecione a guia Design e dê um duplo clique no controle Button. O ASP.NET Web Matrix irá abrir a exibição Code no método Button1_Click.

Page 14: Leo62 P Web Matrix

11. Atualize o código do método Button1_Click que atualiza o controle Label para incluir os dados selecionados no controle Calendar:

12. Sub Button1_Click(sender As Object, e As EventArgs)13. Label1.Text = "Hello " & TextBox1.Text & " you selected: " &

Calendar1.SelectedDate End Sub

14. Dê um Save e rode a página ASP.NET (utilizando o botão iniciar ou um item do menu, ou ainda teclando F5).

15. Sua página ASP.NET aparecerá, automaticamente, em uma nova instância de seu browser da Web. Note que o Calendar implementa agora as opções de formatação do esquema Simple. Clique uma data no Calendar, digite um nome no TextBox e, em seguida, clique no Button. O nome e a data irão aparecer na mensagem de boas vindas exibida no Label.

Nota: O ASP.NET Web Matrix Web Server já estava sendo executado. Por isso, o diálogo Start Web Application não apareceu nesta execução. O ASP.NET Web Matrix irá usar o Web Server especificado na primeira vez que a página foi executada. O ASP.NET Web Matrix não pedirá que você especifique um Web Server novamente até fechar ou reabrir o ambiente de desenvolvimento do ASP.NET Web Matrix e rodar a página novamente, ou até fechar o programa e reiniciar o Web Server.

Feche a instância do browser da Web.

Page 15: Leo62 P Web Matrix

Como executar uma página usando um IIS Web Server

Neste Capítulo, você irá salvar e executar a página ASP.NET desenvolvida na seção anterior com o uso de um IIS Web Server. Note que você já terá que ter o IIS instalado em sua máquina para efetuar as ações deste capítulo.

1. Em primeiro lugar, feche o ASP.NET Web Matrix Web Server. Clique no botão direito do mouse no ícone do sistema ASP.NET Web Matrix Web Server (embaixo, à direita do windows desktop) e selecione Stop. 

2. Rode novamente a página ASP.NET (aperte o botão iniciar ou pressione F5). Irá aparecer a caixa de diálogo Start Web Application:

3. Clique na opção Use a new IIS Vitual Root.

4. Digite MatrixTour na caixa Application Name. 5. Não selecione a caixa de controle Enable Directory Browsing (default). 6. Clique Start.  7. O ASP.NET Web Matrix irá, em seguida, criar um novo Diretório Virtual IIS chamado

MatrixTour e sua página ASP.NET aparecerá automaticamente em uma nova instância de seu browser da Web.

Note que, ao contrário da opção de instalação do Web Server do ASP.NET Web Matrix Web Server, não há nenhum ícone de sistema ou notificação de mensagem quando uma página é criada através da opção IIS Web Server. Para modificar a ocnfiguração do servidor da Web ou para remover o recém-criado diretório virtual, utiliza o IIS Administration Tool.

Importante: O ASP.NET Web Matrix não pedirá que você especifique novamente um Web Server até fechar e novamente abrir o ambiente de desenvolvimento do ASP.NET Web Matrix e execute novamente a página.

Page 16: Leo62 P Web Matrix

Feche a instância do browser da Web.

Page 17: Leo62 P Web Matrix

Utilizando o Online Control Gallery

O ASP.NET Web Matrix contém conexões à ASP.NET Online Server Control Gallery. A galeria de controles é um diretório do servidor do ASP.NET que pode ser usado em suas aplicações. A galeria é freqüentemente atualizada, portanto, não se esqueça de reconfirmar com freqüência se há novos controles a serem carregados e usados em suas aplicações.

Neste capítulo, você irá inserir um Custom control da Online Component Gallery em uma nova página ASP.NET.

1. Abra o ASP.NET Web Matrix. Você irá notar que uma caixa de diálogo New File irá aparecer.

2. Selecione (General) do painel Templates. 3. Selecione o modelo ASP.NET Page. 4. Digite um caminho de arquivo na caixa Location. 5. Digite myFirstCustomPage.aspx na caixa Filename. 6. Selecione Visual Basic na caixa drop-down Language. 7. Clique OK. O arquivo myFirstCustomPage.aspx será aberto em modo de exibição Design.

8. Clique a guia Custom Controls no Toolbox situado à esquerda da ferramenta.

9. Clique com o botão direito do mouse no Toolbox para incluir o controle personalizado. Você poderá incluir um controle personalizado fazendo o browsing da estação de trabalho local, ou nagevando na Online Component Gallery.

Page 18: Leo62 P Web Matrix

10. Selecione a opção Add Online Toolbox Components. Você notará que a caixa de diálogo Component Gallery irá aparecer. O conteúdo deste diálogo é populado através do acesso a um Web Service em XML que esteja rodando no www.asp.net website.

11. Você poderá pesquisar componentes da Online Component Gallery por Categoria (opção Category – default) ou por palavra-chave (Keyword).

12. Selecione o item Data & XML Controls na exibição da lista Categories. Perceba que aparecerão todos os Data & XML Controls na grade de resultados.

13. Selecione o controle XMLEditGrid da grade de resultados. Aparecerá uma descrição do controle na caixa situada abaixo da grade de resultados. O controle XMLEditGrid amarra um arquivo XML File a um DataGrid.

Page 19: Leo62 P Web Matrix

14. Clique Install.

15. O ASP.NET Web Matrix irá ativar uma caixa de diálogo de perguntas. Clique Yes para instalar o componente on-line no Global Assembly Cache (GAC).

16. Aparecerá, em seguida, o XMLEditGrid na caixa de ferramentas Custom Controls. Este controle de servidor acaba de ser carregado e instalado em sua máquina, permitindo que você o utilize para qualquer página ASP.NET.

17. A partir da guia Custom Controls do Toolbox, arraste o controle XMLEditGrid para a página ASP.NET.

Page 20: Leo62 P Web Matrix

18. Crie um novo arquivo XML File para amarrá-lo com o XMLEditGrid:

a. Selecione New do menu File. b. Selecione (General) do painel Templates. c. Selecione o modelo XML File. d. Digite um caminho de arquivo na caixa Location. e. Digite myFirstXMLFile.xml na caixa Filename.

Nota: A primeira extensão de uma página ASP.NET é aspx. A extensão de um arquivo XML é xml.

f. Clique OK. O arquivo myFirstXMLFile.xml irá se abrir.

Page 21: Leo62 P Web Matrix

g. Inclua elementos e atributos XML ao arquivo myFirstXMLFile.xml: h. <?xml version="1.0" encoding="utf-8" ?>i. <Orders>j. <Order>k. <ID>1</ID>l. <OrderDate>4/23/2002</OrderDate>m. <CustomerName>Bob Smith</CustomerName>n. </Order>o. <Order>p. <ID>2</ID>q. <OrderDate>5/12/2002</OrderDate>r. <CustomerName>Sally Jones</CustomerName>s. </Order>t. </Orders>

u. Salve e feche este arquivo. 2. Selecione a guia Design da página ASP.NET e selecione o controle XMLEditGrid.3. Selecione a propriedade XMLFile na janela Properties. 4. Configure a propriedade XMLFile do XMLEditGrid para myFirstXMLFile.xml. Esta

propriedade amarra a propriedade XML File ao controle XMLEditGrid. 

Page 22: Leo62 P Web Matrix

5. Selecione o controle XMLEditGrid.

6. Clique no link Auto Format na base da janela Properties.

7. Aparecerá a caixa de diálogo XMLEditGrid Auto Format. Esta caixa de diálogo permite selecionar uma entre um conjunto pré-definido de cores, estilos de bordas e outros tipos de configuração (chamados de esquemas ou scheme) aplicando-os ao controle XMLEditGrid.

8. Selecione a opção Simple 1 no esquema ListBox. Ao selecionar um esquema, as configurações deste esquema serão aplicadas às propriedades do controle. Note como ficará o XMLEditGrid depois de aplicado o esquema.

9. Clique OK.

Page 23: Leo62 P Web Matrix

10. Dê um Save e rode a página ASP.NET.

11. Sua página ASP.NET page aparecerá automaticamente em uma nova instância de seu browser da Web. O XMLEditGrid apresenta uma linha para cada um dos conjuntos de pedidos (Order nodes) do arquivo myFirstXMLFile.xml.

12. Clique no link Add new item.

Page 24: Leo62 P Web Matrix

13. Na base do XMLEditGrid aparecerá uma nova linha.14. Digite 3 na coluna ID, 6/1/2002 na coluna OrderDate e John Doe na coluna

CustomerName. 15. Clique o botão Save New Item. Esta operação irá salvar o conteúdo de sua edição até o

arquivo XML de seu Web server. Note que esta operação requer que o servidor da Web tenha permissões de segurança para aceitar que se escreva sobre esse arquivo (caso não tenha essas permissões, você irá perceber a ocorrência de uma exceção de segurança ao acionar o botão de salvar. Por default, as aplicações ASP.NET executadas no IIS não têm permissões de escrever sobre arquivos (você terá que conferir, explicitamente, a possibilidade de escrever sobre um arquivo através da conta “ASPNET”)).

16. Abra o arquivo myFirstXMLFile.xml.

17. Aparecerá uma nova linha com um OrderID de 3 no arquivo XML File: 18. <?xml version="1.0" encoding="utf-8" ?>19. <Orders>20. <Order>21. <ID>1</ID>22. <OrderDate>4/23/2002</OrderDate>23. <CustomerName>Bob Smith</CustomerName>24. </Order>25. <Order>26. <ID>2</ID>27. <OrderDate>5/12/2002</OrderDate>28. <CustomerName>Sally Jones</CustomerName>29. </Order>30. <Order>31. <ID>3</ID>

Page 25: Leo62 P Web Matrix

32. <OrderDate>6/1/2002</OrderDate>33. <CustomerName>John Doe</CustomerName>34. </Order>35. </Orders>36. Feche a instância de seu browser da Web.

Page 26: Leo62 P Web Matrix

Criando um banco de dados

A conexão a um servidor de banco de dados

O ASP.NET Web Matrix simplifica o desenvolvimento de aplicações de bancos de dados, por incluir suporte ao Microsoft SQL Server e à administração de bancos de dados MSDE (um engine para o uso gratuito do banco de dados, compatível com o SQL Server) a partir do ambiente de desenvolvimento do ASP.NET Web Matrix.

O MSDE está disponível para instalação em forma de um produto stand-alone gratuito, e pode ser acessado para download no site www.asp.net ou a partir de qualquer um desses produtos Microsoft:

.NET Framework SDK Office XP Professional Visio 2000

Projetado para ser executado no background, o MSDE não tem sua própria interface de usuário ou ferramentas. Sua interação com o MSDE se processa através do ambiente de desenvolvimento do ASP.NET Web Matrix.

Neste capítulo, você irá se conectar a uma instalação local do MSDE.

1. Clique na guia Data da janela Workspace.

Nota: Caso você tenha componentes do SQL instalados localmente, o ASP.NET Web Matrix irá mostrar uma área de trabalho (workspace) vazia.

Nota: Caso você não tenha componentes do SQL instalados localmente, o ASP.NET irá trazer uma mensagem informativa e um link no qual você poderá clicar para fazer o download e instalação de uma cópia gratuita do MSDE. Se necessária, faça o download e a instalação.

Page 27: Leo62 P Web Matrix

2. Clique no botão New Connection da barra de ferramentas da janela Data.

3. Aparecerá a caixa de diálogo Connect to Database.

4. Digite localhost na caixa do servidor Server (default). 5. Clique no botão de rádio Windows authentication.

Nota: no caso sua configuração do SQL Server aceitar apenas a autenticação do SQL Server, clique no botão de rádio SQL Server authentication e digite credenciais válidas para o SQL nas caixas User name e Password.

Page 28: Leo62 P Web Matrix

A criação de um novo banco de dados

A partir do ASP.NET Web Matrix, você poderá se conectar a um banco de dados existente, ou criar um novo banco de dados.

Neste capítulo, você irá criar um novo banco de dados chamado de Orders dentro de seu servidor de banco de dados.

1. Complete os passos do capítulo intitulado Como se conectar a uma nova fonte de dados.

2. Clique no link Create a new database na base da caixa de diálogo Connect to Database.

3. Aparecerá a caixa de diálogo Enter Information. Digite Orders na caixa de nomes do banco de dados e clique OK.

4. O ASP.NET Web Matrix irá criar um novo banco de dados Orders. Você verá uma exibição em árvore na janela Workspace que contém um nó-pai chamado localhost.Orders. O nó-pai contém dois nós-filho: um deles se chama Tables e o outro, Stored Procedures.

Page 29: Leo62 P Web Matrix
Page 30: Leo62 P Web Matrix

Como criar novas tabelas de bancos de dados

Neste capítulo você irá criar uma nova tabela de banco de dados denominada Orders, dentro do banco de dados Orders.

1. Clique no nó Tables da árvore da janela Data e clique no botão New Item da barra de ferramentas Data.

2. Aparecerá a caixa de diálogo Create New Table.3. Digite Orders na caixa Table Name. 4. Clique o botão New da área Columns da caixa de diálogo. 5. Digite OrderID na caixa Name da área Column Properties da caixa de diálogo. 6. Selecione Int no menu drop-down Data Type. 7. Selecione a caixa de verificação Required e, em seguida, selecione as caixas de verificação

Primary Key e Auto-increment. 8. Clique New para adicionar mais colunas.

Page 31: Leo62 P Web Matrix

9. Inclua uma segunda coluna na tabela Orders chamada OrderDate com as seguintes propriedades:

• Name: OrderDate • Data Type: DateTime • Required: True (assinalada) • Primary Key: False (não assinalada)

10. Inclua uma terceira coluna à tabela Orders chamada CustomerName cp, as seguintes propriedades:

• Name: CustomerName • Data Type: VarChar • Required: True (assinalada) • Primary Key: False (não assinalada) • Field Size: 50 (default)

11. Clique OK para salvar a tabela Orders no banco de dados Orders.

Page 32: Leo62 P Web Matrix

12. A tabela Orders aparece como um nó-filho Tables na janela Data.

13. Clique no nó Tables na exibição em árvore e clique no botão New Item da barra de ferramentas da janela Data. Inclua uma segunda tabela no banco de dados Orders, denominada OrderDetails.

14. Inclua uma coluna de chave principal à tabela OrderDetails, denominada OrderDetailID com as seguintes propriedades:

• Name: OrderDetailID • Data Type: Int • Required: True (assinalada) • Primary Key: True (não assinalada) • Auto-increment: True (assinalada)

Page 33: Leo62 P Web Matrix

15. Inclua uma segunda coluna à tabela OrderDetails chamada OrderID contendo as seguintes propriedades:

• Name: OrderID • Data Type: Int • Required: True (checked) • Primary Key: False (não assinalada) • Auto-increment: False (não assinalada)

16. Inclua uma terceira coluna à tabela OrderDetails chamada ProductName com as seguintes propriedades:

• Name: ProductName • Data Type: VarChar • Required: True (checked) • Primary Key: False (não assinalada) • Field Size: 50 (default)

17. Inclua uma quarta coluna à tabela OrderDetails chamada Quantity com as seguintes propriedades:

• Name: Quantity • Data Type: Int • Required: True (assinalada) • Primary Key: False (não assinalada) • Auto-increment: False (não assinalada)

18. Inclua uma quinta coluna à tabela OrderDetails chamada UnitPrice com as seguintespropriedades:

• Name: UnitPrice • Data Type: Money • Required: True (assinalada) • Primary Key: False (não assinalada)

19. Clique OK para salvar a tabela OrderDetails do banco de dados Orders.

Page 34: Leo62 P Web Matrix

20. A tabela OrderDetails aparece em forma de um nó-filho Tables da janela Data.

Page 35: Leo62 P Web Matrix

A edição de dados dentro de uma tabela de banco de dados

Neste caítulo, você irá incluir dados nas tabelas do banco de dados Orders e OrderDetails dentro do banco de dados Orders.

1. Edite a tabela Orders. Existem duas maneiras de editar uma tabela de banco de dados no Ambiente de Desenvolvimento do ASP.NET Web Matrix:

a. Clique no botão Edit da barra de feramentas da janela Data.

b. Dê um duplo-clique no nome da tabela da exibição em árvore da janela Data.

2. Aparecerá a caixa de diálogo Edit Table. O diálogo Edit Table mostra uma grade de dados que contém dados da tabela. As modificações que você fizer na grade de dados Edit Table serão aplicadas diretamente ao banco de dados.

3. Inclua duas novas linhas de dados à tabela Orders.

Nota: Aperte a tecla Enter ou selecione uma linha direfente na grade de dados para incluir uma nova linha ao banco de dados.

Nota: A coluna OrderID foi configurada para se auto-incrementar (iniciando em 1 e incrementando de 1 em 1). O banco de dados determina, automaticamente, e atribui os próximos valores a um campo auto-incremental, quando uma nova linha é dedicada ao banco de dados.

Nota: Os valores do campo auto-incremental são somente para leitura no diálogo da grade de dados Edit Table e terão um valor negativo até que seja adicionada uma nova linha ao banco de dados.

Nota: Clique no link Edit/View Table Design na base do diálogo Edit Table para visualizar a definição da tabela em modo de edição. Você não poderá editar uma definição de tabela se não houver dados na tabela.

Page 36: Leo62 P Web Matrix

4. Clique Close.

5. Edite a tabela OrderDetails. 6. Adicione de duas a quatro novas linhas de dados à tabela OrderDetails para cada linha da

de dados da tabela Orders.

Clique Close.

Page 37: Leo62 P Web Matrix

Como se desconectar de uma fonte de dados

Neste capítulo você irá aprender como se desconectar de um banco de dados editado em capítulos anteriores.

1. Clique na guia Data da janela Workspace.

2. No nó-pai, clique no nó do servidor (localhost.Orders) situado na exibição da árvore da janela Data.

3. Clique no botão Close Connection na barra de ferramentas da janela Data.

Nota: o botão Close Connection permanece desabilitado até que você selecione o nó-pai do servidor na exibição da árvore da janela Data.

Page 38: Leo62 P Web Matrix

Como se conectar a um banco de dados existente

A partir do próprio ambiente de desenvolvimento ASP.NET Web Matrix, você poderá se conectar a um banco de dados existente.

Neste capítulo, você irá se conectar ao banco de dados construído em um capítulo anterior.

1. Clique na guia Data da janela Workspace.

2. Clique no botão New Connection na barra de ferramentas da janela Data.

3. Aparecerá a caixa de diálogo Connect to Database.

4. Digite localhost na caixa do Server.

5. Clique no botão de rádio Windows authentication. 6. Clique no menu drop-down Database. O ASP.NET Web Matrix fará a sua conexão com a

fonte de dados e irá popular o drop-down do Database com os nomes do banco de dados. Selecione o banco de dados Orders.

Page 39: Leo62 P Web Matrix

7. Clique OK. 8. Você irá visualizar uma árvore na janela Data que contém um nó-pai chamado

localhost.Orders. O nó-pai tem dois nós-filhos: um deles se chama Tables e o outro se chama Stored Procedures.

Page 40: Leo62 P Web Matrix

Páginas ASP.NET com dados

Apresentação de dados com MxDataGrid

O controle de servidor de Web MXDataGrid ASP.NET foi especialmente projetado para apresentar as informações de uma fonte de dados. Você poderá amarrar o controle a uma fonte de dados em tempo de design ou em tempo de execução. Embora seja possível apresentar dados a partir de uma grande variedade de fontes, as fontes mais comuns são datasets e data views.

Neste Capítulo, você irá amarrar um MXDataGrid à tabela Orders do banco de dados Orders.

1. Selecione File > New para chegar à caixa de diálogo "New File"2. Seleccione (General) da tela de Templates. 3. Selecione o modelo ASP.NET Page. 4. Digite um caminho de arquivo na caixa Location. 5. Digite myFirstDataGrid.aspx na caixa Filename. 6. Selecione Visual Basic na caixa drop-down Language. 7. Clique OK.

8. O arquivo myFirstDataGrid.aspx irá se abrir em modo de exibição de Design.

9. Digite "Orders Listing" na página, depois aperte a tecla Enter para inserir um espaço em branco.

Page 41: Leo62 P Web Matrix

10. Selecione a guia Data da janela Workspace.

11. Conecte o banco de dados Orders desenvolvido anteriormente neste Tour.12. Selecione a tabela Orders no nó Tables da exibição em árvore Data. 13. Arraste a tabela Orders para a página ASP.NET 14. Aparecerão na página ASP.NET o controle SQLDataSourceControl e o controle

MXDataGrid.

Nota: o ASP.NET Web Matrix configura automaticamente as propriedades do SQLDataSourceControl com base nas informações de conexão especificadas quando foi feita a conexão ao banco de dados.

Nota: o ASP.NET Web Matrix amarra, automaticamente, o MXDataGrid ao SQLDataSourceControl.

Page 42: Leo62 P Web Matrix

15. Dê um Save e rode a página ASP.NET.

16. Sua página ASP.NET aparecerá, automaticamente, em uma nova instância de seu browser da Web. O MXDataGrid mostrará todas as linhas da tabela Orders. Se a tabela tiver mais de 10 linhas de dados no banco de dados, então o MXDataGrid irá habilitar, automaticamente, o suporte à paginação para mostrar apenas 10 linhas por vez (somando links de navegação para que um usuário possa navegar para frente e para trás em uma tabela).

Page 43: Leo62 P Web Matrix

Feche a instância do browser da Web.

Page 44: Leo62 P Web Matrix

Como formatar o MXDataGrid

Neste capítulo, você irá mudar a formatação e o comportamento do MXDataGrid.

1. Abra o arquivo myFirstDataGrid.aspx em modo de exibição de Design.

2. Selecione o controle MXDataGrid. 3. Selecione a propriedade AllowPaging na janela Properties. 4. Configure a propriedade AllowPaging do MXDataGrid para False. Esta propriedade aciona

as funcionalidades do MXDataGrid. 

5. Selecione a propriedade Fields na janela Properties.

6. Aparecerá a caixa diálogo Collection Editor.

Page 45: Leo62 P Web Matrix

7. Altere a propriedade HeaderText da coluna OrderID de OrderID para ID.

8. Clique OK. 

9. Dê um Save e rode a página ASP.NET.

10. Sua página ASP.NET aparecerá, automaticamente, em uma nova instância de seu browser da Web. Note que o primeiro cabeçalho da coluna é ID e o número da página não aparece mais na base do MXDataGrid.

Page 46: Leo62 P Web Matrix

Fecha a instância do browser da Web.

Page 47: Leo62 P Web Matrix

Como usar o Data Code Builder

Os Code Builders são geradores de código baseados em assistentes que ajudam a criar funções que executam tarefas comuns. O ASP.NET Web Matrix é distribuído com vários code builders incorporados – incluindo varios code builders especificamente desenhados para otimizar tarefas regulares de acesso com o uso do ADO.NET.

Neste capítulo, você irá utilizar o SELECT Code Builder para gerar o código necessário para recuperar informações da tabela OrderDetails e popular um DataGrid.

1. Selecione File->New para chegar ao diálogo "New File".2. Selecione (General) do painel Templates. 3. Selecione o modelo ASP.NET Page. 4. Digite um caminho de arquivo na caixa Location. 5. Digite myFirstDataPage.aspx na caixa Filename. 6. Selecione Visual Basic na caixa dorp-down Language. 7. Clique OK.

8. O arquivo myFirstDataPage.aspx se abrirá em modo de visualização Design.

9. A partir da guia Web Controls do Toolbox (à esquerda da ferramenta), arraste um controle TextBox, um controle DataGrid e um controle Button para a página ASP.NET. Aperte a tecla Enter entre cada um dos controles para criar um espaço entre eles.

Page 48: Leo62 P Web Matrix

10. Selecione a guia Code.

11. A partir da guia Code Builders do Toolbox, arrastre o Code Builder SELECT Data Method para a página ASP.NET.

Page 49: Leo62 P Web Matrix

12. Aparecerá a caixa de diálogo Connect to Database.

13. Digite localhost na caixa do Server (default).

14. Clique no botão de rádio Windows authentication. 15. Clique o drop-down Database. O ASP.NET Web Matrix fará a conexão com a fonte de dados

e irá popular o drow-down do Database com os nomes do banco de dados. Selecione o banco de dados Orders desenvolvido em capíulo anterior.

16. Clique OK.  17. Aparecerá o primeiro passo do Code Builder Wizard denominada caixa de diálogo

Construct SELECT Query.

Page 50: Leo62 P Web Matrix

18. Selecione OrderDetails na exibição da lista da Tables. 19. Selecione uma caixa de controle ao lado do item * na exibição da lista Columns. Com isso,

todas as colunas do banco de dados serão selecionadas. 20. Clique WHERE. 21. Aparecerá a caixa de diálogo WHERE Query Builder.

Page 51: Leo62 P Web Matrix

22. Selecione OrderID na exibição da lista Column.

Nota: esta opção configura a porção Left Operand da cláusula WHERE.

23. Selecione o botão de rádio Filter e digite @OrderID na caixa do filtro (default).

Nota: esta opção configura a porção Right Operand da cláusula WHERE. Passe este valor como o parâmetro da cláusula WHERE mais adiante, ainda neste capítulo.

24. Clique OK.

25. Volte para o passo Construct SELECT Query do Code Builder Wizard.

Page 52: Leo62 P Web Matrix

26. Clique Next. 

27. Aparecerá o segundo estágio do Code Builder Wizard; Query Preview. 28. Clique em Test Query. 29. Digite 1 dentro da caixa OrderID =. 30. Clique OK.

Page 53: Leo62 P Web Matrix

31. Aparecerá a linha OrderDetails correpondente à OrderID = 1 no resultado da grade de resultados da caixa de diálogo Query Preview.

Page 54: Leo62 P Web Matrix

32. Clique Next.

33. Aparecerá o terceiro estágio do Code Builder Wizard, denominada caixa de diálogo Enter A Caption. Digite GetOrderDetails em uma caixa de método de nomeação.

34. Selecione o botão de rádio DataSet (default). 35. Clique em Finish.

Page 55: Leo62 P Web Matrix

36. O Wizard se fechará e o ASP.NET Web Matrix irá incluir uma função chamada de GetOrderDetails na exibição Code. A função aceita uma orderID como parâmetro de input, retornando um DataSet como um parâmtero de output. O DataSet é populado com detalhes de dados do pedido para aquela orderID específica, utilizando o código de acesso a dados gerado pelo Code Builder:

37. Function GetOrderDetails(ByVal orderID As Integer) As System.Data.DataSet38. Dim connectionString As String = _39. "server='localhost'; trusted_connection=true; Database='Orders'"40. 41. Dim sqlConnection As System.Data.SqlClient.SqlConnection = _42. New System.Data.SqlClient.SqlConnection(connectionString)43. 44. Dim queryString As String = _45. "SELECT [OrderDetails].* " & _46. "FROM [OrderDetails] " & _47. "WHERE ([OrderDetails].[OrderID] = @OrderID)"48. 49. Dim sqlCommand As System.Data.SqlClient.SqlCommand = _50. New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)51. 52. sqlCommand.Parameters.Add("@OrderID", System.Data.SqlDbType.Int).Value =

orderID53. 54. Dim dataAdapter As System.Data.SqlClient.SqlDataAdapter = _55. New System.Data.SqlClient.SqlDataAdapter(sqlCommand)56. 57. Dim dataSet As System.Data.DataSet = New System.Data.DataSet58.

Page 56: Leo62 P Web Matrix

59. dataAdapter.Fill(dataSet)60. 61. Return dataSet62. End Function

63. Select the Design tab. 64. Dê um duplo-clique no Button para abrir o evento Button1_Click da exibição do Code. 65. Inclua código que verifica* o valor do TextBox, passando seu valor em forma de um

parâmetro para a função GetOrderDetails: 66. Sub Button1_Click(sender As Object, e As EventArgs)67.68. DataGrid1.DataSource = GetOrderDetails(CInt(TextBox1.Text))69. DataGrid1.DataBind()70.71. End Sub

72. Dê um Save e rode a página ASP.NET. 73. Sua página ASP.NET aparecerá automaticamente em uma nova instância de seu Web

browser. 74. Digite 1 no TextBox e clique no Button. 75. O DataGrid mostrará todas as linhas da tabela OrderDetails para aquela OrderID

específica.

Feche a instância do browser da Web.

Page 57: Leo62 P Web Matrix

Como formatar o DataGrid

Neste capítulo você irá alterar as opções de formatação para modificar a aparência do DataGrid.

1. Abra o arquivo myFirstDataPage.aspx em modo de exibição Design.

2. Selecione a guia Design. 3. Selecione o DataGrid. 4. Clique no link Auto Format na base da janela Properties. 5. Aparecerá a caixa de diálogo Auto Format. A caixa de diálogo Auto Format permite que

você selecione um conjunto pré-definido de cores, estilos de bordas e outras configurações (conhecidas por esquema – ou scheme) aplicando-as ao controle do DataGrid.

6. Selecione a opção Simple 1 no esquema ListBox. Ao selecionar um esquema, as configurações desse esquema são aplicadas às propriedades do controle. Note o preview da aparência do DataGrid após a aplicação do esquema.

7. Clique OK.

8. Dê um Save e rode a página ASP.NET.

9. Sua página ASP.NET aparecerá automaticamente em uma nova instância de seu browser da Web.

Page 58: Leo62 P Web Matrix

10. Digite 1 no TextBox e aperte o Button. Note que o MasterGrid implementa as opções de formatação do esquema Simple 1.

Feche a instância do browser da Web.

Page 59: Leo62 P Web Matrix

DataList e Templates

O controle de servidor DataList oferece controle adicional sobre dados originários de modelos pré-definidos pelo usuário. O template (modelo) permite controlar a aparência dos itens da lista, seu cabeçalho, rodapé, etc.

Neste Capítulo, você irá desenvolver um ItemTemplate que amarra um Label à coluna ProductName da tabela OrderDetails.

1. Abra o arquivo myFirstDataPage.aspx em modo de exibição Design.

2. Remova o DataGrid da página ASP.NET. 3. A partir da guia Web Controls do Toolbox, arraste um controle DataList para a página

ASP.NET. Coloque o DataList na mesma posição no formulário em que estava o DataGrid que foi deletado.

4. Clique com o botão direito do mouse em DataList e selecione Edit Templates.

5. Aparecerá a caixa de diálogo Edit Templates.

Page 60: Leo62 P Web Matrix

6. Selecione ItemTemplates da caixa drop-down Select a Template to edit.

7. Selecione o ItemTemplate da caixa drop-down Template Type. 8. Digite ProductName: na caixa Template Design. 9. A partir da guia Web Controls do Toolbox, arraste um controle Label para a caixa

Template Design, imediatamente à direita do ProductName:.

10. Selecione o Label na caixa Template Design.

11. Selecione a propriedade (DataBindings) na janela Properties.

Page 61: Leo62 P Web Matrix

12. Aparecerá a caixa de diálogo DataBindings. A caixa de diálogo DataBindings apresenta uma lista de propriedades de controle e permite que você especifique a quais propriedades da fonte de dados esses controles estão amarrados.

13. Selecione o nó Text na exibição em árvore do Bindable Properties (default).

14. Selecione o botão de rádio Custom binding expression.

Page 62: Leo62 P Web Matrix

15. Digite DataBinder.Eval(Container.DataItem, "ProductName") na caixa Custom binding expression. Esta expressão amarra o valor da coluna OrderDetailID à propriedade Text do controle Label para cada linha da tabela do banco de dados.

16. Clique OK.

Nota: O Label estará entre colchetes. Isso indica que o controle está agora amarrado aos dados.

17. Clique OK para fechar a caixa de diálogo Edit Templates.

18. Selecione a guia Code. 19. Modifique o código do evento de clicar do Button para que ele possa popular a DataList

resultando na chamada da função GetOrderDetails: 20. Sub Button1_Click(sender As Object, e As EventArgs)21.22. DataList1.DataSource = GetOrderDetails(CInt(TextBox1.Text))23. DataList1.DataBind()24.

End Sub

25. Selecione a guia HMTL.

26. Adicione atributos ao HTML da marca HTML do DataList HTML que renderiza uma margem preta:

27. <asp:DataList id="DataList1" runat="server"28. BorderColor="Black" BorderStyle="Solid" BorderWidth="2">29. </asp:datalist>

30. Dê um Save e rode a página ASP.NET. 31. Sua página ASP.NET aparecerá automaticamente em uma nova instância de seu browser da

Web. 32. Digite 1 no TextBox e aperte o Button. 33. O DataList exibirá todas as linhas da tabela OrderDetails para a OrderID. Específica.

Page 63: Leo62 P Web Matrix

Feche a instância do browser da Web.

Page 64: Leo62 P Web Matrix

O DropDownList do Code Builder

Neste capítulo você irá desenvolver um SELECT Code Builder capaz de popular uma DropDownList com OrderIDs da tabela Orders. Quando um item de um pedido é selecionado de uma lista drop-down, será filtrada uma Datalist com os dados corretos do OrderDetails.

1. Abra o arquivo myFirstDataPage.aspx em modo de exibição Design.

2. Remova o TextBox da página ASP.NET. 3. Remova o Button da página ASP.NET. 4. A partir da guia Web Controls do Toolbox, arraste um controle DropDownList para a

página ASP.NET. Coloque a DropDownList na mesma posição do formulário onde ele estava no TextBox que foi deletado.

5. Configure a propriedade AutoPostBack da DropDownList para True, com o uso da grade de propriedades (à direita da ferramenta).

6. Selecione a guia Code. 7. Remova o código do evento Button1_Click. 8. A partir da guia Code Builders do Toolbox, arraste um SELECT Data Method Code

Builder para a base da página ASP.NET. 9. Aparecerá a caixa de diálogo Connect to Database. 10. Digite localhost na caixa do Server (default).

Page 65: Leo62 P Web Matrix

11. Clique o drop-down Database. O ASP.NET Web Matrix fará a conexão à fonte de dados, populando o drop-down Database com nomes do banco de dados. Selecione o banco de dados Orders desenvolvido em um Capítulo anterior.

12. Clique OK. 13. Aparecerá o passo um do Code Builder Wizard; é a chamada caixa de diálogo Construct

SELECT Query.

14. Selecione Orders na última exibição de Tables.

15. Selecione o check-box que está ao lado do item OrderID na exibição da lista Columns. 16. Clique Next.  17. Aparecerá o passo dois do Code Builder Wizard denominada de caixa de diálogo Query

Preview. 18. Clique em Test Query. 19. Aparecerá a linha de Orders na grade de resultados da caixa de diálogo Query Preview.

Page 66: Leo62 P Web Matrix

20. Clique Next.

21. Aparecerá o passo três do Code Builder Wizard. Digite GetOrders na caixa do nome do método.

22. Selecione o botão de rádio DataSet (default). 23. Clique Finish.

Page 67: Leo62 P Web Matrix

24. O Wizard se fechará e o ASP.NET Web Matrix irá colocar uma função chamada de GetOrders em modo de exibição Code. Essa função não aceita parâmetros de input, devolvendo um DataSet como parâmetro de output. O DataSet é populado com todos os OrderIDs da tabela Orders:

25. Function GetOrders() As System.Data.DataSet26. Dim connectionString As String = _27. "server='localhost'; trusted_connection=true; Database='Orders'"28. 29. Dim sqlConnection As System.Data.SqlClient.SqlConnection = _30. New System.Data.SqlClient.SqlConnection(connectionString)31. 32. Dim queryString As String = "SELECT [Orders].[OrderID] FROM [Orders]"33. 34. Dim sqlCommand As System.Data.SqlClient.SqlCommand = _35. New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)36. 37. Dim dataAdapter As System.Data.SqlClient.SqlDataAdapter = _38. New System.Data.SqlClient.SqlDataAdapter(sqlCommand)39. 40. Dim dataSet As System.Data.DataSet = New System.Data.DataSet41. 42. dataAdapter.Fill(dataSet)43. 44. Return dataSet45. End Function

46. Selecione a guia Code.

Page 68: Leo62 P Web Matrix

47. Inclua um controlador de eventos do método Page_Load que possa popular o DropDownList com os resultados obtidos após a função GetOrders ter sido invocada na visita inicial (não-postback) à página ASP.NET:

48. Sub Page_Load(Sender As Object, E As EventArgs)49.50. If Not Page.IsPostBack Then51. DropDownList1.DataTextField = "OrderID"52. DropDownList1.DataSource = GetOrders()53. DropDownList1.DataBind()54. End If 55. 56. End Sub

57. Selecione a guia Design. 58. Dê um duplo clique no controle de servidor Dropdownlist para criar um controlador de

eventos SelectedIndexChanged. 59. Adicione o código necessário para o evento DropDownList SelectedIndexChanged que

amarra o DataList ao OrderID no DropDownList: 60. Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs)61.62. DataList1.DataSource =

GetOrderDetails(DropDownList1.Items(DropDownList1.SelectedIndex).Text)63. DataList1.DataBind()64.65. End Sub

66. Dê um Save e rode a página ASP.NET. 67. Sua página ASP.NET aparecerá automaticamente em uma nova instância de seu browser da

Web. 68. Selecione 1 no DropDownList. 69. O DataList irá exibir todas as linhas da tabela OrderDetails para a OrderID especificada.

Page 69: Leo62 P Web Matrix

Feche a instância do browser da Web.

Page 70: Leo62 P Web Matrix

XML Web Services

Como criar um novo XML Web service

A indústria da computação está convergindo para um novo modelo de desenvolvimento de software. Este modelo estabelece um padrão para a conexão de aplicações de software e para a troca de informações baseadas na Internet. Esta nova metodologia da Internet voltada à integração, chamada de XML Web services, possibilita que aplicações, máquinas e processos de negócios trabalhem em conjunto, através de mecanismos nunca antes possíveis no mercado.

Neste capítulo você terá a oportunidade de criar uma nova página ASP.NET XML Web service.

1. Abra o Microsoft ASP.NET Web Matrix. Aparecerá a caixa de diálogo New File. 2. Selecione (General) do painel Templates. 3. Selecione o modelo XML Web Service. 4. Digite um caminho de arquivo na caixa Location. 5. Digite myFirstWebService.asmx na caixa Filename. 6. Selecione Visual Basic na caixa drop-down Language. 7. Digite Sample na caixa Class. 8. Digite MatrixDemo na caixa Namespace.

Clique OK. O arquivo myFirstWebService.asmx se abrirá em modo de exibição Code.

Page 71: Leo62 P Web Matrix

O WebMethod 'Subtract'

Neste capítulo, você irá criar um novo WebMethod que retorna uma tipagem simples; um Integer que representa a diferença de dois números.

1. Abra o arquivo myFirstWebService.asmx em modo de exibição Code.

2. Adicione código para um WebMethod chamado Subtract. Essa função tem dois parâmetros de input e um parâmetro de output, contendo a diferença dos dois parâmetros de input. Todos os parâmetros são de tipagem Integer:

3. <WebMethod> Public Function Subtract(a As Integer, b As Integer) As Integer 4. Return a - b5. End Function

6. Dê um Save e rode o XML Web Service (aperte o botão “Iniciar” ou aperte a tecla F5 para iniciar o processo).

7. Aparecerá, automaticamente, em uma nova instância de seu browser, uma página dinamicamente gerada que descreve seu XML Web Service.

8. Você irá visualizar o arquivo de descrição em do XML Web service em HTML, contendo os dois métodos (Add e Subtract).

9. Clique no link Subtract no alto do arquivo descritivo em HTML. Será apresentada uma página de detalhes sobre o método da Web ‘Subtract’ – incluindo todos os detalhes do esquema de payload do SOAP utilizado para invocá-lo, além de um formulário em HTML para invocar e testar este método.

Page 72: Leo62 P Web Matrix

10. Digite 8 na caixa de parâmetros a.

11. Digite 3 na caixa de parâmetros b. 12. Clique em Invoke.  13. O Web service irá retornar uma resposta em XML que apresentará a diferença dos dois

parâmetros de input em uma nova instância do browser da Web.

Page 73: Leo62 P Web Matrix

Feche a instância do browser da Web.

Page 74: Leo62 P Web Matrix

O acesso a dados pelo WebMethod

Neste capítulo, você irá criar um WebMethod que retorna uma tipagem complexa: um DataSet representando linhas na tabela do banco de dados Orders.

1. Abra o arquivo myFirstWebService.asmx em modo de exibição Code.

2. A partir da guia Code Builders do Toolbox, arraste um Code Builder SELECT Data Method para a página XML Web Service.

3. Aparecerá a caixa de diálogo Connect to Database. 4. Digite localhost na caixa do Server (default). 5. Clique no drop-down do Database. O ASP.NET Web Matrix fará a conexão à fonte de dados,

e irá popular o drop-down Database com nomes do banco de dados. Selecione o banco de dados Orders criado em um capítulo anterior.

6. Clique OK. 7. Aparecerá o primeiro estágio do Code Builder Wizard denominado caixa de diálogo

Construct SELECT Query.

8. Selecione Orders na exibição da lista Tables.

9. Selecione o check-box ao lado do item * na exibição da lista Columns. 10. Clique Next.  11. Aparecerá o passo dois do Code Builder Wizard chamado de caixa de diálogo Query

Preview.

Page 75: Leo62 P Web Matrix

12. Clique em Test Query. 13. Aparecerão as linhas de Orders na grade de resultados da caixa de diálogo Query

Preview.

14. Clique em Next.

15. Aparecerá o passo três do Code Builder Wizard denominado caixa de diálogo Enter A Caption. Digite GetOrders na caixa do nome do método.

16. Seleccione o botão de rádio DataSet (default). 17. Clique em Finish.

Page 76: Leo62 P Web Matrix

18. O Wizard fechará e o ASP.NET Web Matrix irá trazer uma função chamada GetOrders em modo de exibição Code. Essa função não aceita parâmetros de input e retorna um DataSet como parâmetro de output. O DataSet é populado com todos os pedidos da tebela Orders.

19. Inclua um atributo WebMethod à função GetOrders. O WebMethod não aceita parâmetros de input e retorna um DataSet como parâmetro de output. O DataSet é populado com todas as linhas da tabela Orders:

20. <WebMethod> Function GetOrders() As System.Data.DataSet21. Dim connectionString As String = _22. "server='localhost'; trusted_connection=true; Database='Orders'"23. 24. Dim sqlConnection As System.Data.SqlClient.SqlConnection = _25. New System.Data.SqlClient.SqlConnection(connectionString)26. 27. Dim queryString As String = "SELECT [Orders].* FROM [Orders]"28. Dim sqlCommand As System.Data.SqlClient.SqlCommand = _29. New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)30. 31. Dim dataAdapter As System.Data.SqlClient.SqlDataAdapter = _32. New System.Data.SqlClient.SqlDataAdapter(sqlCommand)33. 34. Dim dataSet As System.Data.DataSet = _35. New System.Data.DataSet36. 37. dataAdapter.Fill(dataSet)38. 39. Return dataSet40. End Function

Page 77: Leo62 P Web Matrix

41. Dê um Save e rode a página com o XML Web Service. 42. Aparecerá, automaticamente, em uma nova instância de seu browser da Web, a sua página

XML Web Service. 43. Você poderá visualizar um arquivo descritivo do XML Web service em HTML. A página

descritiva em HTML do XML Web service apresenta todos os métodos suportados por um XML Web service em particular.

44. Clique no link GetOrders situado no alto do arquivo descritivo em HTML.

45. Clique em Invoke. 

Page 78: Leo62 P Web Matrix

46. O Web service irá retornar uma resposta em XML que apresenta todas as linhas da tabela Orders em uma nova instância de seu browser da Web.

Page 79: Leo62 P Web Matrix

Feche a instância do browser da Web.

Page 80: Leo62 P Web Matrix

Como criar um cliente Web service

Neste Capítulo você irá gerar uma classe proxy de um XML Web service e utilizá-la a partir de uma ASP.NET page para invocar o XML Web service desenvolvido no capítulo anterior. Este XML Web Service poderia residir em qualquer servidor remoto, oferecendo uma maneira simples e poderosa de distribuir código e propiciar acesso a dados em uma rede.

1. Abra o Microsoft ASP.NET Web Matrix. Aparecerá a caixa de diálogo New File 2. Selecione (General) no painel Templates. 3. Selecione o modelo ASP.NET Page. 4. Digite um caminho de arquivo na caixa Location. 5. Digite myFirstWSClient.aspx na caixa Filename. 6. Selecione Visual Basic na caixa drop-down Language. 7. Clique OK. O arquivo myFirstWSClient.aspx se abrirá no modo de exibição Design.

8. Com a guia Web Controls do Toolbox, arraste um controle DataGrid e um controle Button para a página ASP.NET. Aperte a tecla Enter para criar um espaço entre cada um desses controles.

Page 81: Leo62 P Web Matrix

9. Selecione a guia Code.

10. Escolha o item do menu WebService Proxy Generator do menu Tools. 11. Aparecerá a caixa de diálogo XML Web Service Proxy Generator.

Page 82: Leo62 P Web Matrix

12. Digite o nome da URL totalmente qualificada para o Web service desenvolvido anteriormente neste capítulo, na caixa WSDL URL. Por exemplo: http://localhost:8080/myFirstWebService.asmx

Nota WSDL é o acrônimo de Web Services Description Language. O WSDL define como um XML Web service se comporta e instrui seus clientes sobre como interagir com esse serviço. Você poderá acessar o WSDL para um Web service ligando um parâmetro WSDL de uma query string a uma URL do Web service. Por exemplo: http://localhost:8080/myFirstWebService.asmx?WSDL

13. Digite MatrixDemo na caixa Namespace.

14. Selecione Visual Basic .NET na caixa drop-down Language. 15. Digite um caminho de arquivo na caixa Output Directory.

Importante: o ASP.NET Web Matrix necessita que os arquivos proxy residam no mesmo caminho de arquivo que a página ASP.NET que as invoca.

16. Aceite os valores default da Source File e das caixas Generate Assembly.

17. Clique em Generate.  18. Aparecerá uma caixa de mensagens confirmando a geração bem sucedida do proxy do Web

service.

19. Clique OK.

20. Clique Cancel para fechar a caixa de diálogo do XML Web Service Proxy Generator.

Page 83: Leo62 P Web Matrix

21. Seleccione a guia Design e dê um duplo clique no controle Button. O ASP.NET Web Matrix irá acionar, automaticamente um controlador de eventos para o evento de clicar o Button e abrir a página em modo de exibição Code.

22. Insira código no evento Button1_Click que invoca o objeto Proxy do Web Service recém-gerado, e que amarra os resultados de chamada do WebMethod GetOrders ao DataGrid:

23. Sub Button1_Click(sender As Object, e As EventArgs)24.25. 'Declaration format: Dim variablename As New Namespace.Class26. Dim wsProxy As New MatrixDemo.Sample()27. 28. DataGrid1.DataSource = wsProxy.GetOrders()29. DataGrid1.DataBind()30.

End Sub

31. Dê um Save e execute a página ASP.NET.

32. Sua página ASP.NET aparecerá automaticamente em uma nova instância de seu browser da Web.

33. Clique no Button. 34. O DataGrid mostrará todas as linhas da tabela Orders.

Feche a instância do browser da Web.

Page 84: Leo62 P Web Matrix

Desenvolvimento ASP.NET Mobile

Criando uma nova página Mobile

Para criar páginas da Web programáveis, que sirvam como a interface de usuário para as aplicações móveis, você poderá usar as Mobile pages. Uma Mobile page apresenta as informações aos usuários de dispositivos móveis tais como telefones celulares e PDAs, implementando a lógica das aplicações com o uso de código do lado do servidor.

Este capítulo requer o uso do ASP.NET Mobile Internet Toolkit (MMIT) 1.0. Se necessário, faça o download e a instalação do MMIT no site www.asp.net.

Neste capítulo você irá criar uma nova Mobile page.

1. Abra o Microsoft ASP.NET Web Matrix. Aparecerá uma nova caixa de diálogo New File.2. Selecione Mobile Pages a partir do painel Templates. 3. Selecione o modelo Simple Mobile Page. 4. Digite um caminho de arquivo na caixa Location. 5. Digite myFirstMobilePage.aspx na caixa Filename. 6. Selecione Visual Basic na caixa drop-down Language. 7. Clique OK. O arquivo myFirstMobilePage.aspx se abrirá em modo de exibição Design.

Page 85: Leo62 P Web Matrix

Adicionando Mobile Controls

Neste Capítulo você irá acrescentar um controle de servidor ObjectList à Mobile page desenvolvida no capítulo anterior.

1. A partir da guia Mobile Controls do Toolbox, arraste um controle ObjectList para a página Mobile do formulário, chamada Form1.

2. Configure a propriedade ID do ObjectList para OrderList.

3. Selecione a guia Code. 4. A partir da guia Code Builders do Toolbox, arraste um Code Builder SELECT Data

Method para o botão da página ASP.NET. 5. Aparecerá uma caixa de diálogo Connect to Database. 6. Digite localhost na caixa do Server box (default). 7. Clique no drop-down Database. O ASP.NET Web Matrix fará a conexão à fonte de dados e

irá popular o drop-down Database com nomes do banco de dados. Selecione o banco de dados Orders.

8. Clique OK. 9. Aparecerá o primeiro passo do Code Builder Wizard denominado caixa de diálogo

Construct SELECT Query. 10. Selecione Orders na exibição da lista Tables. 11. Selecione o check-box ao lado do item * da exibição da lista Columns. 12. Clique Next. 13. Aparecerá o passo dois do Code Builder Wizard denominado caixa de diálogo Query

Preview.

Page 86: Leo62 P Web Matrix

14. Clique em Test Query. 15. Aparecerá a linha Orders rows na grade de resultados da caixa de diálogo Query Preview. 16. Clique Next. 17. Aparecerá o passo três do Code Builder Wizard. Digite na caixa do nome do método

GetOrders. 18. Selecione o botão de radio DataSet (default). 19. Clique em Finish. 20. O Wizard se fechará e o ASP.NET Web Matrix irá incluir uma finção chamada GetOrders na

exibição Code. Esta função não aceita parâmetros de input e devolve um DataSet como parâmetro de output. O DataSet é populado com todas as OrderIDs da tabela Orders:

21. Function GetOrders() As System.Data.DataSet22. Dim connectionString As String = _23. "server='localhost'; trusted_connection=true; Database='Orders'"24. 25. Dim sqlConnection As System.Data.SqlClient.SqlConnection = _26. New System.Data.SqlClient.SqlConnection(connectionString)27. 28. Dim queryString As String = "SELECT [Orders].* FROM [Orders]"29. 30. Dim sqlCommand As System.Data.SqlClient.SqlCommand = _31. New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)32. 33. Dim dataAdapter As System.Data.SqlClient.SqlDataAdapter = _34. New System.Data.SqlClient.SqlDataAdapter(sqlCommand)35. 36. Dim dataSet As System.Data.DataSet = New System.Data.DataSet37. 38. dataAdapter.Fill(dataSet)39. 40. Return dataSet41. End Function

42. Inclua o código do evento Page_Load que liga o ObjectList nos resultados da função de chamada GetOrders:

43. Sub Page_Load(Sender As Object, E As EventArgs)44.45. OrderList.DataSource = GetOrders()46. OrderList.DataBind() 47.48. End Sub

49. Clique no botão Start ou aperte a tecla F5 para rodar esta página. Esse procedimente irá testar a página com um cliente de browser da Web.

50. Clique no link OrderID para visualizar os detalhes da tabela Orders

Page 87: Leo62 P Web Matrix

51. Alternativamente, você poderá testar esta página em um emulador de um dispositivo móvel, ou com um telefone celular ou PDA. A página irá ajustar seu markup de saída, automaticamente. (emitindo WML para dispositivos WAP, por exemplo).

Feche a instância do browser da Web.

Page 88: Leo62 P Web Matrix

Testando a página Mobile e

Um emulador on-line pode oferecer uma representação precisa da experiência de um usuário móvel, como podemos perceber em uma grande quantidade de dispositivos portáteis.

Neste Capítulo, você poderá testar a página myFirstMobilePage.aspx utilizando a tecnologia de emulação on-line oferecida pela SmartPhone. Note que este emulador necessita do IIS para que ele possa servir sua página móvel no lugar ASP.NET Web Matrix Web Server.

1. Abra o arquivo myFirstMobilePage.aspx.

2. Inicie o emulador on-line.

3. Aperte o link GoURL.

4. Digite a URL de myFirstMobilePage instalada no IIS em um capítulo anterior.

5. Sua página Mobile irá aparecer automaticamente na janela da tela de seu emulador do dispositivo.

Page 89: Leo62 P Web Matrix

6. Clique no link OrderID na janela do emulador do dispositivo para visualizar os detalhes da tabela Orders.

Nota: Clique nos botões de navegação do emulador do dispositivo para rolar através dos detalhes dos pedidos.

Page 90: Leo62 P Web Matrix

Feche a instância do emulador on-line.

Page 91: Leo62 P Web Matrix

ISP/FTP Hosting

Connectando-se a um provedor de hosting

O ASP.NET Web Matrix oferece acesso a instâncias remotas hospedadas de seus arquivos de aplicações da Web através do FTP (File Transport Protocol). A partir do ASP.NET Web Matrix você poderá abrir, editar e publicar arquivos remotos.

Neste capítulo você irá criar uma nova conexão FTP para modificar uma ASP.NET page que está hospedada.

1. Selecione Add FTP Connection do menu Workspace.

2.

3. Aparecerá a a caixa de diálogo New FTP Connection.

4. Digite um site FTP na caixa FTP Site.

5. Digite uma porta FTP na caixa Port. O Port default é 21. 6. Digite um nome de usuário FTP na caixa User Name. 7. Digite uma senha para o site FTP na caixa Password. 8. Digite uma URL de Web site que seja válida e totalmente qualificado na caixa Web URL.

Esta deverá ser a localização do endereço da Web desta URL no servidor remoto. Ele será usado pelo ASP.NET Web Matrix para resolver páginas em execução.

9. Clique OK.10. Aparecerá um novo nó na guia Workspace da janela Workspace que representa o

diretório-raiz desta URL especificada na caixa de diálogo New FTP Connection. Qualquer nó-filho representa os sub-arquivos externos ao diretório-raiz.

Page 92: Leo62 P Web Matrix
Page 93: Leo62 P Web Matrix

Modificando uma página ASP.NET hospedada

Neste Capítulo, você irá modificar uma página ASP.NET page por meio de uma conexão FTP estabelecida no capítulo anterior.

1. Na janela Workspace, arraste o arquivo myFirstPage.aspx desenvolvido na seção Your First ASP.NET Page deste Tour, a partir de seu diretório local de sistemas de arquivos, soltando-o no FTP Workspace. Essa ação irá copiar o arquivo no site FTP de seu provedor de Hosting.

2. Dê um duplo clique no arquivo myFirstPage.aspx do FTP Workspace para abri-lo em modo de exibição Design.

3. Rode a página, apertando o botão Iniciar – ou apertando a tecla F5. Isso irá levá-lo automaticamente ao arquivo remotamente hospedado myFirstPage.aspx de seu browser da Web.

Page 94: Leo62 P Web Matrix

4. Volte ao ASP.NET Web Matrix e selecione a guia HTML.

5. Adicione um atributo da guia <body> que define a cor de fundo como vermelha (Red): 6. <body bgcolor="Red">

7. Salve a página ASP.NET. 8. Rode a página novamente, apertando o botão Iniciar, ou pressionando a tecla F5. Você

perceberá que a página remota tem agora um fundo vermelho.

Page 95: Leo62 P Web Matrix

Feche esta instância do browser da Web.

Page 96: Leo62 P Web Matrix

Desconectando-se de um provedor de hosting

Neste Capítulo, você se desconectará de um provedor de hosting baseado na conexão de FTP estabelecida no Capítulo anterior.

1. Clique com o botão direito do mouse no nó da raiz do site de hosting FTP da janela Workspace.

2. Selecione Delete.

Page 97: Leo62 P Web Matrix

Ajuda & Community

Modelos de Arquivos

O ASP.NET Web Matrix dispõe de vários modelos de arquivos que podem ser usados para dar a partida ao seu aprendizado no desenvolvimento de suas aplicações da Web para o ASP.NET. Um modelo de arquivo cria os primeiros arquivos, referências, modelos de código, configurações de propriedades e tarefas necessárias para iniciar uma determinada atividade.

Ao criar um novo arquivo, os ícones da caixa de diálogo New File representam a disponibilidade de arquivos de tarefas. Por exemplo, veja abaixo quais são os modelos de arquivos (File Templates) da categoria geral (General):

O modelo de arquivo associado ao ícone escolhido determina o tipo de output e outras opções disponíveis para aquele projeto. Ao selecionar um modelo de arquivo, aparece uma breve descrição daquele item ao lado da moldura Templates.

Nota: este Tour utiliza apenas um pequeno subset dos modelos de arquivos disponíveis, incluindo a ASP.NET Page (veja o capítulo Como criar uma nova página ASP.NET), o XML Web Service (veja o capítulo Como criar um novo XML Web service), a Simple Mobile Page (veja o capítulo Criando uma nova página Mobile) e os Master-Details Grid Data Report (veja no capítulo Criando uma página Default na seção Como construir uma aplicação simples).

Os modelos de arquivos ASP.NET Web Matrix estão agrupados em seis categorias:

Geral: utilizada para desenvolvimento de de páginas ASP.NET de uso geral, XML Web Services, arquivos HTML, arquivos de Classes reutilizáveis, Folhas de Estilo e arquivos XML.

Páginas de dados: categoria utilizada para recuperar e manipular dados de um banco de dados no DataGrids.

Páginas Mobile: utilizada para desenvolvimento de aplicações de uso geral, destinadas a dispositivos móveis tais como telefones celulares, etc.

Output Caching: utilizada para aumentar a performance de páginas ASP.NET, por efetuar o caching de solicitações de uma determinada página, de forma que o código que inicialmente cria a página não tenha que rodar sob os requisitos subseqüentes.

Segurança: utilizada para construir as páginas de login e logout de uma aplicação que requer autenticação baseada em formulários (Forms Based Authentication).

Page 98: Leo62 P Web Matrix

Web Services: utilizada para a autoria de um XML Web service que poderá ser consumido por outros Web services ou aplicações em uma rede.

Page 99: Leo62 P Web Matrix

Community

Community é nossa plataforma de lançamento para propiciar a comunicação sobre ASP.NET, outros produtos, tecnologias e serviços Microsoft, com colegas, profissionais e especialistas em fóruns abertos para ampla discussão e troca de idéias.

Você poderá acessar o Community diretamente, a partir do ambiente de desenvolvimento ASP.NET Web Matrix, bastando selecionar a guia Community. A guia Community está localizada no canto inferior direito do ambiente de desenvolvimento ASP.NET Web Matrix.

1. Clique no botão ASP.NET Web Matrix Online and Discussion Forums (default).

2. Você irá visualizar a atualização da janela Community com recursos on-line que são específicos ao ASP.NET Web Matrix.

3. Clique no botão Related Links.

4. Você verá uma atualização da janela Community com recursos on-line relacionados ao ASP.NET e a outras tecnologias .NET.

Page 100: Leo62 P Web Matrix

5. Clique no botão Contacts.

6. Você irá visualizar a janela de atualização Commmunity com os contatos presentes em seu grupo My ASP.NET Contacts do Windows Messenger. 

Page 101: Leo62 P Web Matrix

Pesquisar

Você poderá obter respostas às suas dúvidas em ASP.NET, pewauisando a comunidade on-line Microsoft a partir do próprio ambiente de desenvolvimento ASP.NET.

1. Digite XML Web Service na caixa Type keywords to search online help da barra de ferramentas Standard.

2. Aperte a tecla Enter.

3. Você poderá ver os resultados de sua pesquisa aparecerem um uma instância de seu browser da Web.

Nota: O recurso Pesquisar requer que as consultas sobre o ambiente de desenvolvimento ASP.NET sejam feitas à área dos Forums do Web site www.asp.net

Page 102: Leo62 P Web Matrix

My Snippets

My Snippets é um recurso que permite que você importe trechos de código para seus arquivos, bastando arrastá-los e soltá-los em seus arquivos. Você também poderá criar seus próprios blocos de código, e exportá-los para qualquer XML File, permitindo que outros desenvolvedores também possam importar e usar estes fragmentos de código em suas aplicações.

Neste capítulo você irá incluir um novo bloco de código em um arquivo, e importar um bloco de código para um arquivo.

1. Abra o Microsoft ASP.NET Web Matrix. Aparecerá uma nova caixa de diálogo New File. 2. Selecione (General) do painel Templates. 3. Seleccione o modelo ASP.NET Page. 4. Digite um caminho de arquivo na caixa Location. 5. Digite myFirstSnippet.aspx na caixa Filename. 6. Selecione Visual Basic na caixa dropd-down Language. 7. Clique OK. O arquivo myFirstSnippet.aspx será aberto em modo de exibição Design.

8. A partir da guia Web Controls do Toolbox, arraste um controle Label para a página ASP.NET.

9. Selecione a guia HTML. 10. Selecione a guia My Snippets do Toolbox. 

Page 103: Leo62 P Web Matrix

11. Da guia HTML, selecione o código que renderiza o controle Label.

12. Arraste o código selecionado para a guia My Snippets do Toolbox. 

13. Na guia My Snippets, aparecerá um novo trecho de código.

Nota: a quantidade de código visível dos snippets na guia My Snippets depende da largura do Toolbox.

Page 104: Leo62 P Web Matrix

14. Clique com o botão direito do mouse sobre o trecho de código, na guia My Snippets.

15. Selecione Rename. 16. Digite MyFirstSnippet. 17. Clique com o botão direito do mouse em MyFirstSnippet da guia My Snippets. 18. Seleccione Exports Snippets to a file.

19. Aparecerá o primeiro estágio do Export Snippets Wizard, denominada caixa de diálogo Select Snippets.

20. Selecione o check-box ao lado do item MyFirstSnippet no painel de snippets. 21. Clique Next.

Page 105: Leo62 P Web Matrix

22. Aparecerá o segundo estágio do Export Snippets Wizard, a caixa de diálogo chamada Select Export File.

23. Digite um caminho de arquivo na caixa. 24. Clique Finsh. 

25. O ASP.NET Web Matrix irá exportar o snippet selecionado para o arquivo especificado.

Nota: A extensão de arquivo para um arquivo de snippet exportado é snippets.

Page 106: Leo62 P Web Matrix

26. Navegue até o arquivo na janela Workspace para abrir o arquivo.

Importante: ao usar o Windows Explorer para abrir arquivos snippets, a extensão destes poderá não estar associada a um programa. O Microsoft Windows não poderá abrir um arquivo sem que haja um programa a ele associado. Se necessário, dê um duplo clique no Windows Explorer e o Microsoft Windows irá pedir que você crie uma associação.

27. Você irá perceber que o arquivo do código de snippets tem uma estrutura XML: 28. <?xml version='1.0' encoding='UTF-8'?>29. <Snippets>30. <Snippet name="MyFirstSnippet">31. <asp:Label id="Label1" runat="server">Label</asp:Label>32. </Snippet>33. </Snippets>

34. Clique com o botão direito do mouse em MyFirstSnippet na guia My Snippets. 35. Selecione Remove. 36. Clique com o botão direito do mouse na guia My Snippets do Toolbox. 37. Selecione Import Snippets to a file.

38. Aparecerá o primeiro estágio do Import Snippets Wizard, chamado de caixa de diálogo Select Import File.

39. Digite ou navegue até o arquivo MyFirstSnippet.snippets exportado no capítulo anterior. 40. Clique Next. 

Page 107: Leo62 P Web Matrix

41. Aparecerá o segundo estágio do Import Snippets Wizard, denominado caixa de diálogo Select Snippets.

42. Selecione o check-box que está ao lado do item MyFirstSnippet no painel de snippets. 43. Clique Finsh. 

44. O ASP.NET Web Matrix irá importar os snippets selecionados do arquivo especificado, exibindo-os em forma de item na guia My Snippets.

45. Selecione a guia HTML. 46. Delete o código que renderiza o controle Label.

Page 108: Leo62 P Web Matrix

47. Selecione o item MyFirstSnippet na guia My Snippets. 48. Arraste o snippet selecionado para a guia HTML. Coloque o snippet na mesma posição em

que estava o código que foi deletado, aquele que renderiza o controle Label.

Page 109: Leo62 P Web Matrix

Class Browser

O ASP.NET Web Matrix Class Browser permite que você examine e descubra classes e seus respectivos membros (propriedades, métodos, eventos, variáveis, contantes, itens enum, etc.). O ambiente de múltiplas janelas simplifica o agrupamento, a pesquisa e a seleção de classes. Esta ferramenta também fornece links a recursos de ajuda on-line e local para cada membro da classe.

1. Selecione o grupo de programa Microsoft ASP.NET Web Matrix do Start Menu.

2. Selecione ClassBrowser. 3. Aparecerá o ASP.NET Web Matrix Class Browser. O ASP.NET Web Matrix Class

Browser abrange três áreas funcionais:

• Toolbar (1): contém atalhos para a funcionalidade de busca, sorting e agrupamento.• Classes Treeview (2): exibe as classes em forma de nós-pai e seus membros na forma de nós-filho. • Member Information Window (3): exibe informações detalhadas para um item selecionado no Classes Treeview, incluindo links para recursos de ajuda locais e on-line.

4. Expanda o nó System.Data do Classes Treeview.

5. Dê um duplo clique no nó DataSet.

Aparecerá o Member Information Window, que também contém, por sua vez, três áreas funcionais:

Page 110: Leo62 P Web Matrix

• Member Treeview (4): que exibe o membro como nó-pai, e seus Campos, Construtores, Propriedades e Eventos como nós-filho. • Member Information Tab (5): exibe o Namespace, Assembly, a Hierarquia e o os detalhes de Atributo para o membro. Ele também exibe links para os recursos de ajuda on-line e local para seu membro. • Member IL Tab (6): exibe detalhes do Intermediate Language (IL) para seu membro. O IL é um metadado que descreve o membro ao compilador. Ao executar o código, o runtime carrega os metadados na memória, e traça referências para que ele possa descobrir suas classes de código, seus membros, sua herança, etc.

Page 111: Leo62 P Web Matrix

Construindo uma aplicação de ponta a ponta

Sobre a AplicaçãoNesta seção do início rápido, vamos descobrir como você poderá criar uma aplicação da Web em ASP.NET, de ponta a ponta. A aplicação-piloto que iremos construir é uma simples página de reporting que oferece aos clientes informações sobre seus pedidos.

A aplicação restringe o acesso à informação de reportar dados, o que significa que só os usuários autenticados poderão visualizá-la. As credenciais para a autenticação (nomes de usuário e senhas) estão armazenadas em um banco de dados “Users” (o que significa que os usuários não têm que ter uma conta Windows para fazer o login).

A aplicação ASP.NET application será, posteriormente configurada para para utilizar a atuenticação baseada em formulários Html. Isso nos permite criar um login html atraente para quando os usuários entrarem com seu nome de usuário e senha. Este método oferece um mecanismo ideal de login e de segurança na criação de aplicações Web para instalação na Internet.

Embora esse cenário de aplicação seja bastante simples (apenas uma página master/details de reporting), o próprio código da aplicação deveria servir de modelo útil na inclusão de autenticação de segurança baseada na Internet a qualquer aplicação ASP.NET que você venha a construir no futuro.

Page 112: Leo62 P Web Matrix

Como criar uma tabela 'Users' em um banco de dados

Neste capítulo de nosso Tour, vamos percorrer os caminhos da criação de uma aplicação ASP.NET, de ponta a ponta. A aplicação-cenário que iremos construir irá oferecer um serviço de reporting a usuários registrados sobre seus pedidos.

Neste capítulo, você irá criar uma nova tabela de banco de dados chamada Users no banco de dados Orders. Em seguida, utilizaremos esta tabela de banco de dados para armazenar nomes de usuários/senhas para os usuários registrados, e utilizar o sistema de Forms Authentication, incluído no ASP.NET, para permitir o login dos usuários.

1. Conecte-se ao banco de dados Orders criado em um capítulo anterior deste Tour.

2. Clique no nó Tables da exibição da janela Data e clique no botão New Item na barra de ferramentas da janela Data.

3. Aparecerá a caixa de diálogo Create New Table.

4. Digite Users na caixa Table Name.

5. Clique no botão New da área Columns da caixa de diálogo. 6. Digite UserID na caixa Name da área Column Properties da caixa de diálogo. 7. Selecione Int do drop-down Data Type. 8. Selecione o check-box Required e, em seguida, selecione as caixas de verificação Primary

Key e Auto-increment. 9. Clique New para seguir adicionando colunas.10. Adicione uma Segunda coluna à tabela Users chamada UserName, com as seguintes

propriedades:

. Name: UserName

. Data Type: VarChar

. Required: True (assinalada)

Page 113: Leo62 P Web Matrix

. Primary Key: False (não assinalada)

. Field Size: 8

11. Adicione uma terceira coluna a tabela Users chamada UserPassword com as seguintes propriedades:

. Name: UserPassword

. Data Type: VarChar

. Required: True (assinalada)

. Primary Key: False (não assinalada)

. Field Size: 25

12. Clique OK para salvar a tabela Users no banco de dados Orders.

13. A tabela Users aparece como um nó-filho de Tables na janela Data.

Page 114: Leo62 P Web Matrix

Entrando com os dados do usuário

Neste capítulo você irá acrescentar dados à sua tabela Users do banco de dados Orders.

1. Edite a tabela Users. Há duas maneiras de editar uma tabela de banco de dados no ambiente de desenvolvimento ASP.NET Web Matrix:

a. Clique no botão Edit da barra de ferramentas da janela Data. b. Dê um duplo clique no nome da tabela da exibição em árvore da janela Data.

2. Aparecerá a caixa de diálogo Edit Table. O diálogo Edit Table apresenta uma grade de dados que contém os dados da tabela. As modificações feitas em dados da grade de dados Edit Table refletem diretamente no banco de dados.

3. Acrescente duas novas linhas de dados à tabela Users.

Nota: Aperte a tecla Enter ou selecione uma linha diferente na grade de dados para incluir uma nova linha no banco de dados.

Nota: A coluna UserID está configurada para se auto-incrementar (começando em 1 e incrementando de 1 em 1). O banco de dados automaticamente determina e atribui o próximo valor a um campo auto-incremental toda vez que uma nova linha é comprometida ao banco de dados. Os valores auto-incrementais são apenas para leitura na grade de dados do diálogo Edit Table e terão valor negativo até que seja adicionada uma nova linha ao banco de dados.

Nota: Clique no link Edit/View Table Design na base do diálogo Edit Table para visualizar a definição da tabela enquanto ela estiver em modo de edição. Não é possível editar uma definição de tabela se houver dados nesta tabela.

Page 115: Leo62 P Web Matrix

Clique em Close.

Page 116: Leo62 P Web Matrix

Como criar uma página Master/Detail

Neste capítulo você irá criar uma nova Data Page com base no modelo de projeto Master - Details Grid. Você irá amarrar a Data Page às tabelas Orders e OrderDetails do banco de dados Orders.

1. Selecione New do menu File. Aparecerá uma caixa de diálogo New File. 2. Selecione Data Pages do painel Templates. 3. Selecione o modelo Master - Details Grids. 4. Digite um caminho de arquivo na caixa Location. 5. Digite Default.aspx na caixa Filename. 6. Selecione Visual Basic na caixa drop-down Language. 7. Clique OK. O arquivo Default.aspx sera aberto em modo de exibição Design.

8. Selecione a guia Code.

Nota: O ASP.NET Web Matrix incluiu automaticamente um código para amarrar o MasterGrid a uma sub-rotina chamada BindMasterGrid e amarrar o DetailsGrid a uma sub-rotina chamada BindDetailGrid.

9. Modifique as variáveis ConnectionString e CommandText da sub-rotina BindMasterGrid para que elas possam se referenciar às colunas da tabela Orders do banco de dados Orders.

10. Dim ConnectionString As String = "server=(local);database=Orders;Integrated Security=SSPI"

11.12. Dim CommandText As String = "select OrderID, OrderDate, CustomerName from

Orders"13. Modifique as variáveis ConnectionString and CommandText na sub-rotina BindDetailGrid para que elas possam se referenciar às colunas da tabela OrderDetails do banco de dados Orders.

14. Dim ConnectionString As String = "server=(local);database=Orders;Integrated Security=SSPI"

15.16. Dim CommandText As String = "select OrderDetailID, ProductName, Quantity,

UnitPrice " & _

Page 117: Leo62 P Web Matrix

17. "from OrderDetails where OrderID = '" & filterValue & "'" 18. Selecione a guia Design.

19. Configure a propriedade DataKeyField do MasterGrid para OrderID. A propriedade DataKeyField é utilizada para filtrar linhas da grade de detalhes.

20. Substitua o texto do cabeçalho da página (Master - Detail Grids) pelo controle Label da guia Web Controls do Toolbox.

21. Configure a propriedade ID do Label para Welcome.

Page 118: Leo62 P Web Matrix

22. Selecione a guia Code.

23. Modifique o código do evento Page_Load para que ele possa acionar a propriedade Text do Label para o nome de usuário do atual usuário, amarrando as grades de dados:

24. Sub Page_Load(Sender As Object, E As EventArgs)25.26. Welcome.Text = "Hello, " + User.Identity.Name27.28. If Not Page.IsPostBack Then29.30. ' Databind the master grid on the first request only31. ' (viewstate will restore these values on subsequent postbacks).32.33. MasterGrid.SelectedIndex = 034. BindMasterGrid()35. BindDetailGrid()36.37. End If38.39. End Sub

40. Dê um Save e rode a página ASP.NET. 41. Sua página irá aparecer, automaticamente, em uma nova instância de seu browser da Web.

Selecione uma linha no MasterGrid. Note como o DetailsGrid se atualiza com cada linha selecionada do MasterGrid. Note também que o nome do usuário poderá aparecer, ou não, dependendo da configuração do sistema de segurança configurado. Por default, na maioria dos servidores, o nome do usuário não aparecerá, pois um usuário que estiver acessando a página não terá que ter feito o login para visualizá-la (o acesso anônimo é permitido neste caso). Nos próximos capítulos, iremos modificar estes defaults, para obrigar os usuários a fazer o login.

Page 119: Leo62 P Web Matrix

Feche esta instância do browser da Web.

Page 120: Leo62 P Web Matrix

Como criar uma página de Login

Neste capítulo, você irá criar uma nova página de login, com base no modelo do projeto Login Page. Você irá validar as credenciais do login de um usuário contra a tabela Users do banco de dados Orders.

1. Selecione New do menu File. Aparecerá a caixa de diálogo New File. 2. Selecione Security do painel Templates. 3. Selecione o modelo Login Page. 4. Digite um caminho de arquivo na caixa Location. 5. Digite Login.aspx na caixa Filename. 6. Selecione Visual Basic na caixa drop-down Language. 7. Clique OK. O arquivo Login.aspx irá se abrir em modo de exibição Design.

8. Selecione a guia Code.

Nota: O ASP.NET Web Matrix colocou código, automaticamente, no evento LoginBtn_Click para validar os valores do UserName e do UserPass:

Sub LoginBtn_Click(Sender As Object, E As EventArgs)

If Page.IsValid Then If (UserName.Text = "[email protected]") And (UserPass.Text = "password") Then FormsAuthentication.RedirectFromLoginPage(UserName.Text, true) Else Msg.Text = "Invalid Credentials: Please try again" End If End If

End Sub

Page 121: Leo62 P Web Matrix

9. A partir da guia Code Builders do Toolbox, arraste o Code Builder SELECT Data Method para a página ASP.NET.

10. Aparecerá a caixa de diálogo Connect to Database. 11. Digite localhost na caixa Server. 12. Clique no drop-down Database. O ASP.NET Web Matrix irá se conectar à fonte de dados e

popular o drop-down Database com nomes do banco de dados. Selecione o banco de dados Orders e clique OK.

13. Aparecerá o Code Builder Wizard, chamado de caixa de diálogo Construct SELECT Query.

14. Selecione Users na exibição da lista Tables. 15. Selecione o check-box ao lado do item * na exibição da lista Columns. 16. Clique WHERE. 17. Aparecerá a caixa de diálogo WHERE Query Builder. 18. Selecione a tabela Users no drop-down Table do painel Left Operand. 19. Selecione UserName na exibição da lista Column.

Nota: Esta opção configura a porção Left Operand da cláusula WHERE.

20. Selecione o botão de rádio Filter e digite @UserName d=na caixa do filtro (default).

Nota: Esta opção configura a porção Right Operand da cláusula WHERE. Você irá passar esse valor como um parâmetro para a cláusula WHERE mais adiante neste capítulo.

21. Clique OK.

22. Volte ao estágio Construct SELECT Query do Code Builder Wizard. 23. Clique AND Clause. 24. Aparecerá a caixa de diálogo Query Builder. 25. Selecione a tabela Users do dorp-down Table no painel Left Operand. 26. Seleccione UserPassword na exibição da lista Column.

Nota: esta opção configura a porção Left Operand da cláusula WHERE.

27. Selecione o botão de rádio Filter e digite @UserPassword na caixa do filtro (default).

Nota: esta opção configura a porção Right Operand da cláusula WHERE Você irá passar este valor como parâmetro à cláusula WHERE mais adiante neste capítulo.

28. Clique OK.

29. Volte ao estágio Construct SELECT Query do Code Builder Wizard. 30. Clique Next. 

Page 122: Leo62 P Web Matrix

31. Aparecerá o segundo estágio do Code Builder Wizard: o Query Preview.

32. Clique em Test Query. 33. Digite bsmith na caixa UserName =. 34. Digite bsmith na caixa UserPassword =. 35. Clique OK. 36. Aparecerá a linha Users correspondente ao UserName especificado e o UserPassword na

grade de resultados da caixa de diálogo Query Preview.

Page 123: Leo62 P Web Matrix

37. Clique Next.

38. Aparecerá o terceiro estágio do Code Builder Wizard, chamado de caixa de diálogo Enter A Caption. Digite GetUser na caixa do nome do método.

39. Selecione o botão de rádio DataSet. 40. Clique em Finish. 

Page 124: Leo62 P Web Matrix

41. O Wizard se fechará e o ASP.NET Web Matrix irá incluir uma finção chamada de GetUser na exibição Code. A função aceita um userName e um userPassword como parâmetros de input, devolvendo um DataSet como parâmetro de output. O DataSet é populado com dados detalhados do usuário para os userName e userPassword especificados:

42. Function GetUser(ByVal userName As String, ByVal userPassword As String) _43. As System.Data.DataSet44.45. Dim connectionString As String = _46. "server='localhost'; trusted_connection=true; Database='Orders'"47. 48. Dim sqlConnection As System.Data.SqlClient.SqlConnection = _49. New System.Data.SqlClient.SqlConnection(connectionString)50. 51. Dim queryString As String = _52. "SELECT [Users].* " & _53. "FROM [Users] " & _54. "WHERE (([Users].[UserName] = @UserName) AND " & _55. "([Users].[UserPassword] = @UserPassword))"56.57. Dim sqlCommand As System.Data.SqlClient.SqlCommand = _58. New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)59. 60. sqlCommand.Parameters.Add("@UserName",

System.Data.SqlDbType.VarChar).Value = _61. userName62. 63. sqlCommand.Parameters.Add("@UserPassword",

System.Data.SqlDbType.VarChar).Value = _

Page 125: Leo62 P Web Matrix

64. userPassword65. 66. Dim dataAdapter As System.Data.SqlClient.SqlDataAdapter = _67. New System.Data.SqlClient.SqlDataAdapter(sqlCommand)68. 69. Dim dataSet As System.Data.DataSet = New System.Data.DataSet70. 71. dataAdapter.Fill(dataSet)72. 73. Return dataSet74. End Function

75. Atualize o evento de clicar do Button para que ele valide o input do usuário contra os resultados de invocar a função GetUser:

76. Sub LoginBtn_Click(Sender As Object, E As EventArgs)77.78. If Page.IsValid Then79. Dim userDS As New System.Data.DataSet80. 81. userDS = GetUser(UserName.Text, UserPass.Text)82. 83. If userDS.Tables(0).Rows.Count = 1 Then84. FormsAuthentication.RedirectFromLoginPage(UserName.Text, true)85. Else86. Msg.Text = "Invalid Credentials: Please try again"87. End If88. End If89.90. End Sub

91. Dê um Save e rode a página de Login. 92. Sua página de login aparecerá automaticamente em uma nova instância de seu browser da

Web. 93. Digite bsmith nas caixas do Username e Password, respectivamente, e clique Login.

Page 126: Leo62 P Web Matrix

94. Por default, em um login bem sucedido, a Login page irá redirecionar o usuário a uma página denominada default.aspx.

Nota: a Login Page irá exibir uma mensagem de erro se você fornecer credenciais que não existam na tabela Users.

Page 127: Leo62 P Web Matrix

Feche a instância do Web browser.

Page 128: Leo62 P Web Matrix

Como criar o arquivo Web.config

Neste capítulo, você irá criar um arquivo Web.config que irá configurar sua aplicação Web para que ela:

Colete as credenciais utilizando um formulário HTML diretamente do cliente (por ex.: a autenticação baseada em formulários)

Impeça o acesso de usuário anônimo à Web

Quando utilizada em conjunto com a página Login.aspx que acabamos de criar, este recurso nos permitirá a forçar os usuários a fazerem um login bem sucedido antes de visitar nossa página de reporting de dados Master/Details. Para isso, siga os passos abaixo:

1. Selecione New do menu File. Aparecerá a caixa de diálogo New File. 2. Selecione (General) do painel Templates. 3. Selecione o modelo Web.Config. 4. Digite um caminho de arquivo na caixa Location. 5. Digite Web.config na caixa Filename (default). 6. Clique OK. O arquivo web.config se abrirá.

7. Configure o atributo mode da guia authentication para Forms (o default é Windows).

Esta seção estabelelce as políticas de autenticação para a aplicação:

8. <authentication mode="Forms">

Nota: a autenticação baseada em formulários é um serviço ASP.NET que permite com que as aplicações forneçam suas próprias Identificaçõs de Usuário (UI) para o logon, e verifiquem suas próprias credenciais.

Page 129: Leo62 P Web Matrix

9. Remova os sub-guias (default) allow da guia authorization. Esta seção estabelece as políticas de autorização da aplicação:

10. <allow users="joeuser" />11. <allow roles="Admins" />

Nota: caberá a você autorizar ou recusar acesso aos recursos de uma aplicação, quer por usuário ou por papel do usuário.

12. Configure o sub-guia deny da guia authorization para ? (o default é *): 13. <deny users="?" />

Nota: Além dos nomes dos usuários, ou nomes dos papéis, você poderá especificar um dos valores de wildcard a seguir: "*" significa todos; "?" significa anônimos. A recusa de acesso a um usuário anônimo às páginas do diretório desautoriza qualquer usuário que não tenha feito o login a visitar uma página, impedindo a este usuário o acesso à página de login criada anteriormente. Até que o usuário consiga fazer o login com o username e a senha, ele não terá acesso a nenhuma página do programa.

14. De um Save a este arquivo.

Nota: Não é possível executar um arquivo Web.config.

Page 130: Leo62 P Web Matrix

Como criar uma página de Registro

Neste capítulo você irá criar uma nova página ASP.NET que irá salvar novas informações sobre os usuários na tabela Users.

1. Selecione New do menu File. Aparecerá a caixa de diálogo New File. 2. Selecione (General) do painel Templates. 3. Selecione o modelo ASP.NET Page.4. Digite um caminho de arquivo na caixa Location. 5. Digite NewUser.aspx na caixa Filename. 6. Selecione Visual Basic na caixa dorp-down Language. 7. Clique OK. O arquivo NewUser.aspx se abrirá em modo de exibição Design. 8. A partir da guia Web Controls do Toolbox, arrastre três controles Label, dois controles

TextBox e um controle Button para dentro da página ASP.NET.

9. Configure a propriedade Text do Label superior para UserName:. 10. Configure a propriedade Text do Label do meio para UserPassword:. 11. Configure a propriedade Text do Label inferior para vazio (sem texto). 12. Configure a propriedade ID do Label inferior para Message. 13. Configure a propriedade ID do TextBox superior para txtUserName. 14. Configure a propriedade ID do TextBox inferior para txtUserPassword. 15. Configure a propriedade TextMode do TextBox da senha do usuário par Password.

Nota: Esta propriedade adquire ou configura o comportamento da caixa de texto. Neste caso, pelo fato de a senha ser uma informação confidencial, o TextBox irá, automaticamente, mascarar a entrada do usuário.

Page 131: Leo62 P Web Matrix

16. Selecione a guia Code.

17. A partir da guia Code Builders do Toolbox, arraste um Code Builder INSERT Data Method para a página ASP.NET.

18. Aparecerá a caixa de diálogo Connect to Database.

19. Digite localhost na caixa do Server. 20. Clique o drop-down do Database. O ASP.NET Web Matrix irá conectar-se à fonte de dados e

popular o drop-down do Database com nomes do banco de dados. Selecione o banco de dados Orders e clique OK.

21. Aparecerá o primeiro estágio do Code Builder Wizard, denominado de caixa de diálogo Construct INSERT Query.

22. Selecione Users na exibição da lista Tables.

Nota: Deixe os check-boxes do Column configurados com seus valores default.

23. Clique em Next.

Page 132: Leo62 P Web Matrix

24. Aparecerá o segundo estágio do Code Builder Wizard, denominado caixa de diálogo Enter A Caption. Digite AddUser na caixa do nome do método.

25. Clique em Finish. 

Page 133: Leo62 P Web Matrix

26. O Wizard se fechará e o ASP.NET Web Matrix irá incluir uma função denominada AddUser em modo de exibição Code. Essa função aceita o userName e o userPassword como parâmetros de entrada, retornando um Integer como parâmetro de saída. O valor Integer irá representar o número total de linhas afetadas:

27. Function AddUser(ByVal userName As String, ByVal userPassword As String) As Integer

28. Dim connectionString As String = _29. "server='localhost'; trusted_connection=true; Database='Orders'"30. 31. Dim sqlConnection As System.Data.SqlClient.SqlConnection = _32. New System.Data.SqlClient.SqlConnection(connectionString)33. 34. Dim queryString As String = "INSERT INTO [Users] ([UserName],

[UserPassword]) " & _35. "VALUES (@UserName, @UserPassword)"36. 37. Dim sqlCommand As System.Data.SqlClient.SqlCommand = _38. New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)39. 40. sqlCommand.Parameters.Add("@UserName",

System.Data.SqlDbType.VarChar).Value = _41. userName42. 43. sqlCommand.Parameters.Add("@UserPassword",

System.Data.SqlDbType.VarChar).Value = _44. userPassword45. 46. Dim rowsAffected As Integer = 0

Page 134: Leo62 P Web Matrix

47. sqlConnection.Open48. 49. Try 50. rowsAffected = sqlCommand.ExecuteNonQuery51. Finally52. sqlConnection.Close53. End Try54. 55. Return rowsAffected56. End Function

57. Selecione a guia Design. 58. Dê um duplo clique no controle Button. O ASP.NET Web Matrix irá abrir a exibição do Code

com o evento Button1_Click. 59. Adicione código ao evento de clicar do Button para que ele possa invocar a função

AddUser, passando os valores do TextBox para os parâmetros UserName e UserPassword: 60. Sub Button1_Click(sender As Object, e As EventArgs)61.62. If AddUser(txtUserName.Text, txtUserPassword.Text) > 063. Message.Text = "Success"64. Else65. Message.Text = "Failure"66. End If67. 68. End Sub

69. Dê um Save e rode a página ASP.NET. 70. Sua página ASP.NET aparecerá automaticamente em uma nova instância de seu browser da

Web. 71. Digite um novo nome de usuário na caixa UserName. 72. Digite uma senha de usuário na caixa UserPassword. 73. Clique no Button.

Nota: o Label de mensagem já incluirá o novo status de entrada do usuário.

Page 135: Leo62 P Web Matrix

74. Feche a instância do browser da Web.

75. Abra o arquivo Login.aspx desenvolvido anteriormente. Você irá oferecer ao usuário a opção de rodar a página NewUser.aspx se suas credenciais de login não estiverem corretas.

76. Selecione a guia Code. 77. Modifique o evento de clicar do botão Login para que ele possa oferecer um link à página

NewUser no texto da mensagem do Label: 78. Msg.Text = "Invalid Credentials: Please try again or " + _79. "<a href='newuser.aspx'>register a new user</a>"

80. Dê um Save e execute a página ASP.NET. 81. Sua página ASP.NET aparecerá, automaticamente, em uma nova instância de seu browser

da Web. 82. Digite um nome de usuário não-válido na caixa UserName. 83. Digite uma senha de usuário na caixa UserPassword. 84. Clique no Button.

Nota: o usuário tem agora a oportunidade de fornecer credenciais válidas de login, ou prosseguir para o link register a new user.

Page 136: Leo62 P Web Matrix

Feche essa instância do browser da Web.

Page 137: Leo62 P Web Matrix

Executando a aplicação

Neste capítulo, você irá rodar a aplicação da Web desenvolvida no decorrer de todo este Tour. O ponto de entrada desta aplicação é a página Default.

1. Abra o arquivo Default.aspx.

2. Rode a página ASP.NET. 3. Sua página ASP.NET aparecerá, automaticamente, em uma nova instância de seu browser

da Web.

Por ser este seu primeiro acesso a este site, você não terá acesso a esta página (pelo fato de não ter feito o login). O ASP.NET irá redirecioná-lo, automaticamente, à página de login, onde você poderá utilizar suas credenciais existentes de nome de usuário/senha, ou clicar no link de inscrição para criar uma nova conta. Depois de ter feito seu login, você será redirecionado de volta à página default.aspx na qual você terá acesso ao site restrito.

Page 138: Leo62 P Web Matrix

Tópicos Avançados

Preferências dos usuários

Você poderá alterar várias configurações que possam interferir no IDE do ASP.NET Web Matrix IDE. Faça um teste com as configurações da caixa de diálogo Preferences até encontrar o melhor ambiente para suas necessidades.

Você poderá acessar a caixa de diálogo Preferences, selecionando Preferences no menu de Tools.

Aparecerá a caixa de diálogo Preferences.

General:

Application: a página Application da caixa de diálogo Preferences permite que você especifique quantos itens quer exibir no menu Recent Files do diálogo que aparece no startup da aplicação; aparecerá New File, Open File ou não aparecerá nada. Você poderá acessar esta caixa de diálogo selecionando a página Application do nó General.

Page 139: Leo62 P Web Matrix

Text Editor Fontes: a página Fonts da caixa de diálogo Preferences permite que você

estabeleça um esquema personalizado de fontes para vários elementos da interface de usuário do IDE. Você poderá acessar esta caixa de diálogo selecionando a página Fonts do nó Text Editor.

Web Editing General: a página General da caixa de diálogo Preferences permite que você

especifique o modo de edição default, seja Design ou Preview. Você poderá acessar essa caixa de diálogo selecionando a página General do nó de Web Editing.