Validação, formulários e auxiliares do ASP.NET MVC 4

Por Equipe de Campos da Web

Baixar o Kit de Treinamento do Web Camps

No ASP.NET MVC 4 Models and Data Access Hands-on Lab, você vem carregando e exibindo dados do banco de dados. Neste Laboratório Prático, você adicionará ao aplicativo da Music Store a capacidade de editar esses dados.

Com essa meta em mente, primeiro você criará o controlador que dará suporte às ações CRUD (Criar, Ler, Atualizar e Excluir) de álbuns. Você gerará um modelo de Exibição de Índice aproveitando ASP.NET recurso de scaffolding do MVC para exibir as propriedades dos álbuns em uma tabela HTML. Para aprimorar essa exibição, você adicionará um auxiliar HTML personalizado que truncará descrições longas.

Posteriormente, você adicionará o Editar e Criar Exibições que permitirá alterar os álbuns no banco de dados, com a ajuda de elementos de forma como listas suspensas.

Por fim, você permitirá que os usuários excluam um álbum e também impedirá que eles insiram dados errados validando suas entradas.

Este Laboratório Prático pressupõe que você tenha conhecimento básico de ASP.NET MVC. Se você não usou ASP.NET MVC antes, recomendamos que você acesse ASP.NET Laboratório Prático de Conceitos Básicos do MVC .

Este laboratório orienta você pelos aprimoramentos e novos recursos descritos anteriormente aplicando pequenas alterações a um aplicativo Web de exemplo fornecido na pasta Origem.

Observação

Todos os snippets e código de exemplo estão incluídos no Kit de Treinamento de Campos da Web, disponível em Versões do Microsoft-Web/WebCampTrainingKit. O projeto específico deste laboratório está disponível em ASP.NET Auxiliares, Formulários e Validação do MVC 4.

Objetivos

Neste Hands-On Lab, você aprenderá a:

  • Criar um controlador para dar suporte a operações CRUD
  • Gerar uma exibição de índice para exibir propriedades de entidade em uma tabela HTML
  • Adicionar um auxiliar HTML personalizado
  • Criar e personalizar um Modo de Exibição de Edição
  • Diferenciar entre métodos de ação que reagem a chamadas HTTP-GET ou HTTP-POST
  • Adicionar e personalizar um Modo de Exibição de Criação
  • Manipular a exclusão de uma entidade
  • Valide a entrada do usuário

Pré-requisitos

Você deve ter os seguintes itens para concluir este laboratório:

Instalação

Instalando snippets de código

Por conveniência, grande parte do código que você gerenciará ao longo deste laboratório está disponível como snippets de código do Visual Studio. Para instalar os snippets de código, execute o arquivo .\Source\Setup\CodeSnippets.vsi .

Se você não estiver familiarizado com os snippets de Visual Studio Code e quiser aprender a usá-los, consulte o apêndice deste documento "Apêndice B: Usando snippets de código".


Exercícios

Os exercícios a seguir compõem este laboratório Hands-On:

  1. Criando o controlador do Gerenciador de Lojas e sua exibição índice
  2. Adicionando um auxiliar HTML
  3. Criando o modo de exibição Editar
  4. Adicionando um modo de exibição criar
  5. Manipulando a exclusão
  6. Adicionando validação
  7. Usando jQuery não discreto no lado do cliente

Observação

Cada exercício é acompanhado por uma pasta End que contém a solução resultante que você deve obter depois de concluir os exercícios. Você pode usar essa solução como um guia se precisar de ajuda adicional para trabalhar nos exercícios.

Tempo estimado para concluir este laboratório: 60 minutos

Exercício 1: Criando o controlador do Gerenciador de Lojas e sua exibição índice

Neste exercício, você aprenderá a criar um novo controlador para dar suporte a operações CRUD, personalizar seu método de ação Index para retornar uma lista de álbuns do banco de dados e, por fim, gerar um modelo de Exibição de Índice aproveitando ASP.NET recurso de scaffolding do MVC para exibir as propriedades dos álbuns em uma tabela HTML.

Tarefa 1 – Criando o StoreManagerController

Nesta tarefa, você criará um novo controlador chamado StoreManagerController para dar suporte a operações CRUD.

  1. Abra a solução Begin localizada na pasta Source/Ex1-CreatingTheStoreManagerController/Begin/ .

    1. Você precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.

    2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.

    3. Por fim, crie a solução clicando em Compilar | solução de build.

      Observação

      Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você precisará executar essas etapas depois de abrir uma solução existente deste laboratório.

  2. Adicione um novo controlador. Para fazer isso, clique com o botão direito do mouse na pasta Controladores no Gerenciador de Soluções, selecione Adicionar e, em seguida, o comando Controlador. Altere o Nome do Controlador para StoreManagerController e verifique se a opção controlador MVC com ações de leitura/gravação vazias está selecionada. Clique em Adicionar.

    Caixa de diálogo Adicionar controlador

    Caixa de diálogo Adicionar Controlador

    Uma nova classe Controller é gerada. Como você indicou adicionar ações para leitura/gravação, métodos stub para eles, ações CRUD comuns são criadas com comentários TODO preenchidos, solicitando a inclusão da lógica específica do aplicativo.

Tarefa 2 – Personalizando o índice StoreManager

