Criando CRUD com Asp.Net Web Forms 4.5

A Microsoft lançou recentemente o novo Framework Web Forms 4.5, que herdou muitas features do asp.net MVC. Vou falar sobre 2 novas funcionalidades do mesmo.

Vou criar uma aplicação bem simples para mostrar as novas funcionalidades.

Vou usar Visual Studio 2013 e Entity Framework 6. Você pode usar o visual studio 2012 e o EF anterior ao 6.

Vou fazer um pequeno crud usando:

  • Entity Framework Code First, LocalDB
  • Data Annotations

O Code First é desenvolver sem ter que abrir um designer ou definir um arquivo de mapeamento XML Abordagem de “convenção sobre configuração” que permite a persistência de banco de dados sem configurar nada explicitamente

Opcionalmente substituir a persistência baseada em convenção e usar uma API de código fluente para personalizar completamente o mapeamento persistência.

Ele mapea nossas classes e transforma em tabelas do nosso banco de dados. Faz isso de forma automática.

Primeiro, crie um novo projeto do tipo Web Forms com framework 4.5.

Imagem1

Dentro do projeto crie uma pasta chamada Model. Dentro dela, crie uma nova classe chamada ClienteModel conforme a imagem a seguir:

ClienteModel

Anotações:

  • Key – Identifica o id da nossa classe. Esse será o id da tabela. Pois nossa classe representa uma tabela do banco.
  • EmailAddress – Ele valida o campo para receber um email válido
  • DataType(DataType.Date) – Formatação do campo data.

Depois de ter criado a classe cliente, vamos criar o DbContext dentro da pasta Model. Crie uma nova pasta chamada ExemploDbContext. Dentro da pasta crie uma nova classe chamada DbContextExemplo.

Dbcontext

A classe tem que herdar de DbContext. Ele vai gerar o nosso banco de dados de forma automática. Dentro da classe temos um construtor chamando a classe base de conexão. Esse nome exemplo, é o nome que dei ao nosso banco, é o nome da connection string que fica no webConfig.

O DbSet é uma representação de tipo de coleção genérica de um conjunto de tipos de entidade. Por exemplo, você pode ter um DbSet <Cliente> chamada Clientes que é uma propriedade de uma classe de contexto.  Manipulamos nosso objeto por meio dele.

Você pode criar outra classe. Por exemplo, a classe endereço. Depois é adicionar ela na classe DbContext: DbSet<Endereco> Endereços.

Dentro da pasta Model, crie uma classe chamada ClienteCrud. Você poderia criar uma interface com os métodos, mas vou criar somente a classe. Crie a mesma conforme a imagem abaixo:

ClienteCrud

Perceba que estou usando o Entry do Entity Framework. Ele obtém o objeto para a entidade dada fornecendo acesso a informações sobre a entidade e a capacidade de executar ações na entidade. Podemos manipular o estado da entidade. Então em um único método, realizo o insert e o update. Temos também o método Delete que é bem simples.  O EntityState é um Enum criado pelo EF. Podemos observar a facilidade que é usar Entity Framework.

Vamos agora modificar a Default.aspx. Adicione um formview na página como mostra a imagem abaixo:

Depois, vamos adicionar um gridView. Configure o mesmo como mostra a imagem abaixo:

FormView

A versão 4.5 traz uma nova funcionalidade para os controles. Eles agora são fortemente tipados. Perceba que no formView temos o itemType e dentro dele passo a classe ClienteModel. Estou associando o meu objeto a ele.

Dentro do nosso formView temos um ValidationSummary para validar os campos que estão usando data annotation.

Você pode usar essas variáveis ​​fortemente tipadas nas expressões de ligação de dados e obter todos os benefícios da experiência de desenvolvimento do Visual Studio.

Intelissense

Na propriedade InsertMethod, foi criado o método para adicionar um novo cliente. Dentro dele temos o método TryUpdateModel. Não esqueça de colocar ele, se não vai dar error de validação. Faça conforme mostra a imagem abaixo no code behind da pagina:

codeBehind

Nosso GridView também será fortemente tipado. Na imagem acima não colocamos nada no page load para carregar o grid. Não é mais necessário. Crie um gridview com 2 link buttons como mostra a imagem abaixo:

GridView

Perceba que ele também tem a propriedade ItemType para torna-lo fortemente tipado. Para carregar o gridview, não usamos mais o DataSource. Temos que criar um método para carregar o mesmo. Na imagem acima, coloquei a propriedade SelectMethod=”CarregarGrid”.

Eu criei esse método na minha classe ClienteCrud e chamei ele na default.aspx.cs. Verifique a imagem abaixo na classe ClienteCrud.

