Adicionar uma exibição (VB)

  • Artigo

por Rick Anderson

Este tutorial ensinará os conceitos básicos da criação de um aplicativo Web ASP.NET MVC usando o Microsoft Visual Web Developer 2010 Express Service Pack 1, que é uma versão gratuita do Microsoft Visual Studio. Antes de começar, verifique se você instalou os pré-requisitos listados abaixo. Você pode instalar todos eles clicando no seguinte link: Web Platform Installer. Como alternativa, você pode instalar individualmente os pré-requisitos usando os seguintes links:

Se você estiver usando o Visual Studio 2010 em vez do Visual Web Developer 2010, instale os pré-requisitos clicando no seguinte link: Pré-requisitos do Visual Studio 2010.

Um projeto do Visual Web Developer com VB.NET código-fonte está disponível para acompanhar este tópico. Baixe a versão do VB.NET. Se preferir C#, alterne para a versão C# deste tutorial.

Nesta seção, modificaremos a HelloWorldController classe para usar um arquivo de modelo de exibição para encapsular corretamente o processo de geração de respostas HTML para um cliente.

Vamos começar usando um modelo de exibição com o Index método na HelloWorldController classe . Atualmente, o Index método retorna uma cadeia de caracteres com uma mensagem embutida em código dentro da classe do controlador. Altere o Index método para retornar um View objeto , conforme mostrado no seguinte:

Public Function Index() As ActionResult
            Return View()
        End Function

Agora vamos adicionar um modelo de exibição ao nosso projeto que podemos invocar com o Index método . Para fazer isso, clique com o botão direito do mouse dentro do Index método e clique em Adicionar Exibição.

IndexAddView

A caixa de diálogo Adicionar Modo de Exibição é exibida. Deixe as entradas padrão e clique no botão Adicionar .

3addView

A pasta MvcMovie\Views\HelloWorld e o arquivo MvcMovie\Views\HelloWorld\Index.vbhtml são criados. Você pode vê-los em Gerenciador de Soluções:

SolnExpHelloWorldIndx

Adicione algum HTML sob a <h2> marca . O arquivo MvcMovie\Views\HelloWorld\Index.vbhtml modificado é mostrado abaixo.

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

<b>Hello</b> World!

Execute o aplicativo e navegue até o controlador "olá, mundo" (http://localhost:xxxx/HelloWorld). O Index método no controlador não funcionou muito; ele simplesmente executou a instrução return View(), que indicava que queríamos usar um arquivo de modelo de exibição para renderizar uma resposta ao cliente. Como não especificamos explicitamente o nome do arquivo de modelo de exibição a ser usado, ASP.NET MVC usa o arquivo de exibição Index.vbhtml na pasta \Views\HelloWorld . A imagem abaixo mostra a cadeia de caracteres embutida em código na exibição.

3HelloWorld

Parece muito bom. No entanto, observe que a barra de título do navegador diz "Índice" e o título grande na página diz "Meu Aplicativo MVC". Vamos mudar isso.

Alterando exibições e páginas de layout

Primeiro, vamos alterar o texto "Meu Aplicativo MVC". Esse texto é compartilhado e aparece em todas as páginas. Na verdade, ele aparece em apenas um lugar em nosso projeto, mesmo que esteja em todas as páginas do nosso aplicativo. Acesse a pasta /Views/Shared no Gerenciador de Soluções e abra o arquivo _Layout.vbhtml. Esse arquivo é chamado de página de layout e é o "shell" compartilhado que todas as outras páginas usam.

Observe a @RenderBody() linha de código próxima à parte inferior do arquivo. RenderBody é um espaço reservado em que todas as páginas que você cria são exibidas, "encapsuladas" na página de layout. Altere o <h1> título de " Meu Aplicativo MVC" para "Aplicativo de Filme MVC".

<div id="title">
        <h1>MVC Movie App</h1>
  </div>

Execute o aplicativo e observe que ele agora diz "Aplicativo de Filme MVC". Clique no link Sobre e essa página também mostra "Aplicativo de Filme MVC".

O arquivo _Layout.vbhtml completo é mostrado abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData("Title")</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>MVC Movie App</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "HelloWorld")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Agora, vamos alterar o título da página Índice (exibição).

@Code
    ViewData("Title") = "Movie List"
End Code

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

Abra MvcMovie\Views\HelloWorld\Index.vbhtml. Há dois locais para fazer uma alteração: primeiro, o texto que aparece no título do navegador e, em seguida, no cabeçalho secundário (o <h2> elemento). Vamos torná-los ligeiramente diferentes para que você possa ver qual bit de código muda qual parte do aplicativo.