Nesta tarefa, você personalizará o método de ação Índice StoreManager para retornar uma Exibição com a lista de álbuns do banco de dados.

  1. Na classe StoreManagerController, adicione as seguintes diretivas using .

    (Snippet de código – ASP.NET MVC 4 Auxiliares e Formulários e Validação – Ex1 usando MvcMusicStore)

    using System.Data;
    using System.Data.Entity;
    using MvcMusicStore.Models;
    
  2. Adicione um campo ao StoreManagerController para manter uma instância de MusicStoreEntities.

    (Snippet de código – ASP.NET MVC 4 Auxiliares e Formulários e Validação – Ex1 MusicStoreEntities)

    public class StoreManagerController : Controller
    {
        private MusicStoreEntities db = new MusicStoreEntities();
    
  3. Implemente a ação Índice StoreManagerController para retornar uma Exibição com a lista de álbuns.

    A lógica de ação controlador será muito semelhante à ação Índice do StoreController gravada anteriormente. Use LINQ para recuperar todos os álbuns, incluindo informações de Gênero e Artista para exibição.

    (Snippet de código – ASP.NET MVC 4 Auxiliares e Formulários e Validação – Ex1 StoreManagerController Index)

    //
    // GET: /StoreManager/
    
    public ActionResult Index()
    {
        var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
             .OrderBy(a => a.Price);
    
        return this.View(albums.ToList());
    }
    

Tarefa 3 – Criando a exibição de índice

Nesta tarefa, você criará o modelo Exibição de Índice para exibir a lista de álbuns retornados pelo Controlador StoreManager .

  1. Antes de criar o novo modelo de Exibição, você deve criar o projeto para que a caixa de diálogo Adicionar Exibição saiba mais sobre a classe Album a ser usada. Selecione Compilar | Crie o MvcMusicStore para compilar o projeto.

  2. Clique com o botão direito do mouse dentro do método de ação Índice e selecione Adicionar Exibição. Isso abrirá a caixa de diálogo Adicionar Exibição .

    Adicionar exibição

    Adicionando uma exibição de dentro do método Index

  3. Na caixa de diálogo Adicionar Exibição, verifique se o Nome da Exibição é Índice. Selecione a opção Criar uma exibição fortemente tipada e selecione Álbum (MvcMusicStore.Models) na lista suspensa Classe modelo. Selecione Lista na lista suspensa Modelo de scaffold . Deixe o Mecanismo de exibição para Razor e os outros campos com o valor padrão e clique em Adicionar.

    Adicionando uma exibição de índice

    Adicionando uma exibição de índice

Tarefa 4 – Personalizando o scaffold da exibição de índice

Nesta tarefa, você ajustará o modelo de exibição simples criado com ASP.NET recurso de scaffolding MVC para que ele exiba os campos desejados.

Observação

O suporte ao scaffolding no ASP.NET MVC gera um modelo de Exibição simples que lista todos os campos no modelo de Álbum. O scaffolding fornece uma maneira rápida de começar a usar uma exibição fortemente tipada: em vez de ter que escrever o modelo de Exibição manualmente, o scaffolding gera rapidamente um modelo padrão e, em seguida, você pode modificar o código gerado.

  1. Examine o código criado. A lista gerada de campos fará parte da tabela HTML a seguir que o Scaffolding está usando para exibir dados tabulares.

    @model IEnumerable<MvcMusicStore.Models.Album>
    
    @{
         ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <p>
         @Html.ActionLink("Create New", "Create")
    </p>
    <table>
         <tr>
              <th>
                    @Html.DisplayNameFor(model => model.GenreId)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.ArtistId)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.Title)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.Price)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.AlbumArtUrl)
              </th>
              <th></th>
         </tr>
    
    @foreach (var item in Model) {
         <tr>
              <td>
                    @Html.DisplayFor(modelItem => item.GenreId)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.ArtistId)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Title)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Price)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.AlbumArtUrl)
              </td>
              <td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
                    @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
                    @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
              </td>
         </tr>
    }
    
    </table>
    
  2. Substitua o código da <tabela> pelo código a seguir para exibir apenas os campos Gênero, Artista, Título do Álbum e Preço . Isso exclui as colunas AlbumId e URL de Arte do Álbum . Além disso, ele altera as colunas GenreId e ArtistId para exibir suas propriedades de classe vinculadas de Artist.Name e Genre.Name e remove o link Detalhes .

    <table>
        <tr>
          <th></th>
          <th>Genre</th>
          <th>Artist</th>
          <th>Title</th>
          <th>Price</th>
        </tr>
    
        @foreach (var item in Model) {
         <tr>
              <td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
    
                    @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Genre.Name)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Artist.Name)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Title)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.Price)
              </td>
         </tr>
        }
    </table>
    
  3. Altere as descrições a seguir.

    @model IEnumerable<MvcMusicStore.Models.Album>
    @{
        ViewBag.Title = "Store Manager - All Albums";
    }
    
    <h2>Albums</h2>
    

Tarefa 5 – Executando o aplicativo

Nesta tarefa, você testará se o modelo StoreManagerIndex View exibe uma lista de álbuns de acordo com o design das etapas anteriores.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager para verificar se uma lista de álbuns é exibida, mostrando seu Título, Artista e Gênero.

    Navegando na lista de álbuns

    Navegando na lista de álbuns

Exercício 2: Adicionar um auxiliar HTML

A página Índice StoreManager tem um problema potencial: as propriedades Título e Nome do Artista podem ser longas o suficiente para gerar a formatação da tabela. Neste exercício, você aprenderá a adicionar um auxiliar HTML personalizado para truncar esse texto.

Na figura a seguir, você pode ver como o formato é modificado devido ao comprimento do texto quando você usa um tamanho pequeno do navegador.

Navegando na lista de Álbuns com texto não truncado

Navegando na lista de Álbuns sem texto truncado

Tarefa 1 – Estender o auxiliar HTML

Nesta tarefa, você adicionará um novo método Truncate ao objeto HTML exposto em ASP.NET modos de exibição MVC. Para fazer isso, você implementará um método de extensão para a classe interna System.Web.Mvc.HtmlHelper fornecida pelo ASP.NET MVC.

Observação

Para ler mais sobre métodos de extensão, visite este artigo do msdn. https://msdn.microsoft.com/library/bb383977.aspx.

  1. Abra a solução Begin localizada na pasta Source/Ex2-AddingAnHTMLHelper/Begin/ . Caso contrário, você poderá continuar usando a solução End obtida concluindo o exercício anterior.

    1. Se você abriu a solução Begin fornecida, precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.

    2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.

    3. Por fim, crie a solução clicando em Compilar | solução de build.

      Observação

      Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você precisará executar essas etapas depois de abrir uma solução existente deste laboratório.

  2. Abra a Exibição de Índice do StoreManager. Para fazer isso, no Gerenciador de Soluções expanda a pasta Exibições e, em seguida, o StoreManager e abra o arquivo Index.cshtml.

  3. Adicione o código a seguir abaixo da diretiva @model para definir o método auxiliar Truncate .

    @model IEnumerable<MvcMusicStore.Models.Album>
    
    @helper Truncate(string input, int length)
    {
         if (input.Length <= length) {
              @input
         } else {
              @input.Substring(0, length)<text>...</text>
         }
    } 
    
    @{
         ViewBag.Title = "Store Manager - All Albums";
    }
    
    <h2>Albums</h2>
    

