Acesso a Dados com Wizard (sem escrever código) e Programaticamente

Transcrição

1 Base de Dados: loja.mdb Acesso a Dados com Wizard (sem escrever código) e Programaticamente Tabelas: Categorias (IdCat, NomeCat) Produtos (IdProd, IdCat, Preço, Stock) Carrinho (ProdId, Quantidade) Clientes (CliId, Nome, Morada, Telefone, NIF, BI) A Visualização de uma tabela num controlo GridView através de Wizard 1. Criar um Web Site (File System Web site) File > New Web Site > ASP.NET Web Site Location: File System Visual C# OK. 2. Colocar a base de dados (loja.mdb) no directório App_Data Depois de colocada ver o conteúdo da Base de Dados: duplo clique no ficheiro de base de dados (uso do Microsoft Access). através do Server Explorer: na janela Server Explorer expandir Data Connections, loja.mdb, Tables. Surgem as tabelas Carrinho, Categorias, Clientes e Produtos. Para visualizar o conteúdo de uma tabela com o botão direito do rato em cima do nome da tabela seleccionar Show Table Data (pode ser necessário efectuar o Refresh).

2 3. Adicionar um Controlo GridView para mostrar os dados de uma Tabela Para mostrar os dados de uma tabela da base de dados num controlo GridView vamos criar: uma ligação à base de dados um controlo data source, que executa um comando SQL (Select) e retorna os resultados um controlo GridView para carregar os dados do controlo data source e os mostrar Estes elementos podem ser adicionados separadamente. No entanto, o modo mais fácil é começar por adicionar um controlo GridView, e depois através de Wizards criar a ligação à base de dados e o objecto data source. Para posicionar o controlo GridView na página podemos começar por adicionar à página, em modo Design, uma tabela de 3 linhas por 3 colunas, fazendo: Layout > Insert Table Em seguida adicionámos à célula central da tabela (em modo Design) um controlo GridView (existente na ToolBox no grupo Data). Com o cursor em cima da GridView, clicámos na Smart Tag para obter o menu GridView Tasks. Seleccionar Choose Data Source:, e clicar em <New data source >. Escolher como tipo de Data Source Access Database, e OK. Para seleccionar o ficheiro da base de dados premir Browse, seleccionar App_Data, seleccionar loja.mdb e OK. O campo de texto com o nome do ficheiro de base de dados fica preenchido com ~App_Data/loja.mdb. Premir Next. Para mostrar o conteúdo da tabela Categorias seleccionar: Specify columns from a table or view, nome da tabela: Categorias colunas: * A instrução SQL mostrada será: Select * From [Categorias] Premir Next. Podemos testar a ligação à base de dados. Premir Finish. O Wizard criou e configurou um controlo Access Data Source que incorpora a ligação à base de dados e a instrução SQL de interrogação especificada. Ligou o controlo GridView ao controlo Access Data Source para que o controlo GridView mostre os dados retornados pelo controlo Access Data Source. 4. Testar a página: Premir Ctrl + F5 ou com o botão direito do rato em cima do nome da página seleccionar View in Browse.

3 5. Adicionar Paginação Na vista de Design clicar na Smart Tag, seleccionar Enable Paging. Testar e verificar que o controlo GridView apresenta um rodapé com links para números de páginas. Verificar a alteração do código na vista Source: AllowPaging="True". 6. Adicionar Ordenação Na vista de Design clicar na Smart Tag, seleccionar Enable Sorting. Testar e verificar que no controlo GridView os cabeçalhos das colunas mudaram para links. Verificar a alteração do código na vista Source: AllowSorting="True". 7. Esconder campos da tabela Para esconder a coluna com os valores de IdCat na vista de Design clicar na Smart Tag, seleccionar Edit Columns, em Selected Fields seleccionar IdCat. Surgem as propriedades desta coluna (BoundField properties:). No grupo Behavior mudar a propriedade Visible de True para False. Testar e verificar. B Criação de uma página Master-Detail através de Wizard com dois controlos GridView Nesta página vamos mostrar dados de duas tabelas relacionadas - tabela Categorias e tabela Produtos e estabelecer entre elas uma relação master-detail, isto é, a tabela Produtos mostra apenas os produtos da categoria seleccionada na tabela Categorias. Para mostrar apenas os produtos da categoria seleccionada vamos criar um comando SQL parametrizado (instrução SELECT com cláusula WHERE). O controlo Access Data Source ligado à tabela dos Produtos conterá uma instrução SELECT com cláusula WHERE (filtro parametrizado): Select * From [Produtos] Where [IdCat] =? O modo como este objecto (Access Data Source) vai buscar o valor do parâmetro é indicado noutro elemento que vai ser criado - elemento parameter. 1. Acrescentar uma página ao Web Site Na janela Solution Explorer, com o botão direito do rato em cima do nome do projecto, seleccionar Add New Item seleccionar Web Form e mudar o nome da página para MasteDetailComWizard

