˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...selecione auto format e aplique...

53
!" ! # $"% Página: 1 & (# ( )

Upload: others

Post on 01-Apr-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 1

���������������� ��������������

����������������&������

�� �'�����(�#����(����)��������������

Page 2: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 2

*������ Web Applications................................................................................................................ 3 GRIDVIEW ........................................................................................................................ 3 DETAILSVIEW ............................................................................................................... 12 FORMVIEW..................................................................................................................... 18 DATALIST....................................................................................................................... 21 CLASSE DE NEGÓCIO .................................................................................................. 24 TREEVIEW + XML......................................................................................................... 33 TREEVIEW + DataAdapter ............................................................................................. 36 TREEVIEW + DataReader ............................................................................................... 41 Windows Applications...................................................................................................... 44 Data Access....................................................................................................................... 44 Master / Detail................................................................................................................... 51

Page 3: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 3

Web Applications

GRIDVIEW Objetivo: Montar um formulário com o controle GridView. Este controle permite exibir os dados na forma de GRID, além de suportar diversas funcionalidades de edição, classificação, etc.

1. Abra o Visual Web Developer 2005 Express Edition. Selecione o menu File / New Web Site para criar um novo Web Site, conforme a seguinte figura. Note que a linguagem é o Visual Basic, mas se você quiser criar em Visual C# não há nenhum problema, pois os passos são os mesmos.

2. Em seguida pressione o botão OK. Será exibida uma janela contendo a página

Default.aspx com o HTML exibido. Para efeito de exercício, iremos criar páginas relativas ao tópico abordado, portanto, exiba o Solution Explorer (Ctrl + Alt + L) e exclua esta página. Para adicionar uma nova página, no Solution Explorer, clique com o botão direito sobre o C:\WebSite\DCE20005 e selecione Add New Item. Digite GridView.aspx no nome da página e clique em Add.

Page 4: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 4

3. Caso queira digitar as Tags HTML diretamente nesta janela, esteja à vontade, no

entanto, irei mostrar os controles na janela de Design. Sendo assim, clique no botão Design no rodapé da página.

Page 5: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 5

4. Exiba a Toolbox e arraste um controle GridView para o formulário. Será aberta uma Smart Tag contendo diversas opções.

5. Selecione Auto Format e aplique um formato de acordo com a sua necessidade.

Page 6: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 6

6. Para definir a fonte de dados, em Choose Data Source selecione New Data Source.

7. Você pode selecionar qualquer fonte de dados, mas neste caso escolha Database. Perceba que já é definido um ID (SqlDataSource1), e caso queira alterar basta digitar. Como iremos utilizar esta conexão em vários exercícios, deixe o checkbox de conexão selecionado para que a string de conexão seja armazenada no arquivo Web.Config.

Page 7: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 7

8. Você precisa identificar qual é a tabela a ser usada como fonte de dados. Selecione Products e alguns campos.

Page 8: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 8

9. Como iremos permitir a edição de dados no GridView, clique no botão Advanced

para abrir esta janela onde você irá selecionar as duas opções para que o DataAdapter seja montado contendo todas estas instruções SQL para efetivar as operações.

10. Na Smart Tag são exibidos os checkboxes para você ativar as operações.

Selecione Enable Paging para permitir a paginação, Enable Sorting para permitir a classificação por coluna, Enable Editing para permitir a edição de dados diretamente no GridView e Enable Deleting para permitir a exclusão de dados.

Page 9: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 9

11. Para customizar as colunas, selecione Edit Columns e aplique uma formatação no

campo Estoque de forma que seja exibido no formato numérico com zero casas decimais (DataFormatString = {0:n0}. Você pode aplicar qualquer formato as colunas.

Page 10: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 10

12. Como foi permitida a edição de dados no controle, customize os botões para a lingua onde o controle será utilizado. Para isso, selecione o Command Field, localize as propriedades Text de cada botão e altere o texto.

Page 11: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 11

13. Selecione Auto Format e aplique um formato de acordo com a sua necessidade.

14. Salve o projeto e pressione CTRL + F5 para executá-lo no browser. É importante destacar que o ASP.NET 2 não precisa de um IIS instalado na máquina, pois ele monta o próprio ambiente do IIS.

Page 12: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 12

DETAILSVIEW Objetivo: Montar um formulário com o controle DetailsView. Este controle exibe um registro de cada vez.

1. Adicione um novo Web Form no Solution Explorer. 2. Exiba a Toolbox e arraste um controle DetailsView para o formulário. Será aberta

uma janela com a Smart Tag para informar a fonte de dados, que neste caso será a tabela Employees do SQL Server 2000. Selectione New data source.

3. Informe qual é a fonte de dados, neste caso é um Database.

4. Selecione a tabela Employees com alguns campos.

Page 13: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 13

5. Clique no botão Advanced Options e selecione os dois checkboxes para que sejam criados os métodos para suportar a inclusão e edição de dados.

Page 14: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 14

6. Retornando a Smart Tag, selecione todos os checkboxes para ativar a paginação e

a manutenção de dados.

7. Customize o campo que exibe uma data para ficar com o formato de acordo com a propriedade DataFormatString, sendo {0:dd/MM/yyyy}. O “0:” indica que será o campo atual e o formato vem a seguir.

Page 15: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 15

8. Se você analisar o código HTML gerado, irá notar que o conteúdo da fonte de dados está declarado dentro do HTML através da Tag asp:SqlDataSource.

<form id="form1" runat="server">

<asp:DetailsView ID="DetailsView1" Runat="server“

DataSourceID="SqlDataSource1"

AutoGenerateRows="False" DataKeyNames="EmployeeID" AllowPaging="True">

<Fields>

<asp:BoundField ReadOnly="True" DataField="EmployeeID"/>

<asp:BoundField DataField="BirthDate" DataFormatString="{0:dd/MM/yyyy}"/>

...

<asp:CommandField ShowDeleteButton="True" ShowInsertButton="True“

ShowEditButton="True"/>

</Fields>

</asp:DetailsView>

<asp:SqlDataSource ID="SqlDataSource1" Runat="server"

Page 16: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 16

DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID]=@original_EmployeeID ... [Photo]=@original_Photo"

InsertCommand="INSERT INTO [Employees] ([LastName] ... [Photo]) VALUES (@LastName ... @Photo)"

SelectCommand="SELECT [EmployeeID] ... [Address] FROM [Employees]“

UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName ... AND [Photo] = @original_Photo"

ConnectionString="<%$ ConnectionStrings:AppConnectionString1 %>">

<DeleteParameters>

<asp:Parameter Name="original_EmployeeID"></asp:Parameter>

...

<asp:Parameter Name="original_Photo"></asp:Parameter>

</DeleteParameters>

<UpdateParameters>

<asp:Parameter Type="String" Name="LastName"></asp:Parameter>

...

<asp:Parameter Name="original_Photo"></asp:Parameter>

</UpdateParameters>

<InsertParameters>

<asp:Parameter Type="String" Name="LastName"></asp:Parameter>

...

<asp:Parameter Name="Photo"></asp:Parameter>

</InsertParameters>

</asp:SqlDataSource>

</form>

9. Salve o projeto e execute-o no browser. Inclua um novo registro e salve-o. Em

seguida, altere o conteúdo e salve novamente.

Page 17: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 17

Page 18: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 18

FORMVIEW Objetivo: Montar um formulário com o controle FormView. Este controle exibe um registro de cada vez com um Label e o conteúdo do registro.

1. Adicione um novo Web Form no Solution Explorer. Arraste o controle FormView para o formulário.

2. A fonte de dados será um Database. Selecione a tabela Customers do banco de dados Northwind e todos os campos.

3. Aplique um Auto Format conforme a necessidade.

Page 19: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 19

4. Ajuste o layout de forma que caibam todos os dados.

5. Salve o projeto e execute-o no browser. Navegue nas páginas para visualizar os registros.

Page 20: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 20

Page 21: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 21

DATALIST Objetivo: Montar um formulário com o controle DataList. Este controle exibe diversos registros na mesma página, onde você deve determinar a área de dados e o respectivo layout.

1. Adicione um novo Web Form no Solution Explorer. Arraste o controle DataList para o formulário.

2. A tabela usada será a Orders com alguns campos.

3. Customize o campo OrderDate para que a data seja exibida no formato adequado. Para isso, selecione o OrderDateLabel e o link Edit DataBindings. Configure o formato para Short Date.

Page 22: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 22

4. Note no HTML que a propriedade chave para exibir os dados é a Text, onde usa o Eval(field).

<asp:DataList ID="DataList1" Runat="server“

DataSourceID="SqlDataSource1" RepeatColumns="3">

<ItemTemplate>

<b>OrderID: </b>

<asp:Label ID="OrderIDLabel" Text='<%# Eval("OrderID") %>'/>

OrderDate:

<asp:Label ID="OrderDateLabel" Text='<%# Eval("OrderDate", "{0:d}")

...

ShipCountry:

<asp:Label ID="ShipCountryLabel" Text='<%# Eval("ShipCountry")%>'/>

</ItemTemplate>

</asp:DataList>

<asp:SqlDataSource ID="SqlDataSource1" Runat="server“

SelectCommand="SELECT [OrderID], [OrderDate], [ShipName],

[ShipAddress], [ShipCity], [ShipCountry] FROM [Orders]“

ConnectionString="<%$ ConnectionStrings:AppConnectionString1 %>">

</asp:SqlDataSource>

Page 23: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 23

5. Salve o projeto e execute-o no browser.

Page 24: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 24

CLASSE DE NEGÓCIO Objetivo: Definir uma classe de negócio contendo métodos para acessar um banco de dados e retornar um DataSet, o qual será utilizado em qualquer tipo de projeto.

1. No Solution Explorer, adicione um novo projeto do tipo Class Library chamado DataAccess.

2. Como iremos acessar o SQL Server 2000, na primeira linha da tela, digite os

Namespaces que contém os métodos e propriedades para efetuar o acesso. Vale dizer que a classe SqlClient foi criada apenas para o SQL Server 7 ou superior. Qualquer outra versão do SQL deverá usar o OLEDB.

VB.NET

Imports System.Data

Imports System.Data.SqlClient

C#

using System.Data;

using System.Data.SqlClient;

3. Digite o método chamado GetCategories que retorna um DataSet. Este método utilizará a string de conexão chamada myConn que está armazenada no arquivo Web.Config; monta uma instrução SQL que seleciona todos os campos da tabela Categories; define a conexão e o Command que efetiva o Select; monta um DataAdapter e um DataSet; preenche o DataAdapter no respectivo DataSet definido e retorna o mesmo. Já o método GetProducts recebe como argumento o código da categoria e retorna um Dataset. Este código será usado como critério na instrução SQL para pesquisar todos os produtos da respectiva categoria.

VB.NET

Public Class DataAccess

Public Shared Function GetCategories() As DataSet

Dim conexao As String = ConfigurationSettings.ConnectionStrings(“myConn").ConnectionString()

Page 25: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 25

Dim sql As String = "SELECT * FROM Categories"

Dim conn As New SqlConnection(conexao)

Dim command As New SqlCommand(sql, conn)

Dim adapter As New SqlDataAdapter(command)

Dim ds As New DataSet

adapter.Fill(ds)

Return ds

End Function

Public Shared Function GetProducts(ByVal cat As Integer) As DataSet

Dim conexao As String = ConfigurationSettings.ConnectionStrings(“myConn").ConnectionString()

Dim conn As New SqlConnection(conexao)

Dim command As New SqlCommand()

command.Connection = conn

command.CommandType = CommandType.Text

command.Parameters.Add(New SqlParameter("@cat", cat))

command.CommandText = "SELECT ProductID, ProductName, UnitPrice, UnitsInStock FROM Products WHERE categoryID=@cat"

Dim adapter As New SqlDataAdapter(command)

Dim ds As New DataSet

adapter.Fill(ds)

Return ds

End Function

End Class

C#

public class DataAccess

{

Page 26: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 26

public static DataSet GetCategories()

{

string conexao = "Database=northwind;server=(local);user id=sa ";

string sql = "SELECT * FROM Categories";

SqlConnection conn = new SqlConnection(conexao);

SqlCommand command = new SqlCommand(sql, conn);

SqlDataAdapter adapter = new SqlDataAdapter(command);

DataSet ds = new DataSet();

adapter.Fill(ds);

return ds;

}

public static DataSet GetProducts(int cat)

{

string conexao = "Database=northwind;server=(local);user id=sa";

SqlConnection conn = new SqlConnection(conexao);

SqlCommand command = new SqlCommand();

command.Connection = conn;

command.CommandType = CommandType.Text;

command.Parameters.Add(new SqlParameter("@cat", cat));

command.CommandText = "SELECT ProductID, ProductName, UnitPrice, UnitsInStock FROM Products WHERE categoryID=@cat";

SqlDataAdapter adapter = new SqlDataAdapter(command);

DataSet ds = new DataSet();

adapter.Fill(ds);

return ds;

}

}

Page 27: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 27

4. Salve o projeto. Adicione um novo Web Form no Solution Explorer. Digite

Categorias e arraste o controle DropDownList para o formulário. Na Smart Tag, selecione o checkbox AutoPostBack para submeter este controle ao servidor.

5. Para a fonte de dados, selecione Object, afinal, usaremos a classe definida anteriormente. Caso queira alterar o nome do DataSource, fique à vontade.

6. Na TAB Select são exibidos todos os métodos existentes. Selecione o GetCategories e observe que o retorno é um DataSet.

Page 28: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 28

7. Como o controle é um DropDownList, digite CategoryName em “Data Field to Display”, pois aqui é o campo a ser exibido. Já em ”Data Field for the Value” é o campo que será armazenado quando o usuário selecionar um item, portanto, digite CategoryID.

Page 29: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 29

8. Em seguida montaremos um GridView para exibir todos os produtos da respectiva categoria. Selecione como Data Source o Object DataAccess e o método GetProducts.

Page 30: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 30

9. Como este método requer um parâmetro, informe que virá do controle DropDownList1.

Page 31: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 31

10. Na Smart Tag, habilite a paginação e a classificação.

11. Salve o projeto e execute no browser. Selecione outras categorias e veja que o

GridView exibe todos os produtos da categoria selecionada.

Page 32: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 32

Page 33: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 33

TREEVIEW + XML Objetivo: Definir um arquivo XML e utilizá-lo como fonte de dados para um controle TreeView.

1. No Solution Explorer, adicione um novo item do tipo XML File chamado myXML com a seguinte estrutura.

<?xml version="1.0" encoding="utf-8" ?>

<collection>

<book>

<title>asp.net</title>

<author>dino esposito</author>

<publisher>ms press</publisher>

</book>

<book>

<title>sql reporting services</title>

<author>tom cruise</author>

<publisher>ms press</publisher>

</book>

</collection>

2. Adicione um novo Web Form. Arraste o controle TreeView para o formulário e

associe na fonte de dados o arquivo XML criado anteriormente.

Page 34: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 34

3. Defina um Auto Format conforme a necessidade para apresentar os dados

hierárquicos de forma viável.

Page 35: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 35

Page 36: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 36

TREEVIEW + DataAdapter Objetivo: Definir um código que irá ler uma tabela no banco de dados, montar um DataAdapter e preencher um controle TreeView.

1. No Solution Explorer, adicione um novo formulário contendo um controle TreeView. Como iremos digitar um código diretamente no HTML, no rodapé, clique no botão HTML e digite o seguinte código que irá ler duas tabelas (Categories e Products) do banco de dados Northwind, montará na memória um relacionamento entre as chaves e usará como fonte de dados para montar o controle TreeView. Como este controle requer dados hierárquicos, então, montaremos um nível com as categorias e outro nível com os produtos das respectivas categorias.

VB.NET

<%@ Page Language="VB" %>

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">

Dim conexao As String = "Server=localhost;Database=Northwind;user id=sa"

Sub Page_Load()

If Not Page.IsPostBack Then

FillNodes()

End If

End Sub

Sub FillNodes()

Dim ds As DataSet = GetData()

For Each masterRow As DataRow In ds.Tables("Categories").Rows

Dim masterNode As New TreeNode(masterRow("CategoryName").ToString())

Page 37: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 37

TreeView1.Nodes.Add(masterNode)

For Each childRow As DataRow In masterRow.GetChildRows("Children")

Dim childNode As New TreeNode(childRow("ProductName").ToString())

masterNode.ChildNodes.Add(childNode)

Next

Next

End Sub

Function GetData() As DataSet

Dim conn As SqlConnection = New SqlConnection(conexao)

Dim sqlCat As String = "SELECT CategoryID, CategoryName FROM Categories"

Dim sqlProd As String = "SELECT CategoryID, ProductName FROM Products"

Dim daCat As SqlDataAdapter = New SqlDataAdapter(sqlCat, conn)

Dim daProd As SqlDataAdapter = New SqlDataAdapter(sqlProd, conn)

Dim ds As DataSet = New DataSet()

daCat.Fill(ds, "Categories")

daProd.Fill(ds, "Products")

ds.Relations.Add("Children", _

ds.Tables("Categories").Columns("CategoryID"), _

ds.Tables("Products").Columns("CategoryID"))

Return ds

End Function

</script>

Page 38: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 38

C#

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

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">

const string conexao = "Server=localhost;Database=Northwind;user id=sa";

void Page_Load()

{

if (! Page.IsPostBack)

FillNodes();

}

void FillNodes()

{

DataSet dst = GetData();

foreach (DataRow masterRow in dst.Tables["Categories"].Rows)

{

TreeNode masterNode = new TreeNode((string)masterRow["CategoryName"]);

TreeView1.Nodes.Add(masterNode);

foreach (DataRow childRow in masterRow.GetChildRows("Children"))

{

TreeNode childNode = new TreeNode((string)childRow["ProductName"]);

masterNode.ChildNodes.Add(childNode);

}

}

Page 39: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 39

}

DataSet GetData()

{

SqlConnection conn = new SqlConnection(conexao);

string sqlCat = "Select CategoryID, CategoryName FROM Categories";

string sqlProd = "Select CategoryID, ProductName FROM Products";

SqlDataAdapter daCat = new SqlDataAdapter(sqlCat, conn);

SqlDataAdapter daProd = new SqlDataAdapter(sqlProd, conn);

DataSet ds = new DataSet();

daCat.Fill(ds, "Categories");

daProd.Fill(ds, "Products");

ds.Relations.Add("Children",

ds.Tables["Categories"].Columns["CategoryID"],

ds.Tables["Products"].Columns["CategoryID"]);

return ds;

}

</script>

Page 40: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 40

Page 41: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 41

TREEVIEW + DataReader Objetivo: Definir um código que irá ler uma tabela no banco de dados, montar um DataReader e preencher um controle TreeView.

1. No Solution Explorer, adicione um novo formulário contendo um controle TreeView. Como iremos digitar um código diretamente no HTML, no rodapé, clique no botão HTML e digite o seguinte código que irá ler a tabela Employees do banco de dados Northwind, montará um DataReader que usará como fonte de dados para montar o controle TreeView. O DataReader é a forma mais rápida de se ler uma fonte de dados.

VB.NET

<%@ Page Language="VB" %>

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">

Dim conexao As String = "Server=localhost;Database=Northwind;user id=sa"

sub TreeView1_TreeNodePopulate(sender As Object, _

e As TreeNodeEventArgs)

Dim conn As New SqlConnection(conexao)

Dim sql As String = "SELECT EmployeeID, FirstName FROM Employees"

Dim cmd As New SqlCommand(Sql, conn)

conn.Open()

Try

Dim reader As SqlDataReader = cmd.ExecuteReader()

While reader.Read()

Dim newNode As New TreeNode()

newNode.PopulateOnDemand = True

Page 42: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 42

newNode.Text = reader("FirstName").ToString()

newNode.Value = reader("EmployeeID").ToString()

e.Node.ChildNodes.Add(newNode)

End While

Finally

conn.Close()

End Try

End Sub

</script>

C#

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

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">

string conexao = "Database=northwind;server=(local);user id=sa";

void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)

{

SqlConnection con = new SqlConnection(conexao);

string sql = "SELECT EmployeeID, FirstName FROM Employees";

SqlCommand cmd = new SqlCommand(sql, con);

con.Open();

using (con)

{

SqlDataReader reader = cmd.ExecuteReader();

while (reader.Read())

{

TreeNode newNode = new TreeNode();

Page 43: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 43

newNode.PopulateOnDemand = true;

newNode.Text = reader["FirstName"].ToString();

newNode.Value = reader["EmployeeID"].ToString();

e.Node.ChildNodes.Add(newNode);

}

}

}

</script>

2. Salve o projeto e execute.

Page 44: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 44

Windows Applications

Data Access Objetivo: Montar um formulário para exibir dados oriundos de um banco de dados, assim como a barra de navegação e os objetos gerados.

1. Abra o Visual Basic 2005 Express Edition ou o Visual C# 2005 Express Edition. Selecione o menu File / New Project para criar um novo projeto. Note que a linguagem é o Visual Basic, mas se você quiser criar em Visual C# não há nenhum problema, pois os passos são os mesmos. É criado um formulário chamado Form1 como default. Como iremos ler uma tabela do banco de dados Northwind do MS-Access, selecione o menu Data / Show Data Sources para exibir a janela Data Sources. Clique no link Add New Data Source.

2. Como usaremos o MS-Access, selecione Local Database File.

Page 45: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 45

3. Clique em Browse e localize o MDB.

4. Selecione a tabela Employees e note que o nome do DataSet é Northwind DataSet. Caso queira alterar, fique à vontade. Clique em Finish para encerrar o assistente.

Page 46: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 46

5. Note que são gerados vários objetos automaticamente relativos a esta tabela e conexão.

6. É gerado um arquivo XSD que representa o Schema dos dados, ou seja, os campos com os respectivos tipos.

Page 47: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 47

7. O Schema pode conter diversos métodos, como este listado abaixo.

8. Veja a estrutura da instrução SQL gerada.

Page 48: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 48

9. Na janela Data Sources, o DataSet NorthwindDataSet é listado contendo a tabela Employees com os devidos campos. Como estes dados serão exibidos em um formulário é possível definir em que tipo de controle cada campo será exibido. Por exemplo, clique no campo EmployeeID e altere para Label. Existem diversos tipos de campos que se enquadram nesta categoria.

Page 49: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 49

10. Em relação a forma em que todo o conteúdo da tabela será exposta, temos: DataGridView, Details, None ou Customize. Neste exemplo, usaremos Details, portanto, clique no nome da tabela Employees e troque para Details.

Page 50: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 50

11. O próximo passo é arrastar a tabela Employees para dentro do formulário. Observe que os controles são inseridos e você pode posicioná-los da melhor forma possível. Além disto, é inserida uma barra de navegação vinculada aos dados.

12. Salve o projeto e pressione F5 para executar.

Page 51: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 51

Master / Detail Objetivo: Montar um formulário Master / Detail com duas tabelas vinculadas.

1. No Solution Explorer, adicione um novo formulário. Abra a janela Data Sources, clique com o botão direito, selecione Add New Data Source. Este DataSet deverá ter duas tabelas (Categories e Products) com alguns campos selecionados. Como a chave entre as tabelas é o CategoryID, este deverá ser selecionado em ambas as tabelas. Os demais campos ficam a seu critério.

2. Na janela Data Sources defina que a tabela Categories será exibida como Details e

Products como GridView. Os campos da Categories serão Labels.

Page 52: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 52

3. Arraste a tabela Categories para o formulário e disponha os dois controles conforme a seguinte figura. Note que são gerados todos os objetos necessários para preencher os Labels com os dados, assim como a barra de navegação.

4. Para montar o Master / Detail, clique no objeto CategoriesDataConnector e selecione Configure Master Details. Informe quem é a tabela Pai e a Filho.

Page 53: ˘&ˇˆˆ˙download.microsoft.com/download/5/b/e/5be53304-32d...Selecione Auto Format e aplique um formato de acordo com a sua necessidade. 14. Salve o projeto e pressione CTRL + F5

��������������� ����������������������������������������� ������������������� !�� ���"��!���������#���$ �"��������%�

Página: 53

5. São criados novos controles automaticamente para vincular os dados.

6. É inserido um GridView para todos os produtos da respectiva categoria. Salve o formulário e execute-o. Caso tenha vários formulários no Solution Explorer, será preciso definir qual será aberto. Para isto, clique com o botão direito no Solution Explorer, selecione Properties, e em Startup object informe qual formulário será executado.