Tarefa 2 – Truncando texto na página

Nesta tarefa, você usará o método Truncate para truncar o texto no modelo Exibir.

  1. Abra a Exibição de Índice do StoreManager. Para fazer isso, no Gerenciador de Soluções expanda a pasta Exibições e, em seguida, o StoreManager e abra o arquivo Index.cshtml.

  2. Substitua as linhas que mostram o Nome do Artista e o Título do Álbum. Para fazer isso, substitua as linhas a seguir.

    <tr>
         <td>
              @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
    
              @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
         </td>
         <td>
              @Html.DisplayFor(modelItem => item.Genre.Name)
         </td>
         <td>
              @Truncate(item.Artist.Name, 25)
         </td>
         <td>
              @Truncate(item.Title, 25)
         </td>
         <td>
              @Html.DisplayFor(modelItem => item.Price)
         </td>
    </tr>
    

Tarefa 3 – Executando o aplicativo

Nesta tarefa, você testará se o modelo StoreManagerIndex View trunca o Título e o Nome do Artista do Álbum.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager para verificar se textos longos na coluna Título e Artista estão truncados.

    Títulos truncados e artistas

    Títulos truncados e nomes de artistas

Exercício 3: Criando o Modo de Exibição de Edição

Neste exercício, você aprenderá a criar um formulário para permitir que os gerentes da loja editem um Álbum. Eles procurarão a URL /StoreManager/Editar/id (id sendo a ID exclusiva do álbum a ser editado), fazendo assim uma chamada HTTP-GET para o servidor.

O método de ação Desativar Controlador recuperará o Álbum apropriado do banco de dados, criará um objeto StoreManagerViewModel para encapsulá-lo (juntamente com uma lista de Artistas e Gêneros) e, em seguida, o passará para um modelo view para renderizar a página HTML de volta para o usuário. Esta página conterá um <elemento de formulário> com caixas de texto e listas suspensas para editar as propriedades do Álbum.

Depois que o usuário atualiza os valores do formulário do Álbum e clica no botão Salvar , as alterações são enviadas por meio de uma chamada HTTP-POST de volta para /StoreManager/Editar/id. Embora a URL permaneça a mesma que na última chamada, ASP.NET MVC identifica que desta vez é um HTTP-POST e, portanto, executa um método de ação Editar diferente (um decorado com [HttpPost]).

Tarefa 1 – Implementando o método de ação de edição HTTP-GET

Nesta tarefa, você implementará a versão HTTP-GET do método de ação Editar para recuperar o Álbum apropriado do banco de dados, bem como uma lista de todos os Gêneros e Artistas. Ele empacotará esses dados no objeto StoreManagerViewModel definido na última etapa, que será passado para um modelo de Exibição para renderizar a resposta.

  1. Abra a solução Begin localizada na pasta Source/Ex3-CreatingTheEditView/Begin/ . Caso contrário, você poderá continuar usando a solução End obtida concluindo o exercício anterior.

    1. Se você abriu a solução Begin fornecida, precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.

    2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.

    3. Por fim, crie a solução clicando em Compilar | solução de build.

      Observação

      Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você precisará executar essas etapas depois de abrir uma solução existente deste laboratório.

  2. Abra a classe StoreManagerController . Para fazer isso, expanda a pasta Controladores e clique duas vezes em StoreManagerController.cs.

  3. Substitua o método de ação Editar HTTP-GET pelo código a seguir para recuperar o Álbum apropriado, bem como as listas Gêneros e Artistas .

    (Snippet de código – ASP.NET mvc 4 auxiliares e formulários e validação - Ex3 StoreManagerController HTTP-GET Editar a ação)

    public ActionResult Edit(int id)
    {
        Album album = this.db.Albums.Find(id);
    
        if (album == null)
        {
             return this.HttpNotFound();
        }
    
        this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
        this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
    
        return this.View(album);
    }
    

    Observação

    Você está usando System.Web.MvcSelectList para Artistas e Gêneros em vez da Lista System.Collections.Generic .

    SelectList é uma maneira mais limpa de preencher listas suspensas HTML e gerenciar coisas como seleção atual. A instanciação e a configuração posterior desses objetos ViewModel na ação do controlador tornarão o cenário editar formulário mais limpo.

Tarefa 2 – Criando o modo de exibição Editar

Nesta tarefa, você criará um modelo Editar Exibição que exibirá posteriormente as propriedades do álbum.

  1. Crie o Modo de Exibição de Edição. Para fazer isso, clique com o botão direito do mouse dentro do método de ação Editar e selecione Adicionar Exibição.

  2. Na caixa de diálogo Adicionar Exibição, verifique se o Nome da Exibição é Editar. Marque a caixa de seleção Criar uma exibição fortemente tipada e selecione Álbum (MvcMusicStore.Models) na lista suspensa Exibir classe de dados . Selecione Editar na lista suspensa Modelo de scaffold . Deixe os outros campos com o valor padrão e clique em Adicionar.

    Adicionando um modo de exibição Editar

    Adicionando um modo de exibição Editar

Tarefa 3 – Executando o aplicativo

Nesta tarefa, você testará se a página StoreManagerEditar Modo de Exibição exibe os valores das propriedades do álbum passado como parâmetro.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager/Editar/1 para verificar se os valores das propriedades do álbum passado são exibidos.

    Exibição de Edição do Álbum de Edição

    Exibição de Edição do Álbum de Navegação

Tarefa 4 – Implementando listas suspensas no Modelo do Editor de Álbuns