4 2. Adicionar dois controlos GridView para estabelecer o relacionamento Master- Detail Para posicionar os controlos GridView na página podemos começar por adicionar à página, em modo Design, uma tabela de 2 linhas por 2 colunas, fazendo: Layout > Insert Table Rows: 2 Columns: 2 Na 1.ª linha da tabela colocámo dois Labels para os títulos Categorias: e Produtos:. Na 2.º linha colocámos dois controlos GridView, alterámos os IDs para gvcategorias (GridView para mostar as categorias) e gvprodutos (GridView para mostar as produtos). Através da Smart Tag do controlo gvcategorias criámos o objecto Access Data Source: GridView Tasks Choose Data Source: <New data source > Access Database OK. Browse App_Data loja.mdb OK (~App_Data/loja.mdb) Next Specify columns from a table or view Categorias * (SELECT * FROM [Categorias]) Next Finish 3. Adicionar Selecção à GridView gvcategorias A tabela das Categorias vai funcionar como tabela Mestre. Para permitir seleccionar uma linha desta tabela, na vista de Design clicar na Smart Tag, e em GridView Tasks seleccionar Edit Columns. Debaixo de Available Fields abrir o nó Command Field, escolher Select e premir Add para o adicionar à lista dos SelectedFields. Estes procedimentos criam uma nova coluna da tabela com um CommandField Select. Através das propriedades deste Command Field é possível mudar a posição desta coluna, o tipo de botão (link, botão ou imagem), o texto, etc.

5 Para que ao seleccionar uma linha desta tabela seja possível determinar a chave do respectivo registo é necessário seleccionar o controlo GridView, e na janela de propriedades colocar a propriedade DataKeyNames igual a IdCat. 4. Configuração da Instrução Select Parametrizada para mostrar os produtos associados à categoria seleccionada A tabela dos produtos vai funcionar como tabela de Detalhes mostrando os produtos da categoria seleccionada. É necessário uma instrução SQL diferente da anterior pelo será necessário um segundo objecto Access Data Source. Através da Smart Tag do controlo gvprodutos criámos o objecto Access Data Source: GridView Tasks Choose Data Source: <New data source > Access Database OK. Browse App_Data loja.mdb OK (~App_Data/loja.mdb) Next Specify columns from a table or view Produtos * WHERE Column: IdCat Operator: = Source:Control Control ID: gvcategorias Default Value: 1 Add OK (SELECT * FROM [produtos] WHERE [IdCat] =?) Next Finish 5. Testar a página Premir Ctrl + F5 ou com o botão direito do rato em cima do nome da página MasterDetailComWizard.aspx seleccionar View in Browse. C Criação de uma página Master-Detail programaticamente (através de código) com dois controlos GridView Muitas aplicações Web são construídas usando múltiplas camadas, com um ou mais componentes para fornecer acesso aos dados. Vamos criar um objecto (classe DAL Data Access Layer) para usar como fonte de dados para as nossas páginas Web. O modo de acesso aos dados de uma base de dados pode seguir um de dois modelos: Arquitectura Ligada usa o objecto DataReader para retornar os dados seleccionados. Arquitectura Desligada usa o objecto DataSet para receber os dados da base de dados. Vamos usar a arquitectura desligada objecto DataReader.

