cap11

ASP.NET Passo a Passo
Vinculação de Dados
Conteúdo do Capítulo
1.
2.
3.
Representar coleções usando controles vinculados
Acessar bancos de dados
Personalizar controles vinculados
ASP.NET Passo a Passo
Vinculação de Dados
Vinculação de dados com uma coleção
1.
2.
3.
Crie uma aplicação Web (Empty Web Application) de nome
DataBindORama.
Utilizando a opção Add New Item adicione ao projeto uma classe
de nome TechnologyDescriptor.
Adicione a esta classe duas propriedades string denominadas
TechnologyName e Description que representam respectivamente
o nome e a descrição de uma tecnologia.
ASP.NET Passo a Passo
Vinculação de Dados
Classe TechnologyDescriptor
public class TechnologyDescriptor
{
public String TechnologyName {get; set; }
public String Description {get; set; }
public TechnologyDescriptor(String strTechnologyName,
String strDescription) {
this.TechnologyName = strTechnologyName;
this.Description = strDescription;
}
public static List<TechnologyDescriptor>
CreateTechnologyList() {
List<TechnologyDescriptor> lTechnologies =
new List<TechnologyDescriptor>();
TechnologyDescriptor technologyDescriptor;
ASP.NET Passo a Passo
Vinculação de Dados
Classe TechnologyDescriptor
technologyDescriptor = new TechnologyDescriptor("ASP.NET",
"Handle HTTP Requests");
lTechnologies.Add(technologyDescriptor);
technologyDescriptor = new TechnologyDescriptor("Windows Forms",
"Local Client UI technology");
lTechnologies.Add(technologyDescriptor);
technologyDescriptor = new TechnologyDescriptor("ADO.NET",
"Talk to the database");
lTechnologies.Add(technologyDescriptor);
technologyDescriptor = new TechnologyDescriptor(".NET CLR",
"Modern runtime environment for manage code");
lTechnologies.Add(technologyDescriptor);
ASP.NET Passo a Passo
Vinculação de Dados
Classe TechnologyDescriptor
technologyDescriptor = new TechnologyDescriptor(".NET IL",
"Intermediary representation for .NET applications");
lTechnologies.Add(technologyDescriptor);
technologyDescriptor = new TechnologyDescriptor(".NET Compact
Framework", "Modern runtime environment for small devices");
lTechnologies.Add(technologyDescriptor);
return lTechnologies;
}
ASP.NET Passo a Passo
Vinculação de Dados
Vinculação de dados com uma coleção
1.
2.
3.
4.
Adicione a aplicação web um formulário de nome Default.aspx.
Adicione quatro controle à página criada: um ListBox, um
DropDownList, um RadioButtonList e um CheckButtonList.
Abaixo de cada um dos controles adiciona um rótulo (Label)
renomenando-os para:
LabelListBoxSelectedValue, LabelDropDownListSelectedValue,
LabelRadioButtonListSelectedValue e
LabelCheckBoxListSelectedValue.
Defina a propriedade AutoPostBack dos controle de lista para
true com objetivo de executar um PostBack sempre que um
opção do controle for selecionada.
ASP.NET Passo a Passo
Vinculação de Dados
Pagina com Componentes de Lista
ASP.NET Passo a Passo
Vinculação de Dados
Programe o evento Page_Load da página para criar a lista de
tecnologias e adicioná-la aos componentes.
1.
Instancie a lista de tecnologias
2.
Associe a propriedade DataSource para apontar a fonte de dados
do componentes para a lista.
3.
Defina a propriedade DataTextField para estabelecer que campo
da lista será utilizado para apresentação dos dados nos
componentes.
4.
Defina a propriedade DataValueField para estabelecer que campo
da lista será utilizado como valor (ou chave) dos dados.
5.
A programação deve ser executada apenas na primeira carga da
página, não sendo executada no PostBack.
ASP.NET Passo a Passo
Vinculação de Dados
protected void Page_Load(object sender, EventArgs e) {
IList techList = TechnologyDescriptor.CreateTechnologyList();
if (!this.IsPostBack) {
this.ListBox1.DataSource = techList;
this.ListBox1.DataTextField = "TechnologyName";
this.ListBox1.DataValueField = "Description";
this.DropDownList1.DataSource = techList;
this.DropDownList1.DataTextField = "TechnologyName";
this.DropDownList1.DataValueField = "Description";
this.RadioButtonList1.DataSource = techList;
this.RadioButtonList1.DataTextField = "TechnologyName";
this.RadioButtonList1.DataValueField = "Description";
this.CheckBoxList1.DataSource = techList;
this.CheckBoxList1.DataTextField = "TechnologyName";
this.CheckBoxList1.DataValueField = "Description";
this.DataBind();
}
ASP.NET Passo a Passo
Vinculação de Dados
Programe os manipuladores de evento de seleção dos controles
SelectedIndexChanged da página apresentar a opção selecionada nos
rótulos adicionados abaixo de cada componentes de lista.
protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{ this.LabelListBoxSelectedValue.Text =
this.ListBox1.SelectedValue;
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{ this.LabelDropDownListSelectedValue.Text =
this.DropDownList1.SelectedValue;
}
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs
e) { this.LabelRadioButtonListSelectedValue.Text =
this.RadioButtonList1.SelectedValue;
}
protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
{
this.LabelCheckBoxListSelectedValue.Text =
this.CheckBoxList1.SelectedValue;
}
ASP.NET Passo a Passo
Vinculação de Dados
Pagina com Componentes de Lista
ASP.NET Passo a Passo
Vinculação de Dados
Criando uma conexão com um banco de dados
1.
Adicione à aplicação um folder App_Data.
2.
Copie para a pasta o banco de dados exemplo
ASPDotNetStepByStep.mdb
3.
Adicione um formulário com nome WebFormConexao.aspx para
configurarmos uma conexão com o banco de dados.
4.
Adicione ao formulário um componente SQLDataSource.
5.
Selecione a opção “Configure Data Source” no menu do
componente. Essa opção irá executar um wizard de configuração
de conexão.
6.
Selecione o botão “new connection” no wizard. A tela de
configuração de conexão aparecerá.
7.
Selecione o botão “Change” e escolha o DataSource do tipo
“Microsoft Access Database File”
ASP.NET Passo a Passo
Vinculação de Dados
Criando uma conexão com um banco de dados
8.
Selecione o botão “Browse” e escolha o arquivo
ASPDotNetStepByStep.mdb que se encontra na pasta App_Data.
9.
Clique em Test Connection para verificar se a configuração
permite a conexão com o banco de dados.
10.
Confirme para criar a String de Conexão que deverá ser similar a
apresentada abaixo:
Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=|DataDirectory|\ASPDotNetStepByStep.mdb
11.
12.
Clique no botão Next para continuar o wizard e entrar na tela que
permite salvar a conexão no arquivo de configurações
web.config.
Confirme que deseja salvar a conexão e utilize o seguinte nome:
AspDotNetStepByStep.
ASP.NET Passo a Passo
Vinculação de Dados
Criando uma conexão com um banco de dados
13.
Clique no botão Next para continuar o wizard e entrar na tela que
permite definir o comando de acesso a dados do DataSource.
14.
O wizard propõe criar o acesso a primeira tabela que ele identifica
no banco de dados que, no caso, é a tabela DotNetReferences.
15.
Clique no botão Next para continuar o wizard e entrar na tela que
testa do acesso a dados do DataSource.
16.
Clique no botão Test Query e em seguida no botão Finish para
concluir.
ASP.NET Passo a Passo
Vinculação de Dados
Após o procedimento executado utilizando o wizard foi adicionado ao
arquivo web.config a string de conexão com o banco de dados
conforme apresentado abaixo.
<configuration>
<connectionStrings>
<add name="AspDotNetStepByStep“
connectionString="Provider=Microsoft.Jet.OLEDB.4.0;
Data Source=|DataDirectory|\ASPDotNetStepByStep.mdb"
providerName="System.Data.OleDb" />
</connectionStrings>
...
</configuration>
ASP.NET Passo a Passo
Vinculação de Dados
Executando um comando SQL e acessando o resultado com o DataReader
1.
2.
3.
4.
5.
Vamos introduzir uma página para execução de um comando para
consultar no banco de dados o título de um livro a partir do nome de um
autor.
Adicione um formulário de nome WebFormDataReader com um
componente rótulo, uma caixa de texto, um botão e uma caixa de texto.
Altere a propriedade Text do primeiro rótulo para “Autor:”. Altere a
propriedade Text do botão para “Consultar”. Altere a propriedade
TextMode da segunda caixa de texto para MultiLine.
Inclua um manipulador para o evento Click do botão e adicione o código a
seguir. O código apresentado utiliza a conexão criada para executar um
comando de consulta de livros de um determinado autor utilizando a
classe DataReader e apresenta o resultado obtido no segundo rótulo.
Execute a aplicação e consulte o livro do autor Petzold.
ASP.NET Passo a Passo
Vinculação de Dados
Aplicação de consulta de livros de um autor utilizando o DataReader
ASP.NET Passo a Passo
Vinculação de Dados
Manipulador do evento click do botão
// Cria Gerenciador de Conexões
DbProviderFactory dbFac =
DbProviderFactories.GetFactory("System.Data.OleDb");
// Cria Conexão com banco de dados
DbConnection conn = dbFac.CreateConnection();
// Acessa a configuração da conexão
string s = ConfigurationManager.ConnectionStrings["AspDotNetStepByStep"].
ConnectionString;
// atribui a configuração do arquivo ao objeto de conexão
conn.ConnectionString = s;
// Abre conexão com o banco de dados
conn.Open();
// Cria comando SQL
DbCommand com = conn.CreateCommand();
// define SQL do comando
com.CommandText = "Select * from DotNetReferences where AuthorLastName =
'" + TextBox1.Text + "'";
ASP.NET Passo a Passo
Vinculação de Dados
Manipulador do evento click do botão
// Executa comando, gerando objeto DbDataReader
DbDataReader dr = com.ExecuteReader();
// Le titulo do livro do resultado e apresenta no segundo rótulo
if (dr.HasRows)
{
// Lima o textbox2
TextBox2.Text = "";
while (dr.Read()) // Le o proximo registro
// Adiciona o livro encontrato ao TextoBox
TextBox2.Text = TextBox2.Text + dr["Title"].ToString();
}
else
TextBox2.Text = "Nenhum livro encontrado para o autor";
}
}
ASP.NET Passo a Passo
Vinculação de Dados
Tela de Consulta utilizando o DataReader
ASP.NET Passo a Passo
Vinculação de Dados
Executando um comando SQL e acessando o resultado com o Dataset
1.
Adicione um formulário de nome WebFormDataSet com um
componente de rótulo, uma caixa de texto, um botão e uma caixa de
texto.
2.
Altere as propriedades dos componentes para criar uma interface
similar ao formulário WebFormDataReader.
3.
Inclua um manipulador para o evento Click do botão e adicione o
código a seguir. O código apresentado utiliza a conexão criada para
executar um comando de consulta de livros de um determinado autor
utilizando a classe Dataset e apresenta o resultado obtido no segundo
rótulo.
4.
Execute a aplicação e consulte o livro do autor Petzold.
ASP.NET Passo a Passo
Vinculação de Dados
Manipulador do evento click do botão
// Cria Gerenciador de Conexões
DbProviderFactory dbFac =
DbProviderFactories.GetFactory("System.Data.OleDb");
// Cria Conexão com banco de dados
DbConnection conn = dbFac.CreateConnection();
// Acessa a configuração da conexão
string s = ConfigurationManager.ConnectionStrings
["AspDotNetStepByStep"].ConnectionString;
// atribui configuração do arquivo ao objeto de conexão com o banco de dados
conn.ConnectionString = s;
// Abre conexão com o banco de dados
conn.Open();
// Cria comando SQL
DbCommand com = conn.CreateCommand();
// define SQL do comando
com.CommandText = "Select * from DotNetReferences where AuthorLastName = '"
+ TextBox1.Text + "'";
ASP.NET Passo a Passo
Vinculação de Dados
Manipulador do evento click do botão
// Cria objeto DbDataAdapter para execução do comando e geração de dados
para o Dataset
DbDataAdapter da = dbFac.CreateDataAdapter();
// Define comando do DataAdapter
da.SelectCommand = com;
// Cria o objeto Dataset para armazernar o resultada da consulta SQL a ser
executada
DataSet ds = new DataSet();
// Executa o comando SQL e tranfere o resultado para o DataSet
da.Fill(ds);
// Le a tabela resultado
DataTable dt = ds.Tables[0];
ASP.NET Passo a Passo
Vinculação de Dados
Manipulador do evento click do botão
// Le registros de titulo do livro da tabela e apresenta no segundo textbox
TextBox2.Text = "";
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
// Adiciona o livro encontrato ao TextoBox
TextBox2.Text = TextBox2.Text + dt.Rows[i]["Title"].ToString();
}
}
else
TextBox2.Text = "Nenhum livro encontrado para o autor";
ASP.NET Passo a Passo
Vinculação de Dados
Vinculação de dados com Banco de dados
1.
Adicione um formulário de nome DataBindingWithDB ao projeto.
2.
Adicione ao formulário um componente AccessDataSource e
configure-o para acessar o banco de dados
ASPDotNetStepByStep.mdb com acesso à tabela DotNetReferences
3.
Defina a propriedade DataSourceMode como DataReader.
4.
Adicione na página um componente de rótulo e atribua à propriedade
Text o conteúdo “Autores e Títulos”.
5.
Abaixo do rótulo, adicione um componente ListBox. Defina a
propriedade AutoPostBack como true.
6.
Para fazer a vinculação de dados acesse no menu do componente a
opção “Choose Data Source” e selecione o AccessDataSouce
introduzido no item 2.
7.
Na opção “select data field to display...” escolha o campo
AuthorLastName para ser o campo apresentado no Listbox.
ASP.NET Passo a Passo
Vinculação de Dados
Vinculação de dados com Banco de dados
8.
Na opção “select data field to value...” escolha o campo Title para ser
o campo que representa o valor do Listbox.
9.
A vinculação de dados pode ser feita também via programação pelo
código apresentado abaixo.
10.
Para que esta programação não entre em conflito com a seleção
realizada nos passos 6,7 e 8 a vinculação realizada deve ser apagada.
Acesse no menu do componente Listbox a opção “Choose Data
Source” e selecione “(none)”.
protected void Page_Load(object sender, EventArgs e){
if (!IsPostBack) {
ListBox1.DataSource = AccessDataSource1;
ListBox1.DataTextField = "AuthorLastName";
ListBox1.DataValueField = "Title";
ListBox1.DataBind();
}
}
ASP.NET Passo a Passo
Vinculação de Dados
Vinculação de dados com Banco de dados
11.
Inclua na parte inferior do formulário um rótulo para apresentar o
valor selecionado no formulário.
12.
Inclua um manipulador para o evento SelectedIndexChanged do
formulário e acrescente o código apresentado abaixo.
13.
A figura apresenta tela da aplicação
protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{
Label2.Text = ListBox1.SelectedItem.Value;
}
ASP.NET Passo a Passo
Vinculação de Dados
Vinculação de dados com Banco de dados
1.
Adicione ao formulário um componente RadioButtonList.
2.
Defina a propriedade AutoPostBack como true.
3.
Selecione no menu do componente a opção “Choose Data Source”.
4.
Na opção “select data field to display...” escolha o campo
AuthorLastName e na opção “select data field to value...” escolha o
campo Title.
5.
Inclua um manipulador para o evento SelectedIndexChanged do
formulário e acrescente o código que transfere o valor do item
selecionado para o rótulo Label2.
6.
A aplicação é mostrada a seguir.
ASP.NET Passo a Passo
Vinculação de Dados
Aplicação com
componentes com
vinculação
ao banco de dados
ASP.NET Passo a Passo
Vinculação de Dados
Utilização do controle GridView
1.
Adicione um formulário de nome UseGridView ao projeto.
2.
Adicione ao formulário um componente GridView. Utilizando a opção
“Choose Data Source” configure o componente para acessar no
banco de dados ASPDotNetStepByStep a tabela DotNetReferences.
3.
Utilizando o menu do componente habilite as opções Paging, Sorting
e Selection.
4.
O componente apresentará o conteúdo da tabela permitindo que o
usuário seleciona a coluna de ordenação, selecione a página de
dados a ser apresentara e marque uma linha como selecionada.
5.
Altera a apresentação do componente utilizando a opção AutoFormat
do menu do componente.
ASP.NET Passo a Passo
Vinculação de Dados
Aplicação com o controle GridView
ASP.NET Passo a Passo
Vinculação de Dados
Utilização do controle FormView
1.
Adicione um formulário de nome UseFormView ao projeto.
2.
Adicione ao formulário um componente FormView. Utilizando a opção
“Choose Data Source” configure o componente para acessar no
banco de dados ASPDotNetStepByStep a tabela DotNetReferences.
3.
Utilizando o menu do componente habilite a opção Enable Paging.
4.
Atribua o título “Cadastro de Livros” ao componente utilizando a
propriedade HeaderText.
5.
Altera a apresentação do componente utilizando a opção AutoFormat
do menu do componente.
ASP.NET Passo a Passo
Vinculação de Dados
Aplicação com o controle FormView
ASP.NET Passo a Passo
Vinculação de Dados
Utilização do controle DetailsView
1.
Adicione um formulário de nome UseDetailsView ao projeto.
2.
3.
Adicione ao formulário um
componente DetailsView.
Utilizando a opção “Choose Data
Source” configure o componente
para acessar no banco de dados
ASPDotNetStepByStep.
Na opção tela de configuração
da tabela de dados “Configure
the Selected Statement”,
selecione a opção “Specify a
custom SQL Statement or stored
procedure”.
ASP.NET Passo a Passo
Vinculação de Dados
Utilização do controle DetailsView
3.
Esta opção abre a possibilidade de definirmos comandos para
consulta, inserção, alteração e exclusão de dados na tabela.
4.
5.
Inclua os comandos a seguir
nas abas próprias para cada
caso.
Após a configuração dos
comandos, habilite as opções
Enable Inserting, Enable
Updating e Enable Deleting no
menu do componente
DetailsView. Habilite também a
opção Enable Paging.
ASP.NET Passo a Passo
Vinculação de Dados
Comandos para consulta, inserção, alteração e exclusão de dados na
tabela.
SELECT ID, Title, AuthorLastName, AuthorFirstName, Topic,
Publisher FROM DotNetReferences
UPDATE DotNetReferences set Title = @Title, AuthorLastName =
@AuthorLastName, AuthorFirstName = @AuthorFirstName, Topic =
@Topic, Publisher = @Publisher WHERE ID = @ID
INSERT Into DotNetReferences (ID, Title, AuthorLastName,
AuthorFirstName, Topic, Publisher) VALUES (@ID, @Title,
@AuthorLastName, @AuthorFirstName, @Topic, @Publisher)
DELETE from DotNetReferences WHERE ID = @ID
ASP.NET Passo a Passo
Vinculação de Dados
Aplicação com o controle DetailsView
ASP.NET Passo a Passo
Vinculação de Dados
Aplicação com o controle DetailsView com opção de edição selecionada
ASP.NET Passo a Passo
Vinculação de Dados
Utilização do controle DataList
1.
Adicione um formulário de nome UseDataList ao projeto.
2.
3.
4.
Adicione ao formulário um
componente DataList. Utilizando
a opção “Choose Data Source”
configure o componente para
acessar no banco de dados
ASPDotNetStepByStep.
Na opção de “Property Builder”
configure para mostrar Header e
Footer. Defina também para
apresentar duas colunas.
Defina a propriedade Caption
como “Autores e Títulos”.
ASP.NET Passo a Passo
Vinculação de Dados
Aplicação com DataList configurado com 2 colunas
ASP.NET Passo a Passo
Vinculação de Dados
Vinculação de dados com LINQ
1.
Adicione um formulário de nome UseLinq ao projeto.
2.
Adicione um componente rótulo, uma caixa de texto, um botão e um
GridView.
3.
Ajuste a propriedade Text do rótulo para “Tecnologia” e a propriedade
Text do botão para “Consultar”.
4.
Será utilizado o LINQ para consultar as tecnologias com o texto
digitado na caixa de texto e o resultado será apresentado no
GridView.
5.
Crie o manipulador para o evento do botão e inclua o código
apresentado a seguir.
6.
O código apresentado realiza uma consulta Linq para identificar as
tecnologias com o texto informado e vincula o resultado ao GridView.
ASP.NET Passo a Passo
Vinculação de Dados
Vinculação de dados com LINQ
protected void Button1_Click(object sender, EventArgs e){
List<TechnologyDescriptor> techList =
TechnologyDescriptor.CreateTechnologyList();
GridView1.DataSource = from technologyDescriptor in techList
where technologyDescriptor.TechnologyName.Contains(TextBox1.Text) == true
orderby technologyDescriptor.TechnologyName.Length
select new
{
technologyDescriptor.Description,
technologyDescriptor.TechnologyName
};
GridView1.DataBind();
}
ASP.NET Passo a Passo
Vinculação de Dados
Aplicação com vinculação de dados e consulta LINQ
ASP.NET Passo a Passo
Vinculação de Dados
Vinculação de dados com LINQ
1.
Caso o usuário deseje apresentar apenas a descrição da tecnologia a
codificação do select deve ser feita conforme apresentada abaixo.
2.
A figura apresenta o resultado da aplicação alterando o select.
protected void Button1_Click(object sender,
EventArgs e){
...
select technologyDescriptor.Description;
...
}