CarregarDados

Quando rodar o projeto, o Entity Framework vai gerar o banco de forma automática.

Nosso projeto rodando. Verifique se o seu projeto está igual ao da imagem abaixo:

Index

Volte ao projeto e verifique que o banco de dados foi criado:

banco

Vamos voltar ao nosso gridView e colocar um comando chamado OnRowCommand: OnRowCommand=”gridDados_RowCommand”. Este evento ocorre quando um botão é clicado em um controle gridView.

Antes, coloque o no LinkButton1(excluir) do gridView o seguinte código: OnClientClick=”return confirm(‘Deseja excluir ?’)”. O link button vai ficar assim:


<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Excluir" OnClientClick="return confirm('Deseja excluir ?')" CommandArgument='<%#: Item.Id %>' Text="Excluir"></asp:LinkButton>

Adicionei um simples confirm do javascript. Se clicar em sim, ele vai excluir se não, ele cancela. Muito simples.

Depois, vá para o code behind e digite o seguinte código:

comandos

Podemos ver na imagem acima que dentro do método RowCommand do gridView, vamos acessar o linkbutton dentro dele por meio do GridViewCommandEventArgs. Fiz um switch se o evento for e.CommandName, que lá na grid está como Excluir e Editar, ele faz determinada ação. O e.CommandArgument vai pegar o id de cada linha associada ao commandName.

Volte ao html. Vamos usar o AjaxControlToolkit para facilitar nossa vida. Mas você pode usar jquery dialog.

Quando clicar em editar, vai abrir uma modal para alterar os dados.

Faça conforme a imagem abaixo:

panel

Criei um panel e dentro dele coloquei outro como cabeçalho. Também os controles, textbox e button para adicionar ou cancelar.

 Adicione este css:


<style type="text/css">
	.modalPopup {
		background: #FFFFFF;
	}
</style>

Vamos criar o método para  carregar a modal.

Na classe ClienteCrud crie um novo método chamado PesquisarPorId:

pesquisar

Volte ao code behind da pagina e adicione o método: CarregarModal e depois chame ele dentro do RowCommand do gridView:

MetodoCarrega

Volte a pagina html e adicione um método onclick no button salvar que está dentro do panel:


<asp:Button ID="btnSalvar" runat="server" Text="Salvar" OnClick="btnSalvar_Click"/>

Depois adicione o seguinte bloco de código dentro do método btnSalvar_Click:

MetodoAtualizar

Terminamos nosso pequeno projeto. Fiz bem simples para melhor entendimento. Mas você pode melhora-lo conforme sua necessidade.

Uma delas é validar os campos que estão dentro do modal.

O projeto final rodando:

Final

Alterando:

finalModal

Dados alterados:

finalAlterado

Deixem seus comentários e dúvidas com relação ao projeto.

Faça download do projeto: Criando CRUD com Asp.Net Web Forms 4.5

12 comentários sobre “Criando CRUD com Asp.Net Web Forms 4.5

  1. Boa tarde, utilizei esse tutorial para criar uma aplicaçao web para a faculdade, porem o meu banco não esta sendo criado. Como resolver? Fiz igual esta acima e o banco nao cria…

  2. Mas, da algum erro ? O que acontece ?

    O projeto foi colocado pra download.
    Baixa ele e verifica.

  3. Adicionei a “using Model.Cliente;”
    Mesmo assim o , não reconhece.
    “public DbSet Clientes { get; set; }”.

    Fico no aguardo.

    Obrigado!

  4. Junio. basta criar o seguinte método:

    public IEnumerable Pesquisar(string campo)
    {
    var pesquisar = db.Clientes.firstOrDefault(x => x.nome.Contains(campo));
    }

    Chama esse método no page load da pagina e coloca o texbox como parâmetro.

  5. Não seria melhor usar um CRUD separado por 4 Camadas? Visão, Entidades, DAL, Controller? E um CRUD um pouco mais completo também, utilizando mais entidades com associações entre eles. Melhor ensinar da forma correta. Abs.

    1. Olá Pedro, a ideia do Paulo Henrique é transmitir conhecimento básico sobre o CRUD com ASP.NET WebForms 4.5 e não fazer um abordagem aprofundada e tão pouco as melhores práticas.
      Se você estiver disposto a colaborar, é bem vindo. Basta entrar em contato. Poderá publicar artigos com essa abordagem.
      Ficaremos imensamente grato com sua colaboração com a comunidade e com o C# Brasil.

      Abraço e bom estudo!

Os comentários estão fechados.