6 1. Adicionar uma classe de Acesso a Dados (DAL) ao Web Site Na janela Solution Explorer, com o botão direito do rato em cima do nome do projecto, seleccionar Add New Item seleccionar Class e mudar o nome da classe para DAL.cs. Visual Studio informa que a classe deve ser colocada no directório App_Code. Premir Yes. Como vamos usar objectos do namespace System.Data.OleDb devemos importar este package, acresecentando-o à lista dos packages já importados: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.OleDb; public class DAL private const string CONN ID=;"; private const string DBPATH Source= DataDirectory /loja.mdb"; private OleDbConnection conn = null; private OleDbDataReader dr = null; public OleDbDataReader getcategorias() conn = new OleDbConnection(); conn.connectionstring = CONN + DBPATH; conn.open(); string sqlstr = "Select * From Categorias"; cmd.commandtext = sqlstr; dr = cmd.executereader(); return dr; public void closeconnection() dr.close(); conn.close(); public OleDbDataReader getprodutosbyidcategoria(int codigo) conn = new OleDbConnection(); conn.connectionstring = CONN + DBPATH; conn.open(); string sqlstr = "Select * From Produtos Where IdCat=?"; cmd.commandtext = sqlstr; cmd.parameters.addwithvalue("idcat", codigo); dr = cmd.executereader(); return dr;

7 2. Acrescentar uma página ao Web Site Na janela Solution Explorer, com o botão direito do rato em cima do nome do projecto, seleccionar Add New Item seleccionar Web Form e mudar o nome da página para MasteDetailEmCodigoComDataReader. De um modo semelhante à página anterior adicionar uma tabela com 2 linhas e 2 colunas, colocar na 1.º linha os títulos Categorias e Produtos e na 2.ª linha dois controlos GridView com os IDs gvcategorias (GridView para mostar as categorias) e gvprodutos (GridView para mostar as produtos). As fontes de dados destes controlos GridView serão colocadas programaticamente. A fonte de dados do controlo gvcategorias é colocada no método Page_Load da página. Este método é executado sempre que a página é chamada, quer seja a 1.ª vez, quer seja um postback. No entanto só é necessário carregar os dados da Base de Dados para o controlo GridView na 1.ª invocação da página. Depois, sempre que a página efectua um postback o controlo GridView mantém os dados. protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) DAL dal = new DAL(); gvcategorias.datasource = dal.getcategorias(); gvcategorias.databind(); dal.closeconnection(); Para configurar as colunas do controlo GridView das Categorias: Seleccionar o controlo gvcategorias, premir o smart tag, seleccionar Edit Columns, des-seleccionar Auto-generate fields, seleccionar BoundField para adicionar uma coluna ligada a um campo da tabela (campo NomeCat), e premir Add. Depois na lista dos Selected fields: ao seleccionar BoundField aparece a janela das suas propriedades (BoundField properties). Nesta janela, no grupo Data, em DataField colocar o valor NomeCat. Deste modo configurámos o controlo com apenas uma coluna ligada aos dados do campo NomeCat da tabela fonte de dados. Terminámos com OK. Em seguida devemos acrescentar mais uma coluna para permitir seleccionar uma linha desta tabela (procedimentos idênticos ao passo 3 da página anterior): clicar na Smart Tag, e em GridView Tasks seleccionar Edit Columns. Debaixo de Available Fields abrir o nó Command Field, escolher Select e premir Add para o adicionar à lista dos SelectedFields. Ainda, para que ao seleccionar uma linha desta tabela seja possível determinar a chave do respectivo registo é necessário seleccionar o controlo GridView, e na janela de propriedades colocar a propriedade DataKeyNames igual a IdCat.

8 A fonte de dados do controlo gvprodutos é colocada no método que trata o evento resultante da selecção de uma linha da tabela das Categorias. Este método é executado sempre que o utilizador selecciona uma linha da tabela das Categorias. Um duplo clique num Select abre o respectivo método de tratamento de eventos, no ficheiro MasteDetailEmCodigoComDataReader.aspx.cs: protected void gvcategorias_selectedindexchanged(object sender, EventArgs e) int idcat = (int)gvcategorias.selecteddatakey.value; DAL dal = new DAL(); gvprodutos.datasource = dal.getprodutosbyidcategoria(idcat); gvprodutos.databind(); dal.closeconnection(); 3. Testar a página Premir Ctrl + F5 ou com o botão direito do rato em cima do nome da página MasteDetailEmCodigoComDataReader.aspx seleccionar View in Browse. D Actualizar, Inserir, e Apagar (Update, Insert and Delete) programaticamente com o controlo DetailsView Vamos exemplificar como actualizar, inserir ou remover registos de uma tabela (tabela produtos) usando o controlo Data-bound Web Server (Controlo Servidor Web ligado a dados) DetailsView. 1. Acrescentar uma página ao Web Site Add New Item > Web Form e mudar o nome da página para ActualizarRegistos.aspx 2. Adicionar um controlo DetailsView Para posicionar o controlo DetailsView na página podemos começar por adicionar à página, em modo Design, uma tabela de 3 linhas por 3 colunas, fazendo: Layout > Insert Table Arrastar DetailsView Smart Tag > Edit Fields Para cada campo da tabela Produtos efectuar o seguinte: em Available Fields: seleccionar BoundField e premir o botão Add para adicionar um campo aos Selected Fields. Este campo apresentará dados ligados a um campo da tabela. Para indicar qual o campo da tabela, nas propriedades do Bound Field, no grupo

9 Data preencher a propriedade DataField. Para escolher uma designação para este campo no grupo Appearence preencher a propriedade Header Text: BoundField > Properties > DataField = IdProd; Header Text = Id do Produto BoundField > Properties > DataField = IdCat; Header Text = Id da Categoria BoundField > Properties > DataField = NomeProd; Header Text = Nome do Produto BoundField > Properties > DataField = Preco; Header Text = Preço BoundField > Properties > DataField = Stock; Header Text = Stock O Bound Field IdProd deve ter a propriedade do grupo Behavior InsertVisible a False para que em modo de inserção não pareça o campo IdProd. Para carregar os dados da tabela Produtos no controlo DetailsView colocar no método Page_Load o seguinte código: protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) preencherdetailsview(); private void preencherdetailsview() DAL dal = new DAL(); DataSet ds = dal.getdatasetprodutos(); DetailsView1.DataSource = ds; DetailsView1.DataBind(); Seleccionar o controlo DetailsView e configurar as seguintes propriedades: No grupo Paging, AllowPaging a True. No grupo Behavior, AutoGenerateDeleteButton, AutoGenerateEditButton, e AutoGenerateInsertButton a True, e AutoGenerateRows a False. No grupo Data, DataKeyNames com o valor IdProd. Nas propridades do Controlo DetailsView seleccionar o separador Events, e no grupo Action efectuar duplo clique sobre PageIndexChanging, ItemDeleting, ItemInserting, ItemUpdating, e ModeChanging. O evento ModeChanging é desencadeado quando o controlo DetailsView tenta mudar entre o modo edit, insert ou read-only. A propriedade CurrentMode do controlo DetailsView pode ter 3 valores: DetailsViewMode.Edit DetailsViewMode.Insert DetailsViewMode.ReadOnly O método ChangeMode() do controlo DetailsView permite mudar o seu modo.

10 Colocar o seguinte código nos métodos de tratamento de eventos: protected void DetailsView1_PageIndexChanging(object sender, DetailsViewPageEventArgs e) DetailsView1.PageIndex = e.newpageindex; preencherdetailsview(); protected void DetailsView1_ItemDeleting(object sender, DetailsViewDeleteEventArgs e) DAL dal = new DAL(); int idprod = Convert.ToInt32(DetailsView1.DataKey.Value); dal.deleteproduto(idprod); preencherdetailsview(); protected void DetailsView1_ItemInserting(object sender, DetailsViewInsertEventArgs e) DAL dal = new DAL(); lercamposdoregisto(); dal.insertproduto(idcat, nome, preco, stock); DetailsView1.ChangeMode(DetailsViewMode.ReadOnly); preencherdetailsview(); private int idcat; private string nome; private double preco; private int stock; private void lercamposdoregisto() idcat = Convert.ToInt32( ((TextBox)DetailsView1.Rows[1].Cells[1].Controls[0]).Text); nome = ((TextBox)DetailsView1.Rows[2].Cells[1].Controls[0]).Text; preco = Convert.ToDouble( ((TextBox)DetailsView1.Rows[3].Cells[1].Controls[0]).Text); stock = Convert.ToInt32( ((TextBox)DetailsView1.Rows[4].Cells[1].Controls[0]).Text); protected void DetailsView1_ItemUpdating(object sender, DetailsViewUpdateEventArgs e) int idprod = Convert.ToInt32(DetailsView1.DataKey.Value); DAL dal = new DAL(); lercamposdoregisto(); dal.updateproduto(idprod, idcat, nome, preco, stock); DetailsView1.ChangeMode(DetailsViewMode.ReadOnly); preencherdetailsview();

11 protected void DetailsView1_ModeChanging(object sender, DetailsViewModeEventArgs e) if (e.newmode == DetailsViewMode.Edit) DetailsView1.ChangeMode(DetailsViewMode.Edit); else if (DetailsView1.CurrentMode == DetailsViewMode.Edit && e.cancelingedit) DetailsView1.ChangeMode(DetailsViewMode.ReadOnly); else if (e.newmode == DetailsViewMode.Insert) DetailsView1.ChangeMode(DetailsViewMode.Insert); else if (DetailsView1.CurrentMode == DetailsViewMode.Insert && e.cancelingedit) DetailsView1.ChangeMode(DetailsViewMode.ReadOnly); preencherdetailsview(); Na classe DAL acrescentar o seguinte código: private void getconnection() conn = new OleDbConnection(); conn.connectionstring = CONN + DBPATH; conn.open(); public void closeconnection() dr.close(); conn.close(); public OleDbDataReader getcategorias() getconnection(); string strsql = "Select * From Categorias"; cmd.commandtext = strsql; dr = cmd.executereader(); return dr; public OleDbDataReader getprodutosbyidcategoria(int codigo) getconnection(); string strsql = "Select * From Produtos Where IdCat=?"; cmd.commandtext = strsql; cmd.parameters.addwithvalue("idcat", codigo); dr = cmd.executereader(); return dr;

12 public DataSet getdatasetprodutos() getconnection(); string strsql = "Select * From Produtos"; cmd.commandtext = strsql; OleDbDataAdapter da = new OleDbDataAdapter(); da.selectcommand = cmd; DataSet ds = new DataSet(); da.fill(ds); return ds; public int updateproduto(int idprod, int idcat, string nomeprod, double preco, int stock) getconnection(); string strsql = "Update Produtos SET IdCat=?, NomeProd=?, Preco=?, Stock=? Where IdProd=?"; cmd.commandtext = strsql; cmd.parameters.addwithvalue("idcat", idcat); cmd.parameters.addwithvalue("nomeprod", nomeprod); cmd.parameters.addwithvalue("preco", preco); cmd.parameters.addwithvalue("stock", stock); cmd.parameters.addwithvalue("idprod", idprod); int resultado = cmd.executenonquery(); conn.close(); return resultado; public int insertproduto(int idcat, string nomeprod, double preco, int stock) getconnection(); string strsql = "Insert Into Produtos (IdCat, NomeProd, Preco, Stock ) values (?,?,?,?)"; cmd.commandtext = strsql; cmd.parameters.addwithvalue("idcat", idcat); cmd.parameters.addwithvalue("nomeprod", nomeprod); cmd.parameters.addwithvalue("preco", preco); cmd.parameters.addwithvalue("stock", stock); int idprod = cmd.executenonquery(); conn.close(); return idprod; public int deleteproduto(int idprod) getconnection(); string strsql = "Delete From Produtos Where IdProd=?"; cmd.commandtext = strsql; cmd.parameters.addwithvalue("idprod", idprod); int resultado = cmd.executenonquery(); conn.close(); return resultado;

13 Para informação mais detalhada ver: Mostrar dados de uma base de dados Microsoft Access num controlo GridView: Walkthrough: Creating a Web Page to Display Access Database Data Mostrar dados de uma base de dados Microsoft SQL Server num controlo GridView com Ordenação e Paginação: Walkthrough: Basic Data Access in Web Pages Trabalhar com registos entre os quais exista uma relação master-detail: Walkthrough: Creating Master/Detail Web Pages in Visual Studio Editar e Inserir Registos: Walkthrough: Editing and Inserting Data in Web Pages with the DetailsView Web Server Control Criar um componente de acesso a dados e usá-lo como fonte de dados numa página: Walkthrough: Data Binding to a Custom Business Object Tutorial 1: Creating a Data Access Layer Tutorial 1: Creating a Data Access Layer Tutorial 2: Creating a Business Logic Layer Tutorial 2: Creating a Business Logic Layer Tutorial 3: Master Pages and Site Navigation Tutorial 3: Master Pages and Site Navigation Tutorial 16: An Overview of Inserting, Updating, and Deleting Data Tutorial 16: An Overview of Inserting, Updating, and Deleting Data ASP.NET Quickstart Tutorials - Binding to Objects Binding to Objects