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

Transcrição

1 & '( # ( ) Página: 1

2 * Web Applications... 3 GRIDVIEW... 3 DETAILSVIEW FORMVIEW DATALIST CLASSE DE NEGÓCIO TREEVIEW + XML TREEVIEW + DataAdapter TREEVIEW + DataReader Windows Applications Data Access Master / Detail Página: 2

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. Página: 3

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. Página: 4

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. Página: 5

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. Página: 6

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

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. Página: 8

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. Página: 9

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. Página: 10

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. Página: 11

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 Selectione New data source. 3. Informe qual é a fonte de dados, neste caso é um Database. 4. Selecione a tabela Employees com alguns campos. Página: 12

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. Página: 13

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. Página: 14

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 </Fields> </asp:detailsview> ShowEditButton="True"/> <asp:sqldatasource ID="SqlDataSource1" Runat="server" Página: 15

16 DeleteCommand="DELETE FROM [Employees] WHERE InsertCommand="INSERT INTO [Employees] ([LastName]... [Photo]) SelectCommand="SELECT [EmployeeID]... [Address] FROM [Employees] UpdateCommand="UPDATE [Employees] SET [LastName] AND [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. Página: 16

17 Página: 17

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. Página: 18

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. Página: 19

20 Página: 20

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. Página: 21

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> Página: 22

23 5. Salve o projeto e execute-o no browser. Página: 23

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. VB.NET 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. 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() Página: 24

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 { Página: 25

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) { id=sa"; string conexao = "Database=northwind;server=(local);user 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; Página: 26

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. Página: 27

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. Página: 28

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. Página: 29

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

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. Página: 31

32 Página: 32

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. Página: 33

34 3. Defina um Auto Format conforme a necessidade para apresentar os dados hierárquicos de forma viável. Página: 34

35 Página: 35

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. VB.NET 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. <%@ 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()) Página: 36

37 TreeView1.Nodes.Add(masterNode) For Each childrow As DataRow In masterrow.getchildrows("children") Dim childnode As New TreeNode(childRow("ProductName").ToString()) Next End Sub Next masternode.childnodes.add(childnode) 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) conn) Dim daprod As SqlDataAdapter = New SqlDataAdapter(sqlProd, 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> Página: 37

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); Página: 38

39 } DataSet GetData() { SqlConnection conn = new SqlConnection(conexao); string sqlcat = "Select CategoryID, CategoryName FROM Categories"; string sqlprod = "Select CategoryID, ProductName FROM Products"; } </script> 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; Página: 39

40 Página: 40

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 Página: 41

42 End Sub </script> Finally End Try newnode.text = reader("firstname").tostring() newnode.value = reader("employeeid").tostring() e.node.childnodes.add(newnode) End While conn.close() 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(); Página: 42

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. Página: 43

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. Página: 44

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. Página: 45

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. Página: 46

47 7. O Schema pode conter diversos métodos, como este listado abaixo. 8. Veja a estrutura da instrução SQL gerada. Página: 47

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. Página: 48

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. Página: 49

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. Página: 50

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. Página: 51

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. Página: 52

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. Página: 53