Nesta tarefa, você adicionará listas suspensas ao modelo De exibição criado na última tarefa, para que o usuário possa selecionar em uma lista de Artistas e Gêneros.

  1. Substitua todo o código do conjunto de campos do Álbum pelo seguinte:

    <fieldset>
         <legend>Album</legend>
    
         @Html.HiddenFor(model => model.AlbumId)
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Title)
         </div>
         <div class="editor-field">
              @Html.EditorFor(model => model.Title)
              @Html.ValidationMessageFor(model => model.Title)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Price)
         </div>
         <div class="editor-field">
              @Html.EditorFor(model => model.Price)
              @Html.ValidationMessageFor(model => model.Price)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.AlbumArtUrl)
         </div>
         <div class="editor-field">
              @Html.EditorFor(model => model.AlbumArtUrl)
              @Html.ValidationMessageFor(model => model.AlbumArtUrl)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Artist)
         </div>
         <div class="editor-field">
              @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
              @Html.ValidationMessageFor(model => model.ArtistId)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Genre)
         </div>
         <div class="editor-field">
              @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
              @Html.ValidationMessageFor(model => model.GenreId)
         </div>
    
         <p>
              <input type="submit" value="Save" />
         </p>
    </fieldset>
    

    Observação

    Um auxiliar Html.DropDownList foi adicionado para renderizar listas suspensas para escolher Artistas e Gêneros. Os parâmetros passados para Html.DropDownList são:

    1. O nome do campo de formulário ("ArtistId").
    2. A SelectList de valores para a lista suspensa.

Tarefa 5 – Executando o aplicativo

Nesta tarefa, você testará se a página StoreManagerEditar Modo de Exibição exibe listas suspensas em vez de campos de texto De artista e ID de gênero.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager/Editar/1 para verificar se ela exibe listas suspensas em vez de campos de texto De artista e ID de gênero.

    Navegando no Modo de Exibição de Edição do Álbum com listas suspensas

    Exibição de Edição do Álbum de Navegação, desta vez com listas suspensas

Tarefa 6 – Implementando o método de ação Editar HTTP-POST

Agora que o Modo de Exibição de Edição é exibido conforme o esperado, você precisa implementar o método DE Ação de Edição HTTP-POST para salvar as alterações feitas no Álbum.

  1. Feche o navegador, se necessário, para retornar à janela do Visual Studio. Abra StoreManagerController na pasta Controladores .

  2. Substitua HTTP-POST Editar código de método de ação pelo seguinte (observe que o método que deve ser substituído é a versão sobrecarregada que recebe dois parâmetros):

    (Snippet de código – ASP.NET mvc 4 auxiliares e formulários e validação - Ex3 StoreManagerController HTTP-POST Editar a ação)

    [HttpPost]
    public ActionResult Edit(Album album)
    {
         if (ModelState.IsValid)
         {
              this.db.Entry(album).State = EntityState.Modified;
              this.db.SaveChanges();
    
              return this.RedirectToAction("Index");
         }
    
         this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
         this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
    
         return this.View(album);
    }
    

    Observação

    Esse método será executado quando o usuário clicar no botão Salvar do Modo de Exibição e executar um HTTP-POST dos valores de formulário de volta para o servidor para mantê-los no banco de dados. O decorador [HttpPost] indica que o método deve ser usado para esses cenários HTTP-POST. O método usa um objeto Album . ASP.NET MVC criará automaticamente o objeto Album com base nos valores de formulário> postados<.

    O método executará estas etapas:

    1. Se o modelo for válido:

      1. Atualize a entrada do álbum no contexto para marcá-la como um objeto modificado.
      2. Salve as alterações e redirecione para a exibição de índice.
    2. Se o modelo não for válido, ele preencherá o ViewBag com o GenreId e o ArtistId e retornará o modo de exibição com o objeto Album recebido para permitir que o usuário execute qualquer atualização necessária.

Tarefa 7 – Executando o aplicativo

Nesta tarefa, você testará se a página StoreManager Editar Modo de Exibição salva os dados atualizados do Álbum no banco de dados.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager/Editar/1. Altere o título do álbum para Carregar e clique em Salvar. Verifique se o título do álbum realmente mudou na lista de álbuns.

    Atualizando um álbum

    Atualizando um álbum

Exercício 4: Adicionando um modo de exibição create

Agora que o StoreManagerController dá suporte à capacidade de Edição , neste exercício você aprenderá a adicionar um modelo Criar Modo de Exibição para permitir que os gerentes da loja adicionem novos Álbuns ao aplicativo.

Como você fez com a funcionalidade Editar, você implementará o cenário Criar usando dois métodos separados na classe StoreManagerController :

  1. Um método de ação exibirá um formulário vazio quando os gerentes da loja visitarem pela primeira vez a URL /StoreManager/Create .
  2. Um segundo método de ação manipulará o cenário em que o gerenciador da loja clica no botão Salvar dentro do formulário e envia os valores de volta para a URL /StoreManager/Create como um HTTP-POST.

Tarefa 1 – Implementando o método de ação Criar HTTP-GET

Nesta tarefa, você implementará a versão HTTP-GET do método de ação Criar para recuperar uma lista de todos os Gêneros e Artistas, empacotar esses dados em um objeto StoreManagerViewModel , que será então passado para um modelo view.

  1. Abra a solução Begin localizada na pasta Source/Ex4-AddingACreateView/Begin/ . Caso contrário, você poderá continuar usando a solução End obtida concluindo o exercício anterior.

    1. Se você abriu a solução Begin fornecida, precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.

    2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.

    3. Por fim, crie a solução clicando em Compilar | solução de build.

      Observação

      Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você precisará executar essas etapas depois de abrir uma solução existente deste laboratório.

  2. Abra a classe StoreManagerController . Para fazer isso, expanda a pasta Controladores e clique duas vezes em StoreManagerController.cs.

  3. Substitua o código do método de ação Criar pelo seguinte:

    (Snippet de código - ASP.NET mvc 4 auxiliares e formulários e validação - Ex4 StoreManagerController HTTP-GET Criar a ação)

    //
    // GET: /StoreManager/Create
    
    public ActionResult Create()
    {
         this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
         this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");
    
         return this.View();
    }
    

