ASP .NET – Model Binding com Web Forms – Realizando o CRUD – Parte 02

Na primeira parte desta série de artigos, apresentamos o Model Binding, criamos o modelo, o banco de dados, as tabelas e preenchemos as tabelas com dados exibindo-os em nossa aplicação.

Este artigo vai mostrar como criar, atualizar e deletar dados usando o Model Binding pela definição das propriedades: DeleteMethod, InsertMethod e UpdateMethod.

Essas propriedades recebem o nome do método que trata a operação correspondente, e no método forneceremos a lógica para interação com os dados.

Vamos continuar usando o projeto criado na primeira parte do tutorial: Escola_Macoratti

Neste artigo, você vai aprender a:

Adicionar dynamic data templates
Habilitar a atualização e a exclusão de dados através dos métodos do Model Binding
Aplicar regras de validação aos dados
Habilitar a criação de um novo registro no banco de dados

Recursos usados neste artigo:

Microsoft Visual Studio 2012 ou Microsoft Visual Studio Express 2012 for Web
Banco de dados SQL Server 2008 Express

Adicionando Dynamic data templates

Abra a solução Escola_Macoratti criada na primeira parte deste artigo.

Para fornecer a melhor experiência com o usuário e minimizar a repetição de código, vamos usar dynamic data templates. Podemos fazer isso usando o Nuget.

A partir do menu TOOLS, clique em Library Package Manager -> Manage Nuget Package, e localize e instale o pacote DynamicDataTemplatesVB.

Instale o pacote no seu projeto.

Após a instalação, verifique na janela Solution Explorer uma pasta chamada DynamicData.

Nessa pasta, você encontrará os templates que serão automaticamente aplicados ao controles dinâmicos em nossos web forms.

Habilitando a atualização e a exclusão de dados

Habilitar os usuários para atualizar e deletar registros no banco de dados é muito parecido com selecionar dados.

Nas propriedades UpdateMethod e DeleteMethod, vamos especificar os nomes dos métodos que irão realizar essas operações. Com o controle GridView, podemos especificar a geração automática dos botões editar e deletar.

O código destacado em azul abaixo mostra as adições ao código do controle GridView na página Alunos.aspx:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" 
CodeBehind="Alunos.aspx.vb" Inherits="Escola_Macoratti.Alunos" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
     <asp:GridView runat="server" ID="alunosGrid"
        ItemType="Escola_Macoratti.Macoratti.Models.Aluno" DataKeyNames="AlunoID" 
        SelectMethod="alunosGrid_GetDados" UpdateMethod="alunosGrid_UpdateItem"
        DeleteMethod="studentsGrid_DeleteItem"
        AutoGenerateEditButton="true" AutoGenerateDeleteButton="true" 
        AutoGenerateColumns="false">
        <Columns>
            <asp:DynamicField DataField="AlunoID" />
            <asp:DynamicField DataField="Sobrenome" />
            <asp:DynamicField DataField="Nome" />
            <asp:DynamicField DataField="Ano" />          
            <asp:TemplateField HeaderText="Total de Créditos">
              <ItemTemplate>
                <asp:Label ID="Label1" Text="<%# Item.Matriculas.Sum(Function(en) en.Curso.Creditos)%>" 
                    runat="server" />
              </ItemTemplate>
            </asp:TemplateField>        
        </Columns>
    </asp:GridView>
</asp:Content>

Abra o arquivo Aluno.aspx.vb e, no code-behind, inclua a declaração ao namespace: imports System.Data.Entity.Infrastructure.

A seguir, inclua o código abaixo para os métodos atualizar(UpdateItem) e deletar(DeleteItem):

    Public Sub alunosGrid_UpdateItem(ByVal _alunoID As Integer)
        Using db As EscolaContext = New EscolaContext()
            Dim item As Aluno = Nothing
            item = db.Alunos.Find(_alunoID)
            If item Is Nothing Then
                ModelState.AddModelError("", String.Format("Item com o id {0} não foi localizado", _alunoID))
                Return
            End If
            TryUpdateModel(item)
            If ModelState.IsValid Then
                db.SaveChanges()
            End If
        End Using
    End Sub

    Public Sub alunosGrid_DeleteItem(ByVal _alunoID As Integer)
        Using db As EscolaContext = New EscolaContext()
            Dim item As Aluno = New Aluno() With {.AlunoID = _alunoID}
            db.Entry(item).State = System.Data.EntityState.Deleted
            Try
                db.SaveChanges()
            Catch ex As DbUpdateConcurrencyException
                ModelState.AddModelError("", String.Format("Item com id {0} não existe mais no banco de dados.", _alunoID))
            End Try
        End Using
    End Sub

O método TryUpdateModel aplica os valores correspondentes vinculados aos dados do formulário online para o item de dados. O item de dados é recuperado com base no valor do parâmetro ID.

A enumeração EntityState.Deleted indica que o objeto foi deletado do contexto e, depois que as alterações forem salvas, o estado do objeto será alterado para Detached.

Impondo requisitos de validação

Os atributos de validação que você aplicou ao nome, ao sobrenome e à propriedade Ano na classe Aluno são aplicadas automaticamente ao atualizar os dados. Os controles DynamicField adicionam validadores ao cliente e ao servidor com base nos atributos de validação. As propriedades nome e sobrenome são ambas obrigatórias. O nome não pode exceder 20 caracteres de comprimento, e o sobrenome não pode exceder 40 caracteres. O Ano deve ser um valor válido para a enumeração AnoAcademico.