Execute o aplicativo e navegue atéhttp://localhost:xx/HelloWorld. Observe que o título do navegador, o cabeçalho primário e os títulos secundários foram alterados. É fácil fazer grandes alterações em seu aplicativo com pequenas alterações em uma exibição. (Se você não vir alterações no navegador, talvez esteja exibindo o conteúdo armazenado em cache. Pressione Ctrl+F5 no navegador para forçar a resposta do servidor a ser carregada.)

3_MyMovieList

No entanto, nosso pouco de "dados" (neste caso, a mensagem "Olá, Mundo!") é embutido em código. Nosso aplicativo MVC tem V (exibições) e temos C (controladores), mas nenhum M (modelo) ainda. Em breve, veremos como criar um banco de dados e recuperar dados de modelo dele.

Passando dados do controlador para a exibição

Antes de irmos para um banco de dados e falarmos sobre modelos, vamos primeiro falar sobre como passar informações do Controlador para uma Exibição. Queremos passar o que um modelo de exibição requer para renderizar uma resposta HTML a um cliente. Esses objetos normalmente são criados e passados por uma classe de controlador para um modelo de exibição e devem conter apenas os dados exigidos pelo modelo de exibição — e não mais.

Anteriormente com a HelloWorldController classe , o método de Welcome ação levava um name parâmetro e numTimes e, em seguida, gerava os valores de parâmetro para o navegador. Em vez de o controlador continuar a renderizar essa resposta diretamente, vamos colocar esses dados em um recipiente para a Exibição. Controladores e exibições podem usar um ViewBag objeto para armazenar esses dados. Isso será passado para um modelo de exibição automaticamente e usado para renderizar a resposta HTML usando o conteúdo do recipiente como dados. Dessa forma, o controlador se preocupa com uma coisa e com o modelo de exibição com outra, permitindo-nos manter limpo "separação de preocupações" dentro do aplicativo.

Como alternativa, poderíamos definir uma classe personalizada e, em seguida, criar uma instância desse objeto por conta própria, preenchê-la com dados e passá-la para a Exibição. Isso geralmente é chamado de ViewModel, porque é um modelo personalizado para o Modo de Exibição. No entanto, para pequenas quantidades de dados, o ViewBag funciona muito bem.

Retorne ao arquivo HelloWorldController.vb alterar o Welcome método dentro do controlador para colocar Message e NumTimes no ViewBag. O ViewBag é um objeto dinâmico. Isso significa que você pode colocar o que quiser nele. O ViewBag não tem propriedades definidas até que você coloque algo dentro dela.

O completo HelloWorldController.vb com a nova classe no mesmo arquivo.

Namespace MvcMovie
    Public Class HelloWorldController
        Inherits System.Web.Mvc.Controller
        '
        ' GET: /HelloWorld

        Function Index() As ActionResult
            Return View()
        End Function

        Public Function Welcome(ByVal name As String, Optional ByVal numTimes As Integer = 1) As ActionResult
            ViewBag.Message = "Hello " & name
            ViewBag.NumTimes = numTimes
            Return View()
        End Function

    End Class
End Namespace

Agora, nosso ViewBag contém dados que serão passados para o Modo de Exibição automaticamente. Novamente, como alternativa, poderíamos ter passado em nosso próprio objeto como este se gostarmos:

return View(myCustomObject)

Agora precisamos de um WelcomeView modelo! Execute o aplicativo para que o novo código seja compilado. Feche o navegador, clique com o botão direito do mouse dentro do Welcome método e clique em Adicionar Exibição.

Esta é a aparência da caixa de diálogo Adicionar Modo de Exibição .

3AddWelcomeView

Adicione o código a seguir sob o <h2> elemento no novo Welcome.Arquivo vbhtml. Vamos fazer um loop e dizer "Olá" quantas vezes o usuário disser que deveríamos!

@Code 
    For i As Integer = 0 To ViewBag.NumTimes
@<h3> @ViewBag.Message @i.ToString </h3>
     Next i
 End Code

Execute o aplicativo e navegue até http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Agora, os dados são retirados da URL e passados automaticamente para o controlador. O controlador empacota os dados em um Model objeto e passa esse objeto para a exibição. A exibição que exibe os dados como HTML para o usuário.

3Hello_Scott_4

Bem, isso foi um tipo de “M” de modelo, mas não o tipo de banco de dados. Vamos ver o que aprendemos e criar um banco de dados de filmes.

AnteriorAvançar