Tarefa 2 – Adicionar o modo de exibição Criar

Nesta tarefa, você adicionará o modelo Criar Exibição que exibirá um novo formulário de Álbum (vazio).

  1. Clique com o botão direito do mouse dentro do método Criar ação e selecione Adicionar Exibição. Isso abrirá a caixa de diálogo Adicionar Exibição.

  2. Na caixa de diálogo Adicionar Exibição, verifique se o Nome da Exibição é Criar. Selecione a opção Criar uma exibição fortemente tipada e selecione Álbum (MvcMusicStore.Models) na lista suspensa Classe de modelo e Criar na lista suspensa Modelo de scaffold . Deixe os outros campos com o valor padrão e clique em Adicionar.

    Adicionando uma exibição de criação

    Adicionando o modo de exibição Criar

  3. Atualize os campos GenreId e ArtistId para usar uma lista suspensa, conforme mostrado abaixo:

    ...
    <fieldset>
         <legend>Album</legend>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.GenreId, "Genre")
         </div>
         <div class="editor-field">
              @Html.DropDownList("GenreId", String.Empty)
              @Html.ValidationMessageFor(model => model.GenreId)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.ArtistId, "Artist")
         </div>
         <div class="editor-field">
              @Html.DropDownList("ArtistId", String.Empty)
              @Html.ValidationMessageFor(model => model.ArtistId)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Title)
         </div>
        ...
    

Tarefa 3 – Executando o aplicativo

Nesta tarefa, você testará se a página StoreManagerCreate View exibe um formulário de Álbum vazio.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager/Create. Verifique se um formulário vazio é exibido para preencher as novas propriedades do Álbum.

    Criar Exibição com um formulário vazio

    Criar Exibição com um formulário vazio

Tarefa 4 – Implementando o método de ação criar HTTP-POST

Nesta tarefa, você implementará a versão HTTP-POST do método de ação Criar que será invocado quando um usuário clicar no botão Salvar . O método deve salvar o novo álbum no banco de dados.

  1. Feche o navegador, se necessário, para retornar à janela do Visual Studio. Abra a classe StoreManagerController . Para fazer isso, expanda a pasta Controladores e clique duas vezes em StoreManagerController.cs.

  2. Substitua HTTP-POST Criar código de método de ação pelo seguinte:

    (Snippet de código – ASP.NET Ação MVC 4 Auxiliares e Formulários e Validação – Ex4 StoreManagerController HTTP- POST Create)

    [HttpPost]
    public ActionResult Create(Album album)
    {
         if (ModelState.IsValid)
         {
              this.db.Albums.Add(album);
              this.db.SaveChanges();
    
              return this.RedirectToAction("Index");
         }
    
         this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
         this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
    
         return this.View(album);
    }
    

    Observação

    A ação Criar é bastante semelhante ao método de ação Editar anterior, mas em vez de definir o objeto como modificado, ele está sendo adicionado ao contexto.

Tarefa 5 – Executando o aplicativo

Nesta tarefa, você testará se a página StoreManager Create View permite criar um novo Álbum e, em seguida, redireciona para o Modo de Exibição de Índice StoreManager.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager/Create. Preencha todos os campos de formulário com dados para um novo Álbum, como o da figura a seguir:

    Criando um álbum

    Criando um álbum

  3. Verifique se você foi redirecionado para o Modo de Exibição de Índice StoreManager que inclui o novo Álbum recém-criado.

    Novo álbum criado

    Novo álbum criado

Exercício 5: Manipulando exclusão

A capacidade de excluir álbuns ainda não foi implementada. É disso que se trata este exercício. Como antes, você implementará o cenário Excluir usando dois métodos separados na classe StoreManagerController :

  1. Um método de ação exibirá um formulário de confirmação
  2. Um segundo método de ação manipulará o envio do formulário

Tarefa 1 – Implementando o método de ação de exclusão HTTP-GET

Nesta tarefa, você implementará a versão HTTP-GET do método de ação Delete para recuperar as informações do álbum.

  1. Abra a solução Begin localizada na pasta Source/Ex5-HandlingDeletion/Begin/ . Caso contrário, você poderá continuar usando a solução End obtida concluindo o exercício anterior.

    1. Se você abriu a solução Begin fornecida, precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.

    2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.

    3. Por fim, crie a solução clicando em Compilar | Compilar Solução.

      Observação

      Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você precisará executar essas etapas depois de abrir uma solução existente neste laboratório.

  2. Abra a classe StoreManagerController . Para fazer isso, expanda a pasta Controladores e clique duas vezes em StoreManagerController.cs.

  3. A ação Excluir controlador é exatamente igual à ação anterior do controlador Detalhes do Repositório: consulta o objeto album do banco de dados usando a ID fornecida na URL e retorna a Exibição apropriada. Para fazer isso, substitua o código do método de ação HTTP-GET Delete pelo seguinte:

    (Snippet de código – ASP.NET ação Auxiliares e Formulários e Validação do MVC 4 – Ex5 Manipulando exclusão HTTP-GET Delete)

    //
    // GET: /StoreManager/Delete/5
    
    public ActionResult Delete(int id)
    {
         Album album = this.db.Albums.Find(id);
    
         if (album == null)
         {
              return this.HttpNotFound();
         }
    
         return this.View(album);
    }
    
  4. Clique com o botão direito do mouse dentro do método de ação Excluir e selecione Adicionar Exibição. Isso abrirá a caixa de diálogo Adicionar Exibição.

  5. Na caixa de diálogo Adicionar Exibição, verifique se o Nome da exibição é Excluir. Selecione a opção Criar uma exibição fortemente tipada e selecione Álbum (MvcMusicStore.Models) na lista suspensa Classe de modelo. Selecione Excluir na lista suspensa Modelo de scaffold . Deixe os outros campos com o valor padrão e clique em Adicionar.

    Adicionando um modo de exibição Excluir

    Adicionando uma exibição de exclusão

  6. O modelo Excluir mostra todos os campos do modelo. Você mostrará apenas o título do álbum. Para fazer isso, substitua o conteúdo da exibição pelo seguinte código:

    @model MvcMusicStore.Models.Album
    @{
         ViewBag.Title = "Delete";
    }
    <h2>Delete Confirmation</h2>
    
    <h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>
    
    @using (Html.BeginForm()) {
         <p>
              <input type="submit" value="Delete" /> |
              @Html.ActionLink("Back to List", "Index")
         </p>
    }
    

Tarefa 2 – Executando o aplicativo

Nesta tarefa, você testará se a página StoreManagerExcluir Exibição exibe um formulário de exclusão de confirmação.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager. Selecione um álbum para excluir clicando em Excluir e verifique se o novo modo de exibição foi carregado.

    A captura de tela mostra um link Excluir selecionado, o que faz com que uma janela Excluir Confirmação seja aberta.

    Excluindo um álbum

Tarefa 3 – Implementando o método de ação de exclusão HTTP-POST

Nesta tarefa, você implementará a versão HTTP-POST do método de ação Excluir que será invocado quando um usuário clicar no botão Excluir . O método deve excluir o álbum no banco de dados.

  1. Feche o navegador, se necessário, para retornar à janela do Visual Studio. Abra a classe StoreManagerController . Para fazer isso, expanda a pasta Controladores e clique duas vezes em StoreManagerController.cs.

  2. Substitua o código do método de ação de exclusão HTTP-POST pelo seguinte:

    (Snippet de código – ASP.NET Ação de exclusão HTTP-POST de exclusão de formulários e formulários do MVC 4 – Ex5 tratamento de exclusão HTTP-POST)

    //
    // POST: /StoreManager/Delete/5
    
    [HttpPost]
    public ActionResult Delete(int id, FormCollection collection)
    {
         Album album = this.db.Albums.Find(id);
         this.db.Albums.Remove(album);
         this.db.SaveChanges();
    
         return this.RedirectToAction("Index"); 
    }
    

Tarefa 4 – Executando o aplicativo

Nesta tarefa, você testará se a página Excluir Exibição do StoreManager permite excluir um Álbum e redireciona para o Modo de Exibição de Índice StoreManager.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager. Selecione um álbum para excluir clicando em Excluir. Confirme a exclusão clicando no botão Excluir :

    A captura de tela mostra a janela Excluir Confirmação.

    Excluindo um álbum

  3. Verifique se o álbum foi excluído, pois ele não aparece na página Índice .

Exercício 6: Adicionando validação

Atualmente, os formulários Criar e Editar que você tem em vigor não executam nenhum tipo de validação. Se o usuário deixar um campo obrigatório em branco ou digitar letras no campo de preço, o primeiro erro que você receberá será do banco de dados.

Você pode adicionar validação ao aplicativo adicionando Anotações de Dados à classe de modelo. As Anotações de Dados permitem descrever as regras que você deseja aplicar às propriedades do modelo e ASP.NET MVC cuidará da imposição e exibição da mensagem apropriada aos usuários.

Tarefa 1 – Adicionar anotações de dados

Nesta tarefa, você adicionará Anotações de Dados ao Modelo de Álbum que fará com que a página Criar e Editar exiba mensagens de validação quando apropriado.

Para uma classe Model simples, a adição de uma Anotação de Dados é tratada apenas adicionando uma instrução using para System.ComponentModel.DataAnnotation e, em seguida, colocando um atributo [Obrigatório] nas propriedades apropriadas. O exemplo a seguir tornaria a propriedade Name um campo obrigatório no Modo de Exibição.

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