Se o usuário violar um dos requisitos de validação, a atualização não vai prosseguir. Para ver a mensagem de erro, adicione um controle ValidationSummary acima do GridView. Para exibir os erros de validação do modelo de ligação, defina a propriedade ShowModelStateErrors como true no arquivo Alunos.aspx no modo Source logo acima do controle GridView:

<asp:ValidationSummary ID=”ValidationSummary” ShowModelStateErrors=”true” runat=”server” />

Vamos executar a aplicação novamente. Observe que temos agora os botões Edit e Delete disponíveis e que podemos realizar atualizações e exclusões:

Observe que quando estamos no modo de edição o valor para a propriedade AnoAcademico é renderizado como um dropdownlist. A propriedade Ano é um valor enumeração e o dynamic data template especifica para valores enumeração um dropdownlist. Você pode encontra esse template abrindo o arquivo Enumeration_Edit.ascx na pasta DynamicData -> FieldTemplate:

Se você fornecer valores válidos, a atualização será completada com sucesso. Se você violar um dos requisitos da validação, a atualização vai falhar e uma mensagem de erro será exibida acima do controle GridView:

Incluindo novos registros

O controle GridView não inclui a propriedade InserMethod, e por isso não pode ser usado para adicionar novos registros com o model binding. Podemos encontrar a propriedade InsertMethod nos controles FormView, DetailsView ou ListView. Neste artigo, vamos usar o controle FormView para adicionar novos registros.

A primeira coisa a fazer é incluir um link para uma nova página que vamos criar para adicionar novos registros.

Abra o arquivo Alunos.aspx e no modo Source inclua a linha de código abaixo logo acima de ValidationSummary:

<asp:HyperLink NavigateUrl=”~/IncluirAluno.aspx” Text=”Incluir Novo Aluno” runat=”server” />

Executando a aplicação novamente, veremos a exibição do link conforme figura abaixo:

Agora vamos incluir a página IncluirAluno.aspx no projeto.

No menu PROJECT, clique em Add New Item e selecione o template Web Form using Master page informando o nome IncluirAluno.aspx.

Selecione a master page Site.Master e clique em OK.

Você vai renderizar os campos para adicionar um novo aluno usando um controle DynamicEntity. O controle DynamicEntity renderiza as propriedades editáveis na classe especificada na propriedade ItemType. A propriedade AlunoID foi marcada com o atributo [ScaffoldColumn (false)], de modo que não ela não será renderizada. No espaço reservado mainContent da página IncluirAluno, adicione o seguinte código:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="IncluirAluno.aspx.vb" Inherits="Escola_Macoratti.IncluirAluno" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:ValidationSummary runat="server" ShowModelStateErrors="true" />
<asp:FormView runat="server" ID="addAlunoForm"
    ItemType="Escola_Macoratti.Macoratti.Models.Aluno" 
    InsertMethod="addAlunoForm_InsertItem" DefaultMode="Insert"
    RenderOuterTable="false" OnItemInserted="addAlunoForm_ItemInserted">
    <InsertItemTemplate>
        <fieldset>
            <ol>
                <asp:DynamicEntity runat="server" Mode="Insert" />
            </ol>
            <asp:Button runat="server" Text="Inserir" CommandName="Insert" />
            <asp:Button runat="server" Text="Cancelar" CausesValidation="false" OnClick="cancelButton_Click" />
        </fieldset>
    </InsertItemTemplate>
</asp:FormView>
</asp:Content>

Nesse código, o FormView é muito similar ao formulário que foi criado usando o ASP .NET Scaffolding, o qual instalamos em nosso projeto. Essa ferramenta permite que você gere views baseadas em nossos modelos para Web Forms.

No arquivo code-behind IncluirAlunos.aspx.vb, inclua a declaração ao namespace.

Imports Escola_Macoratti.Macoratti.Models

E a seguir inclua o código abaixo para os métodos InsertItem e ItemInserted e para o evento cancelButton:

   Public Sub addAlunoForm_InsertItem()
        Dim item = New Aluno()
        TryUpdateModel(item)
        If ModelState.IsValid Then
            Using db As EscolaContext = New EscolaContext()
                db.Alunos.Add(item)
                db.SaveChanges()
            End Using
        End If
    End Sub

    Protected Sub cancelButton_Click(ByVal sender As Object, ByVal e As EventArgs)
        Response.Redirect("~/Alunos.aspx")
    End Sub

    Protected Sub addAlunoForm_ItemInserted(ByVal sender As Object, ByVal e As FormViewInsertedEventArgs)
        Response.Redirect("~/Alunos.aspx")
    End Sub

Salve todas a alterações no projeto e execute a aplicação.

Ao clicar no link Incluir Aluno na página de Alunos, será exibida a página abaixo que permite incluir um novo aluno:

Informando os dados e clicando no botão Inserir, um novo aluno será criado conforme mostra a página Alunos:

Concluímos assim nosso objetivo de permitir a atualização, exclusão e inclusão de dados.

No próximo artigo, vermos como habilitar a ordenação, paginação e filtragem dos dados.

Pegue o projeto complete até este nível aqui: Escola_Macoratti_CRUD.zip

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: