ASP .NET - MVC Music Store - Atualizações finais na navegação e design to site (fim do curso)


Temos completado a maior parte das funcionalidades do nosso site, mas ainda precisamos incluir algumas características e recursos na navegação do site, na home page principal e na página da loja.

Criando a Partial View resumo da Cesta de Compras

Um dos recursos que vamos implementar é poder exibir o número de itens da cesta de compras do usuário em todo o site, dessa forma o usuário consegue visualizar facilmente esta informação.

Para poder implementar esta funcionalidade vamos criar uma partial view que será adicionada à página mestre do nosso site: _Layout.vbhtml, que se encontra na pasta \Shared.

Ao utilizar a tecnologia ASP .NET MVC, a medida que você se familiariza com seus recursos, você vai querer criar componentes reutilizáveis, evitando assim código duplicado. No Web Forms, você podia fazer isso usando um controle de usuário ou Users Control. Ao usar o modelo ASP .NET MVC, você pode obter o mesmo resultado usando as Partial Views (é uma opção).

Então, sem entrar em detalhes mais técnicos, podemos dizer que Users Control e Partial Views te levam ao mesmo resultado final: reaproveitamento e encapsulamento de código.

Lembre-se que nosso controlador CestaComprasController possui um método Action chamado CestaResumo() o qual retorna uma partial view conforme mostrado no código a seguir:

       ' GET: /CestaCompras/CestaResumo
    
   <ChildActionOnly> _

        Public Function CestaResumo() As ActionResult
            Dim cesta = CestaCompras.GetCesta(Me.HttpContext)
            ViewData("CestaContador") = cesta.GetContador()
            Return PartialView("CestaResumo")
        End Function

Para criar a partial view CestaResumo, clique com o botão direito do mouse sobre a pasta Views/CestaCompras e seleciona Add -> View.

A seguir na janela Add View , informe o nome CestaResumo e marque a opção - Creates as a partial view e a seguir clique no botão Add;

A partial view CestaResumo é muito simples, ela é apenas um link para a view CestaCompras a qual mostra o número de itens da cesta. O código completo da Action CestaResumo.vbhtml é dado a seguir:

 @Html.ActionLink("Cesta(" + ViewData("CestaContador") + ")","Index","CestaCompras",new with { .id = "cesta-status" })

Podemos incluir uma partial view em qualquer página em nosso site, inclusive na página mestre do Site, usando um método Html.RenderAction. Este método requer que especifiquemos o nome da Action como ("CestaResumo") e o nome do controlador ("CestaCompras") conforme abaixo:

@Html.RenderAction("CestaResumo","CestaCompras")

Antes de adicionar o código à página _Layout.vbhtml do site, vamos criar também um menu de gêneros de forma que poderemos fazer todas as atualizações do site de uma vez só.

Criando a partial view de Generos

Podemos facilitar a navegação do usuário em nosso site incluindo um menu que exibe os gêneros musicais como uma lista de todos os gêneros disponíveis em nossa loja.

Vamos então criar uma partial view chamada GeneroMenu e incluir ambas as views no arquivo Layout do site. Primeiro inclua a Action GeneroMenu no controlador StoreController como seguinte código:

        ' GET: /Store/GeneroMenu
        Public Function GeneroMenu() As ActionResult
            Dim generos = storeDB.Generos.ToList()
            Return PartialView(generos)
        End Function

Esta Action retorna uma lista de gêneros o qual será exibida pela partial view que criaremos a seguir.

Nota: Nós adicionamos o atributo <ChildActionOnly> a esta Action do controlador, o que indica que desejamos que a action seja usada a partir da Partial View. Este atributo irá impedir que a action do controlador seja executada via navegação /Store/GeneroMenu. Isso não é necessário para as partials views, mas é uma boa prática, uma vez que queremos ter a certeza de que nossas views sejam usadas como pretendemos.

Agora clique com o botão direito do mouse sobre a Action GeneroMenu e selecione Add->View e crie uma partial view chamada GeneroMenu que é fortemente tipada usando a classe Genero conforme mostra a figura abaixo:

Atualize o código da partial view GeneroMenu para exibir os itens usando uma lista não ordenada como mostra o código abaixo:

@ModelType IEnumerable(Of MvcMusicStore.Genero)
 
<ul id="categorias">

     @For Each genero In Model
         @<li>@Html.ActionLink(genero.Nome, "Procurar", "Store", New With {.Genero = genero.Nome}, Nothing)
        </li>
      Next

</ul>

Atualizando o leiaute do site para exibir as partial views

Agora sim podemos incluir as duas partial views criadas no arquivo _Layout.vbhtml da pasta /Schared. Vamos fazer isso chamando uma Html.RenderAction() conforme o código mostrado a seguir:

Html.Action e Html.RenderAction qual a diferença ?

Ambos os métodos permitem que você chame no interior de um método Action a partir de uma view e a saída dos resultados da action será colocado dentro da view. A diferença entre os dois é que o método Html.RenderAction irá renderizar o resultado diretamente para o Response (o que é mais eficiente se a action retorna uma grande quantidade de código HTML), enquanto Html.Action retorna uma string com o resultado.

