Este é o terceiro artigo de uma série onde desenvolveremos um aplicativo Web em C# .NET usando banco de dados MySQL, nessa etapa iremos criar a página que adiciona e lista as categorias existentes no banco de dados.
Criando a página ListarCategorias
Com o seu projeto aberto, vá ao Solution Explorer, clique com o botão direito no diretório Categoria, vá em Add, e clique em Web Form conforme a figura a seguir:
A janela specify name for item será exibida dê o nome de ListaCategoria e clique em OK, veja a figura a seguir:
Agora vá ao Solution Explorer, clique com o botão direito na página ListaCategoria, e clique em Set As Start Page, conforme a figura a seguir:
Execute a aplicação (pressione a tecla F5). Será exibida uma mensagem perguntando se deseja habilitar a opção de debug. Marque a primeira opção e clique em OK. Veja a figura a seguir:
Como não foi feito nada na página, ela está em branco, no navegador não será exibido nada, fecha a página. Volte ao Visual Studio, note que na barra de status está na cor laranja com a palavra READY, isso informa que a aplicação está em execução, pare a execução (pressione SHIFT + F5), a barra de status ficará na cor azul, permitindo que você continue a implementação.
Com a página ListaCategoria aberta, clique no botão DESIGN para podermos adicionar componentes na página. Veja a figura a seguir:
Vá ao ToolBox, na categoria Data, clique duas vezes no componente SqlDataSource. O componente será inserido na página, dê um clique no componente, ao lado dele aparecerá uma seta, clique nela e no menu clique em Configure Data Source...
A janela Configure Data Source será exibida, clique no botão New Connection, conforme a figura a seguir:
A janela Add Connection será exibida, por padrão o Visual Studio automaticamente sugere o SQL Server como fonte de dados, nesse projeto usaremos o MySQL, então clique no botão Change, veja a figura:
Será exibida a janela Change Data Source, selecione MySQL Database na lista a esquerda e clique em OK, conforme a figura a seguir:
Agora digite o server name, user name, e o password, clique em Save Password, os banco de dados serão exibidos, selecione o banco ecommerce. Se os nomes dos banco de dados não aparecerem o usuário ou a senha está incorreta. Veja a figura a seguir:
Clique no botão Test Connection, será exibida a mensagem Test Connection Succeded. Assim o procedimento está correto, clique em OK na mensagem, e OK na janela Add Connection, a janela Configura Data Source exibirá que a nova conexão está disponível na lista. Veja a figura seguir:
Clique em Next, na segunda etapa deixe a opção "YES, SAVE THIS CONNECTION AS" marcada e digite ecommerceConnectionString no campo de texto, conforme a figura a seguir:
Clique em Next, na terceira etapa marque a opção "Specify a custom SQL statement or stored procedure", conforme figura a seguir:
Clique em Next, na quarta etapa, será exibida 4 guias SELECT, UPDATE, INSERT, DELETE. Cada uma delas pode receber um código SQL, veja a figura a seguir:
No momento iremos trabalhar apenas com o SELECT e o DELETE,
Na guia SELECT, copie o código a seguir:
SELECT CODIGO, DESCRICAO, CATEGORIA FROM categoria ORDER BY DESCRICAO
Na guia DELETE, copie o código a seguir:
DELETE FROM categoria WHERE codigo = ?codigo
O SELECT irá exibir os dados ordenados pela descrição, o DELETE vai excluir o registro que contém o código informado pelo usuário.
Com as duas guias prontas, clique em Next para avançar para a próxima etapa Test Query. Clique no botão Test Query, como o banco não possuí registros, será apenas exibida o nome das colunas, veja a figura a seguir:
Clique no botão Finish para encerrar a configuração do componente SQL Data Source.
Pule uma linha pressionando a tecla Enter, e vá ao ToolBox e clique duas vezes no componente GridView, assim será adicionado o componente, conforme a figura a seguir:
Clique na seta do Grid View, e em Choose Data Source, clique na guia e selecione SqlDataSource1, automaticamente o Visual Studio irá colocar o nome nas colunas. Veja a figura a seguir:
O Menu irá expandir e oferecer novas opções, marque Enable Deleting e Enable Selecion, isso adicionará links DELETE e SELECT ao lado de cada registro exibido no Grid View, veja a figura a seguir:
Feito isso o seu grid está pronto para exibir os dados, deixaremos esse SqlDataSource1 só para exibir os dados, e adicionaremos um outro para realizar o cadastro de novos grupos.
Dê um clique a frente do grid view, e pule uma linha pressionando Enter. Vá ao ToolBox, clique duas vezes no componente Form View, pressione Enter para pular linha e clique duas vezes no componente SqlDataSource. Veja a figura a seguir:
Primeiro iremos configurar o SqlDataSource2, clique no componente, vá a seta, e clique em Configure Data Source. A janela Configure Data Source será exibida, na primeira etapa selecione ecommerceConectionString, e clique em Next.
Na segunda etapa, marque a opção "Specify columns from a table or view", em Name, selecione Categoria, deixe a coluna * marcada, conforme a figura a seguir:
Clique no botão Advanced, marque a opção Generate, INSERT, UPDATE and DELETE statements, conforme a figura a seguir:
Clique em Next, na terceira etapa clique em Finish.
O Visual Studio automaticamente criará as query para INSERT, UPDATE e DELETE, porém essas query contém colchetes ([ ]), e isso ocasionará erros durante a execução da aplicação, e precisamos corrigir isso.
Clique em Source, conforme a figura a seguir:
Será exibido o código da página, com o código referente ao SqlDataSource2 selecionado. Pressione CRTL + H para exibir o Localizar, digite [ , e clique em Replace All, conforme a figura a seguir:
Digite ] e clique em Replace All.
Agora as query estão corretas. Agora após a tag
, adicione o código selecionado conforme a figura:
Agora volte ao Modo Design, clique no FormView, clique na seta, no menu vá em Choose Data Source, e selecione SqlDataSource2, clique em Refresh Schema.
O Form View automaticamente mudará conforme os campos da tabela categoria, veja a figura:
Agora clique no Grid View, vá ao painel Propriedades, clique em Events, clique duas vezes em SelectedIndexChanged conforme a figura a seguir:
Isso adicionará o evento ao GridView e criará um vinculo com o Form View.
Com o método criado, copie o código a seguir:
protected voidGridView1_SelectedIndexChanged(object sender, EventArgs e)
{
SqlDataSource2.SelectParameters["CODIGO"].DefaultValue =
GridView1.SelectedValue.ToString(); //na mesma linha
FormView1.ChangeMode(FormViewMode.Edit);
FormView1.Visible = true;
}
Volte ao Design da página, clique no FormView1, e adicione os eventos ItemInserted, ItemDeleted, ItemUpdated, conforme a figura a seguir:
Os métodos foram criados, copie o código a seguir:
protected void FormView1_ItemInserted(object sender, FormViewInsertedEventArgs e)
{
GridView1.DataBind();
FormView1.Visible = false;
}
protected void FormView1_ItemDeleted(object sender, FormViewDeletedEventArgs e)
{
GridView1.DataBind();
FormView1.Visible = false;
}
protected void FormView1_ItemUpdated(object sender, FormViewUpdatedEventArgs e)
{
GridView1.DataBind();
FormView1.Visible = false;
}
Agora volte ao Design da página, pule uma linha após o SqlDataSource2, vá ao ToolBox, na categoria Standard, e clique duas vezes no LinkButton conforme a figura a seguir:
Vá ao painel Propriedades, altera a propriedade Text para Cadastrar e o ID para lbCadastrar, vá na guia Events, e clique duas vezes em Click para adicionar o método ao linkButton.
Com o método criado, copie o código a seguir:
protected void lbCadastrar_Click(object sender, EventArgs e)
{
FormView1.ChangeMode(FormViewMode.Insert);
FormView1.Visible = true;
}
No momento é possível cadastrar a categoria, porém não é possível alterá-la e esse será nosso próximo passo que é dar possibilidade ao usuário de alterar a categoria.
Clique no SqlDataSource2, clique na seta e vá em Configure Data Source. Na primeira etapa clique em Next, na segunda etapa clique em next.
Na terceira etapa, clique na guia SELECT, altere a query para o código a seguir:
SELECT * FROM categoria WHERE CODIGO=?CODIGO
Isso fará com que o select filtre os registros onde o código informado é o código do registro na tabela, isso é necessário para alterar e excluir uma categoria.
Na quarta etapa, clique em finish.
Vá ao código do SqlDataSource2, clicando no botão source. Adicione o SelectParameter, passando o código como Int32, conforme a imagem a seguir:
Obs: Toda vez que você configurar um SqlDataSource, o Visual Studio irá fazer o código na página, se em algum caso você adicionar um parâmetro a um SqlDataSource, e depois ter que reconfigurá-lo, esse parâmetro precisa ser adicionado novamente.
Volte ao modo Design, clique no GridView, vá a seta, e clique em Auto Format. Na janela Auto Format, no lado esquerdo clique em Professional e clique em ok, conforme a figura a seguir:
Isso fará com que seu GridView tenha uma aparência melhor.
Clique no Form View, vá a seta, e clique em Auto Format. Na janela Auto Format, no lado esquerdo clique em Professional e clique em ok, isso fará com que o seu Form View tenha a aparência do seu Grid View.
Agora para editar uma categoria existente, o usuário não pode alterar o código, e precisamos remover esse campo do Form View.
Clique novamente no Form View, vá na seta, e clique no botão Edit Template, conforme a figura a seguir:
Agora você poderá editar os campos do seu Form View, apague a primeira linha que se refere ao Código. Clique novamente na seta, e clique em End Template Editing, conforme a figura a seguir:
Agora vamos aplicar ordenação ao Grid View, clique nele, vá a seta, e clique em Enable Pagina e clique em Enable Sorting. Note que o campo do grid possuí hiperlinks, isso permite que os registros sejam ordenados pela coluna que for clicada.
Com o Grid View selecionado, vá ao Painel Propriedades, altere o Page Size para 10, vá a guia Events, e clique duas vezes no Evento RowDataBound.
O método será criado, copie o código a seguir:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
// varre linhas
foreach(DataControlFieldCell cell in e.Row.Cells)
{
// verifica controles da linha
foreach(Control control in cell.Controls)
{
if(control.ToString() == "System.Web.UI.WebControls.DataControlLinkButton")
{
LinkButton button = control as LinkButton;
string texto = button.Text;
if(texto == "Excluir")
// adiciona mensagem
button.Attributes.Add("onclick", "return confirm ('Deseja excluir?')");
}
}
}
}
}
A página está pronta, salve e execute a aplicação. Lembrando que a primeira que vez a página é carrega, o grid aparecerá vazio porque o banco de dados está em branco, clique no botão cadastrar para adicionar uma categoria, após o cadastro, o grid será exibido.
Teste as demais funcionalidades de alterar e excluir.
O próximo passo é criar as páginas da tabela produtos. Até mais