Criando CRUD com Asp.Net Web Forms 4.

5
Publicado 26 de fevereiro de 2014 | Por ​ |​
Paulo Henrique Menezes​ 12 comentários

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.
Dentro do projeto crie uma pasta chamada Model. Dentro dela, crie uma nova
classe chamada ClienteModel conforme a imagem a seguir:
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.
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:
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:
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.
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:
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:
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.

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:
Volte ao projeto e verifique que o banco de dados foi criado:
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:

1 <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:

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:

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:

1 <style
type="text/css">

2 .modalPopup
{

3 background:
#FFFFFF;

4 }
5 </style>

Vamos criar o método para carregar a modal.

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

Volte ao code behind da pagina e adicione o método: CarregarModal e depois

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

1 <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:

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:

Alterando:
Dados alterados:

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

Posts relacionados:

1. Crud com Entity Framework fácil parte 2

2. Criando um Web Service seguro com SoapHeader
3. CRUD Com ADO.NET
4. Criando uma área Administrativa
5. Crud com Entity Framework fácil

Postado em ​ASP.NET​ ,​
C#​,​Visual Studio​| Marcado como ​
ASP.NET​,​
ASP.NET MVC​,
,​
Code First​CRUD​ ,​
Data Annotations​ ,​ ,​
Entity Framework​ ,​
Entity Framework 6​Visual
,​
Studio 2012​ Visual Studio 2013​,​WebForm

12 respostas para “Criando CRUD com Asp.Net Web Forms 4.5”