Agora vamos rodar a aplicação e verificar o menu de gêneros dos filmes a direita e a quantidade de itens da cesta de compras no topo da página conforme mostra a figura abaixo:

Atualizando a página Procurar da Loja

A página Procurar da loja é funcional mas podemos melhorar a sua apresentação atualizando o código de forma a exibir os álbuns ao lado do menu de gêneros. Abra o arquivo Procurar.vbhtml na pasta /Views/Store e altere o seu código conforme abaixo:

@ModelType MvcMusicStore.Genero

@Code
    ViewBag.Title = "Procurar Álbuns"
End Code

<div class="genero">
    <h3><em>@Model.Nome</em> Albums</h3>
 
    <ul id="album-list">
         @For Each album In Model.Albuns
            @<li>
                <a href="@Url.Action("Detalhes", New With {.id = album.Titulo})">
                    <img alt="@album.Titulo" src="@album.AlbumArtUrl" />
                    <span>@album.Titulo</span>
                </a>
            </li>
         Next
    </ul>
</div>

Atualizando a página que exibe os Álbuns mais vendidos

Que tal podermos exibir os álbuns mais vendidos de forma a incrementar as vendas ?

Vamos fazer algumas atualizações no controlador HomeController para implementar esse recurso e adicionar também informação adicional como gráfico.

Primeiro vamos incluir uma propriedade de navegação para nossa classe Album de forma que o Entity Framework reconheça a associação. Vamos então incluir a linha de código abaixo na classe Album:

Public Overridable Property PedidoDetalhes() As List(Of PedidoDetalhe)

Obs: Note que você deverá incluir o namespace System.Collections.Generic na declaração Imports.

A seguir vamos incluir um campo storedDB e a instrução MvcMusicStore.Models no controlador HomeController da pasta /Controllers conforme o código destacado em azul a seguir:

Imports MvcMusicStore.MvcMusicStore.Models

Namespace MvcMusicStore

    Public Class HomeController
        Inherits System.Web.Mvc.Controller

     
  Private storeDB As New MusicStoreEntities()

        ' GET: /Home/
        Public Function Index() As ActionResult
            Return View()
        End Function

     
  Private Function GetAlbunsMaisVendidos(count As Integer) As List(Of Album)
         
  ' Agura os detalhes do pedido por album e retorna os albuns mais vendidos
            Return storeDB.Albuns.OrderByDescending(Function(a) a.PedidoDetalhes.Count()).Take(count).ToList()
        End Function


    End Class
End Namespace

Criamos um método privado pois não queremos que ele esteja disponível como um método Action. Nós estamos incluindo este método no controlador HomeController por uma questão de simplicidade mas você pode mover a sua lógica de negócio em uma classe de serviço separada.

Após feito esse ajuste vamos atualizar a Action Index do controlador HomeController para consultar os 5 álbuns mais vendidos e retornar para a view.

  ' GET: /Home/
   Public Function Index() As ActionResult
            ' Obtem os 5 albuns mais populares

            Dim albums = GetAlbunsMaisVendidos(5)
            Return View(albums)
   End Function

Finalmente precisamos atualizar a view Index da pasta /Views/Home de forma que ela possa exibir a lista de álbuns pela atualização do tipo Model e adicionando uma lista de álbuns na base. Vamos aproveitar e também incluir um cabeçalho e uma seção de promoção na página.

Abaixo temos o código ajustado da view Index:

@ModelType List(of MvcMusicStore.Album)

@Code
    ViewBag.Title = "ASP.NET MVC Loja Musical"
End Code

<div id="promotion"></div>

<h3><em>Álbuns </em> mais vendidos</h3>

<ul id="album-list">
    @For Each album In Model
        @<li><a href="@Url.Action("Detalhes", "Store", New With {.id = album.AlbumId})">
            <img alt="@album.Titulo" src="@album.AlbumArtUrl" />
            <span>@album.Titulo</span>
            </a>
       </li>
   Next
</ul>

Após todos esses ajustes ao executar o nosso projeto novamente iremos obter a página principal a seguir:

Dessa forma implementamos todas as funcionalidades previstas em nossa loja virtual usando a tecnologia ASP .NET MVC 3 e a linguagem Visual Basic com o engine Razor onde foi mostrado com usar os principais recursos dessas tecnologias.

Ao final do projeto você já deve estar familiarizado com as principais técnicas usadas sendo mesmo capaz de implementar as funcionalidades que irão suprir as lacunas que faltam na aplicação como o módulo de pagamentos.

Espero que esta série de tutoriais o ajude a compreender, se desenvolver ou aprimorar o seu conhecimento na tecnologia ASP .NET MVC.

Baixe os arquivos da pasta Models, Views, Controllers e ViewModel aqui : MvcMusicStore_Arquivos.zip

O projeto completo você encontra no Super DVD .NET.( sua fonte de estudos e consulta para a plataforma .NET.)

Referências:


José Carlos Macoratti