Isso é um pouco mais complexo em casos como esse aplicativo em que o Modelo de Dados de Entidade é gerado. Se você adicionou Anotações de Dados diretamente às classes de modelo, elas serão substituídas se você atualizar o modelo do banco de dados. Em vez disso, você pode usar classes parciais de metadados que existirão para manter as anotações e estão associadas às classes de modelo usando o atributo [MetadataType] .

  1. Abra a solução Begin localizada na pasta Source/Ex6-AddingValidation/Begin/ . Caso contrário, você poderá continuar usando a solução End obtida concluindo o exercício anterior.

    1. Se você abriu a solução Begin fornecida, precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.

    2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.

    3. Por fim, crie a solução clicando em Compilar | Compilar Solução.

      Observação

      Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você precisará executar essas etapas depois de abrir uma solução existente neste laboratório.

  2. Abra Album.cs na pasta Models .

  3. Substitua o conteúdo de Album.cs pelo código realçado, para que ele se pareça com o seguinte:

    Observação

    A linha [DisplayFormat(ConvertEmptyStringToNull=false)] indica que cadeias de caracteres vazias do modelo não serão convertidas em nulos quando o campo de dados for atualizado na fonte de dados. Essa configuração evitará uma exceção quando o Entity Framework atribuir valores nulos ao modelo antes que a Anotação de Dados valide os campos.

    (Snippet de código – ASP.NET classe parcial de metadados de álbum ex6 e formulários e formulários do MVC 4)

    namespace MvcMusicStore.Models
    {
        using System.ComponentModel;
        using System.ComponentModel.DataAnnotations;
    
        public class Album
        {
            [ScaffoldColumn(false)]
            public int AlbumId { get; set; }
    
            [DisplayName("Genre")]
            public int GenreId { get; set; }
    
            [DisplayName("Artist")]
            public int ArtistId { get; set; }
    
            [Required(ErrorMessage = "An Album Title is required")]
            [DisplayFormat(ConvertEmptyStringToNull = false)]
            [StringLength(160, MinimumLength = 2)]
            public string Title { get; set; }
    
            [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
            [DataType(DataType.Currency)]
            public decimal Price { get; set; }
    
            [DisplayName("Album Art URL")]
            [DataType(DataType.ImageUrl)]
            [StringLength(1024)]
            public string AlbumArtUrl { get; set; }
    
            public virtual Genre Genre { get; set; }
    
            public virtual Artist Artist { get; set; }
        }
    }
    

    Observação

    Esta classe parcial Album tem um atributo MetadataType que aponta para a classe AlbumMetaData para as Anotações de Dados. Estes são alguns dos atributos de Anotação de Dados que você está usando para anotar o modelo de Álbum:

    • Obrigatório – indica que a propriedade é um campo obrigatório
    • DisplayName – define o texto a ser usado em campos de formulário e mensagens de validação
    • DisplayFormat – especifica como os campos de dados são exibidos e formatados.
    • StringLength – define um comprimento máximo para um campo de cadeia de caracteres
    • Intervalo – fornece um valor máximo e mínimo para um campo numérico
    • ScaffoldColumn - Permite ocultar campos de formulários do editor

Tarefa 2 – Executando o aplicativo

Nesta tarefa, você testará se as páginas Criar e Editar validam os campos, usando os nomes de exibição escolhidos na última tarefa.

  1. Pressione F5 para executar o Aplicativo.

  2. O projeto começa na Página Inicial. Altere a URL para /StoreManager/Create. Verifique se os nomes de exibição correspondem aos da classe parcial (como URL de Arte do Álbum em vez de AlbumArtUrl)

  3. Clique em Criar, sem preencher o formulário. Verifique se você obtém as mensagens de validação correspondentes.

    Campos validados na página Criar

    Campos validados na página Criar

  4. Você pode verificar se o mesmo ocorre com a página Editar . Altere a URL para /StoreManager/Edit/1 e verifique se os nomes de exibição correspondem aos da classe parcial (como URL de Arte do Álbum em vez de AlbumArtUrl). Esvazie os campos Título e Preço e clique em Salvar. Verifique se você obtém as mensagens de validação correspondentes.

    Campos validados na página Editar

    Campos validados na página Editar

Exercício 7: Usando jQuery discreto no lado do cliente

Neste exercício, você aprenderá a habilitar a validação de jQuery não discreta do MVC 4 no lado do cliente.

Observação

O jQuery unobtrusive usa o prefixo data-ajax JavaScript para invocar métodos de ação no servidor em vez de emitir intrusivamente scripts de cliente embutidos.

Tarefa 1 – Executar o aplicativo antes de habilitar o jQuery não discreto

Nesta tarefa, você executará o aplicativo antes de incluir o jQuery para comparar os dois modelos de validação.

  1. Abra a solução Begin localizada na pasta Source/Ex7-UnobtrusivejQueryValidation/Begin/ . Caso contrário, você poderá continuar usando a solução End obtida concluindo o exercício anterior.

    1. Se você abriu a solução Begin fornecida, precisará baixar alguns pacotes NuGet ausentes antes de continuar. Para fazer isso, clique no menu Projeto e selecione Gerenciar Pacotes NuGet.

    2. Na caixa de diálogo Gerenciar Pacotes NuGet , clique em Restaurar para baixar pacotes ausentes.

    3. Por fim, crie a solução clicando em Compilar | Compilar Solução.

      Observação

      Uma das vantagens de usar o NuGet é que você não precisa enviar todas as bibliotecas em seu projeto, reduzindo o tamanho do projeto. Com o NuGet Power Tools, especificando as versões do pacote no arquivo Packages.config, você poderá baixar todas as bibliotecas necessárias na primeira vez que executar o projeto. É por isso que você precisará executar essas etapas depois de abrir uma solução existente neste laboratório.

  2. Pressione F5 para executar o aplicativo.

  3. O projeto começa na Página Inicial. Procure /StoreManager/Criar e clique em Criar sem preencher o formulário para verificar se você recebe mensagens de validação:

    Validação do cliente desabilitada

    Validação do cliente desabilitada

  4. No navegador, abra o código-fonte HTML:

    ...
              <div class="editor-label">
                    <label for="Price">Price</label>
              </div>
              <div class="editor-field">
                    <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                    <span class="field-validation-valid" id="Price_validationMessage"></span>
              </div>
    
              <div class="editor-label">
                    <label for="AlbumArtUrl">Album Art URL</label>
              </div>
              <div class="editor-field">
                    <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                    <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
              </div>
    
              <p>
                    <input type="submit" value="Create" />
              </p>
         </fieldset>
    </form><script type="text/javascript">
    //<![CDATA[
    if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
    window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
    //]]>
    </script>
    ...
    

Tarefa 2 – Habilitar a validação de cliente não discreta

Nesta tarefa, você habilitará a validação de cliente não discreta do jQuery do arquivoWeb.config , que por padrão é definido como false em todos os novos projetos do ASP.NET MVC 4. Além disso, você adicionará as referências de scripts necessárias para fazer jQuery Unobtrusive Client Validation funcionar.

  1. Abra Web.Config arquivo na raiz do projeto e verifique se os valores de chaves ClientValidationEnabled e UnobtrusiveJavaScriptEnabled estão definidos como true.

    ...
    <configuration>
      <appSettings>
         <add key="webpages:Version" value="2.0.0.0" />
         <add key="webpages:Enabled" value="false" />
         <add key="PreserveLoginUrl" value="true" />
         <add key="ClientValidationEnabled" value="true" />
         <add key="UnobtrusiveJavaScriptEnabled" value="true" />
    </appSettings>
    ...
    

    Observação

    Você também pode habilitar a validação do cliente por código em Global.asax.cs para obter os mesmos resultados:

    HtmlHelper.ClientValidationEnabled = true;

    Além disso, você pode atribuir o atributo ClientValidationEnabled a qualquer controlador para ter um comportamento personalizado.

  2. Abra Create.cshtml em Views\StoreManager.

  3. Verifique se os arquivos de script a seguir, jquery.validate e jquery.validate.unobtrusive, são referenciados na exibição por meio do pacote "~/bundles/jqueryval".

    ...
    @section Scripts {
         @Scripts.Render("~/bundles/jqueryval")
    }
    

    Observação

    Todas essas bibliotecas jQuery estão incluídas em novos projetos do MVC 4. Você pode encontrar mais bibliotecas na pasta /Scripts do seu projeto.

    Para que essas bibliotecas de validação funcionem, você precisa adicionar uma referência à biblioteca de estruturas jQuery. Como essa referência já foi adicionada no arquivo _Layout.cshtml , você não precisa adicioná-la nessa exibição específica.

Tarefa 3 – Executar o aplicativo usando a validação de jQuery não discreta

Nesta tarefa, você testará se o modelo de criação storeManager executa a validação do lado do cliente usando bibliotecas jQuery quando o usuário cria um novo álbum.

  1. Pressione F5 para executar o aplicativo.

  2. O projeto começa na Página Inicial. Procure /StoreManager/Criar e clique em Criar sem preencher o formulário para verificar se você recebe mensagens de validação:

    Validação do cliente com validação de cliente habilitada para jQuery

    Validação do cliente com jQuery habilitado

  3. No navegador, abra o código-fonte para Criar modo de exibição:

    ...
    <div class="editor-label">
        <label for="Title">Title</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
    </div>
    
    <div class="editor-label">
        <label for="Price">Price</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
    </div>
    
    <div class="editor-label">
        <label for="AlbumArtUrl">Album Art URL</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
    </div>        
    ...
    

    Observação

    Para cada regra de validação de cliente, unobtrusive jQuery adiciona um atributo com data-val-rulename="message". Veja abaixo uma lista de marcas que o jQuery não discreto insere no campo de entrada html para executar a validação do cliente:

    • Data-val
    • Data-val-number
    • Data-val-range
    • Data-val-range-min/Data-val-range-max
    • Dados-val-required
    • Data-val-length
    • Data-val-length-max/ Data-val-length-min

    Todos os valores de dados são preenchidos com a Anotação de Dados do modelo. Em seguida, toda a lógica que funciona no lado do servidor pode ser executada no lado do cliente. Por exemplo, o atributo Price tem a seguinte anotação de dados no modelo:

    [Required(ErrorMessage = "Price is required")]
    [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
    public object Price { get; set; }
    

    Depois de usar Unobtrusive jQuery, o código gerado é:

    <input data-val="true"
    data-val-number="The field Price must be a number."
    data-val-range="Price must be between 0.01 and 100.00"
    data-val-range-max="100"
    data-val-range-min="0.01"
    data-val-required="Price is required"
    id="Album_Price" name="Album.Price" type="text" value="0" />
    

Resumo

Ao concluir este Hands-On Lab, você aprendeu a permitir que os usuários alterem os dados armazenados no banco de dados com o uso do seguinte:

  • Ações do controlador como Index, Create, Edit, Delete
  • ASP.NET recurso de scaffolding do MVC para exibir propriedades em uma tabela HTML
  • Auxiliares de HTML personalizados para melhorar a experiência do usuário
  • Métodos de ação que reagem a chamadas HTTP-GET ou HTTP-POST
  • Um modelo de editor compartilhado para modelos de Exibição semelhantes, como Criar e Editar
  • Elementos de formulário, como listas suspensas
  • Anotações de dados para validação de modelo
  • Validação do lado do cliente usando a biblioteca unobtrusive jQuery

Apêndice A: Instalando o Visual Studio Express 2012 para Web

Você pode instalar Microsoft Visual Studio Express 2012 para Web ou outra versão "Express" usando o Microsoft Web Platform Installer. As instruções a seguir orientam você pelas etapas necessárias para instalar o Visual Studio Express 2012 para Web usando Microsoft Web Platform Installer.

  1. Vá para [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Como alternativa, se você já tiver instalado o Web Platform Installer, poderá abri-lo e pesquisar o produto "Visual Studio Express 2012 para Web com o SDK do Windows Azure".

  2. Clique em Instalar Agora. Se você não tiver o Web Platform Installer , será redirecionado para baixá-lo e instalá-lo primeiro.

  3. Depois que o Web Platform Installer estiver aberto, clique em Instalar para iniciar a instalação.

    Instalar Visual Studio Express

    Instalar Visual Studio Express

  4. Leia todas as licenças e termos dos produtos e clique em Aceito para continuar.

    Aceitando os termos de licença

    Aceitando os termos de licença

  5. Aguarde até que o processo de download e instalação seja concluído.

    Progresso da instalação

    Progresso da instalação

  6. Quando a instalação for concluída, clique em Concluir.

    Instalação concluída

    Instalação concluída

  7. Clique em Sair para fechar o Web Platform Installer.

  8. Para abrir Visual Studio Express para Web, vá para a tela Inicial e comece a escrever "VS Express" e clique no bloco DO VS Express para Web.

    Bloco do VS Express para Web

    Bloco do VS Express para Web

Apêndice B: Usando snippets de código

Com snippets de código, você tem todo o código necessário ao seu alcance. O documento de laboratório informará exatamente quando você pode usá-los, conforme mostrado na figura a seguir.

Usando snippets de código do Visual Studio para inserir código em seu projeto

Usando snippets de código do Visual Studio para inserir código em seu projeto

Para adicionar um snippet de código usando o teclado (somente C#)

  1. Coloque o cursor onde você gostaria de inserir o código.
  2. Comece a digitar o nome do snippet (sem espaços ou hifens).
  3. Assista enquanto o IntelliSense exibe os nomes dos snippets correspondentes.
  4. Selecione o snippet correto (ou continue digitando até que o nome do snippet inteiro seja selecionado).
  5. Pressione a tecla Tab duas vezes para inserir o snippet no local do cursor.

Comece a digitar o nome do snippet

Começar a digitar o nome do snippet

Pressione Tab para selecionar o snippet de código realçado

Pressione Tab para selecionar o snippet realçado

Pressione Tab novamente e o snippet expandirá

Pressione Tab novamente e o snippet será expandido

Para adicionar um snippet de código usando o mouse (C#, Visual Basic e XML) 1. Clique com o botão direito do mouse no local em que você deseja inserir o snippet de código.

  1. Selecione Inserir Snippet seguido por Meus Snippets de Código.
  2. Escolha o snippet relevante na lista clicando nele.

Clique com o botão direito do mouse no local em que você deseja inserir o snippet de código e selecione Inserir Snippet

Clique com o botão direito do mouse onde você deseja inserir o snippet de código e selecione Inserir Snippet

Escolha o snippet relevante da lista clicando nele

Escolha o snippet relevante na lista clicando nele