Quando estamos trabalhando no desenvolvimento de softwares, seja com persistência de dados em banco, ou com listas temporárias, temos a necessidade de listar dados para nossos usuários finais. Uma das formas de fazer isso, é o uso de do componente GridView. Isso é muito comum, e é possível que você esteja precisando disso neste momento que está lendo a postagem, então sim, vamos aprender Como listar dados no GridView C#.
Para nosso exemplo, vamos criar um projeto simples em ASP.Net, do tipo WebForms Applications, como mostrado a seguir. Nomeie como desejar.
Após a criação do projeto, o primeiro passo a fazer, é realizar uma conexão com o banco de dados, e para isso, vamos acrescentar ao arquivo Web.Config do projeto, uma linha responsável por manter a string de conexão com o banco. Neste projeto, estou usando como base o banco de dados SQL Server, assim, sua script de conexão segue o padrão mostrado abaixo
Parâmetros
- Data Source, caminho do servidor para conexão;
- Initial Catalog, nome do banco de dados que será utilizado para conexão;
- User ID, usuário utilizado para se conectar ao banco, e por fim;
- Password, a senha de conexão.
Com estes dados, já será possível realizar a conexão com o SQL Server. Então, inclua no Web.Config do projeto o código mostrado a seguir:
1 2 3 4 |
<connectionStrings> <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="Server=SEU_USUARIO\SQLEXPRESS;Initial Catalog=Db_CodigoMaster;Persist Security Info=False;Integrated Security=true;" /> </connectionStrings> |
Já com a conexão definida para o projeto, vamos ao banco de dados, criar uma tabela simples de Clientes, para que possamos consultá-la e assim, exibir os dados em nosso GridView. Vejamos.
Execute o seguinte comando de criação da tabela em seu banco de dados.
1 2 3 4 5 |
CREATE TABLE Cliente( IdCliente INT IDENTITY(1,1), Nome VARCHAR(200), Idade INT ) |
Com a tabela criada, vamos inserir alguns registros. Utilize o script de inserção de dados como exemplo.
1 2 3 4 5 |
INSERT INTO dbo.Cliente(Nome, Idade) VALUES ('Claudeci Goularte', 29), ('João Marcos', 32), ('Lucas José', 24), ('Mariazinha Fernanda', 28); |
Agora que temos uma conexão definida com o banco, já criamos um tabela e também já povoamos alguns dados, podemos então retomar estes dados e mostrá-los para o usuário.
Caso já não tenha criado, no momento de criação do projeto no Visual Studio, crie uma página Default.aspx, por exemplo, e vamos inserir nela um componente <asp:GridView>, que será o responsável (como já dito) por mostrar os dados ao usuário.
Alguns detalhes podem ser adicionados ao GridView para melhor exibição dos dados, mas isso, vamos deixar para uma próxima oportunidade, por enquanto, vamos nos concentrar em aprender como mostrar os dados, que é o mais importante neste caso de hoje.
O GridView adicionado à página, ficará mais ou menos como mostrado a seguir. Veja:
1 |
<asp:GridView ID="GridView1" runat="server"></asp:GridView> |
Temos duas formas de exibir os dados em nosso GridView. A primeira, é realizando um consulta no banco, por meio de um script em C#, e posteriormente, vinculando os dados retornados ao GridView, e uma segunda maneira, é utilizarmos um segundo componente para conexão, e vincularmos nosso GridView a ele, de forma dinâmica.
Neste tutorial de hoje, vou mostrar as duas formas. Então, vejamos.
A primeira, e mais simples, porém não muito utilizada, pelo fato de possuirmos menos controle sobre os dados, visto que estes estão diretamente ligados oa GridView, é vincular o GridViewdiretamente ao componente que fará a conexão com o banco, que neste caso é o SqlDataSource.
Adicione um componente SqlDataSource em sua página, no meu caso, vou adicionar na Default.aspx. Em modo Design, clique na opção oculta (seta ao lado do componente) e selecione a opção Configure Data Source…. Nesta ação, será aberta a janela de configuração, onde vamos informar a StringConnetion criada no arquivo Web.Config.
No combo Which data connection … database?, selecione a StringConnection criada, no meu caso, DefaultConnection, e clique em Next.
No passo seguinte, marque (caso não esteja marcado) a opção Specify columns from a table or view, e em Name, selecione a tabela que criamos (Cliente), deixe marcado a opção *, na seção Columns e clique em Next novamente, e Finish.
Agora já temos uma conexão ativa com o banco de dados, vamos então vincular o GridView ao nosso SqlDataSource configurado. Semelhante à configuração do SqlDataSource, clique na opção oculta do GridView, como mostrado abaixo, e selecione na opção Choose Data Source, o componente SqlDataSource, provavelmente com nome de SqlDataSource1.
Ao fazer isso, o GridView já vai mostrar uma prévia das colunas existentes na tabela, basta executar o projeto no browser que serão mostrados os quatro registros que inserimos.
Como dito, existe outra forma de fazer essa listagem de dados. Agora vamos fazer isso, diretamente pelo código fonte, ou seja, criaremos um objeto para listar os dados e iremos vincular o GridViewdinamicamente.
Esse método é bom, quando temos a necessidade de manipular alguns dados, ou mesmo, quando estes devem ser mostrados dinâmicamente. O primeiro passa a fazer, será o mesmo listado anteriormente, inserir um GridView na página, porém, não fazermos vinculo ao SqlDataSource. Na verdade, nem precisaremos dele neste caso, então, para não ter erro, exclua os componentes (GridView e SqlDataSource) inseridos anteriormente, ou se preferir, insira um novo GridView na tela.
O segundo passo, vamos uma classe chamada Cliente, e um método para consulta dos dados chamado ListaCliente.
Crie a seguinte classe no seu projeto:
1 2 3 4 5 6 |
public class Cliente { public int IdCliente { get; set; } public string Nome { get; set; } public int Idade { get; set; } } |
Agora, crie uma variável pública em seu arquivo, chamada connectionString. Ela será responsável por nos retornar (do Web.Config) a string de conexão existente,no meu caso, a DefaultConnection.
1 |
public string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString; |
Crie também o método de consulta, ListaCliente(), segundo o script abaixo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
protected List<Cliente> ListaCliente() { SqlConnection dbCnn = null; SqlCommand dbCommand = null; SqlDataReader dataReader = null; List<Cliente> collection = null; try { using (dbCnn = new SqlConnection(connectionString)) { using (dbCommand = new SqlCommand("SELECT * FROM Cliente", dbCnn)) { dbCnn.Open(); dbCommand.CommandType = CommandType.Text; dbCommand.ExecuteNonQuery(); collection = PovoarLisCliente(ref collection, ref dataReader, dbCommand); dbCnn.Close(); } } } catch (Exception ex) { if (dbCnn.State == ConnectionState.Open) dbCnn.Close(); throw ex; } return collection; } |
Observe que o método criado, utiliza outro método interno, o PovoarLisCliente(). O que estamos fazendo neste caso, é manter nosso método com apenas um nível de abstração, então, certos processamentos, serão executados dentro deste novo método. Crie o método de acordo com o script abaixo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
private static List<Cliente> PovoarLisCliente(ref List<Cliente> collection, ref SqlDataReader dataReader, SqlCommand dbCommand) { using (dataReader = dbCommand.ExecuteReader()) { collection = new List<Cliente>(); if (dataReader.HasRows) { while (dataReader.Read()) collection.Add(RetornaDados(ref dataReader)); } if (!(dataReader.IsClosed)) dataReader.Close(); dataReader.Dispose(); } return collection; } |
Novamente, temos a mesma situação, o método PovoarLisCliente(), utiliza outro método para povoamento dos dados da entidade, RetornaDados(). Este métod tem apenas a função de pegar os dados do banco e fazer a correta conversão para os tipos de dados do nosso objeto Cliente. Assim, utilize o script abaixo para criação do método RetornaDados():
1 2 3 4 5 6 7 8 9 10 |
private static Cliente RetornaDados(ref SqlDataReader DataReader) { Cliente entity = new Cliente(); entity.IdCliente = Convert.ToInt32(DataReader["IdCliente"].ToString()); entity.Nome = DataReader["Nome"].ToString(); entity.Idade = Convert.ToInt32(DataReader["Idade"].ToString()); return entity; } |
Você pode colocar todos os scripts dentro de um único método, porém, assim ele ficará mais organizado, pois cada método tem uma função em particular.
Agora que já temos nosso objeto Cliente e os métodos que serão necessários, vamos enfim povoar o GridView na tela. O primeiro passo agora será chamar o método ListaCliente() e povoar os dados retornados por ele, em uma lista de objetos do tipo Cliente.
1 2 |
List<Cliente> listaDeClientes = new List<Cliente>(); listaDeClientes = ListaCliente(); |
Feito isso, nossa lista de Clientes estará povoada, agora basta vinculá-la ao GridView, da seguinte maneira:
1 2 |
GridView1.DataSource = listaDeClientes; GridView1.DataBind(); |
Neste ponto, você já pode (caso o GridView esteja marcado para gerar as colunas automaticamente) executar, que os dados já serão exibidos, porém, caso deseje melhorar a exibição dos dados, pode adicionar as colunas previamente ao GridView, de forma a serem formatadas conforme deseja. Veja como ficaria o código do GridView neste caso:
1 2 3 4 5 6 7 |
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="IdCliente" HeaderText="Código" HeaderStyle-HorizontalAlign="Left" /> <asp:BoundField DataField="Nome" HeaderText="Nome do cliente" HeaderStyle-HorizontalAlign="Left" /> <asp:BoundField DataField="Idade" HeaderText="Idade" HeaderStyle-HorizontalAlign="Left" /> </Columns> </asp:GridView> |
Veja como ficarão os dados ao exibí-los no browser.
