Exibições no ASP.NET Core MVCViews in ASP.NET Core MVC

Por Steve Smith e Luke LathamBy Steve Smith and Luke Latham

Este documento explica as exibições usadas em aplicativos do ASP.NET Core MVC.This document explains views used in ASP.NET Core MVC applications. Para obter informações sobre páginas do Razor, consulte Introdução a Páginas do Razor.For information on Razor Pages, see Introduction to Razor Pages.

No padrão MVC (Modelo-Exibição-Controlador), a exibição cuida da apresentação de dados do aplicativo e da interação com o usuário.In the Model-View-Controller (MVC) pattern, the view handles the app's data presentation and user interaction. Uma exibição é um modelo HTML com marcação Razor inserida.A view is an HTML template with embedded Razor markup. A marcação Razor é um código que interage com a marcação HTML para produzir uma página da Web que é enviada ao cliente.Razor markup is code that interacts with HTML markup to produce a webpage that's sent to the client.

No ASP.NET Core MVC, as exibições são arquivos .cshtml que usam a linguagem de programação C# na marcação Razor.In ASP.NET Core MVC, views are .cshtml files that use the C# programming language in Razor markup. Geralmente, arquivos de exibição são agrupados em pastas nomeadas para cada um dos controladores do aplicativo.Usually, view files are grouped into folders named for each of the app's controllers. As pastas são armazenadas em uma pasta chamada Views na raiz do aplicativo:The folders are stored in a Views folder at the root of the app:

A pasta Views no Gerenciador de Soluções do Visual Studio é aberta com a pasta Inicial aberta para mostrar os arquivos About.cshtml, Contact.cshtml e Index.cshtml

O controlador Home é representado por uma pasta Home dentro da pasta Views.The Home controller is represented by a Home folder inside the Views folder. A pasta Home contém as exibições das páginas da Web About, Contact e Index (home page).The Home folder contains the views for the About, Contact, and Index (homepage) webpages. Quando um usuário solicita uma dessas três páginas da Web, ações do controlador Home determinam qual das três exibições é usada para compilar e retornar uma página da Web para o usuário.When a user requests one of these three webpages, controller actions in the Home controller determine which of the three views is used to build and return a webpage to the user.

Use layouts para fornecer seções de páginas da Web consistentes e reduzir repetições de código.Use layouts to provide consistent webpage sections and reduce code repetition. Layouts geralmente contêm o cabeçalho, elementos de navegação e menu e o rodapé.Layouts often contain the header, navigation and menu elements, and the footer. O cabeçalho e o rodapé geralmente contêm marcações repetitivas para muitos elementos de metadados, bem como links para ativos de script e estilo.The header and footer usually contain boilerplate markup for many metadata elements and links to script and style assets. Layouts ajudam a evitar essa marcação repetitiva em suas exibições.Layouts help you avoid this boilerplate markup in your views.

Exibições parciais reduzem a duplicação de código gerenciando as partes reutilizáveis das exibições.Partial views reduce code duplication by managing reusable parts of views. Por exemplo, uma exibição parcial é útil para uma biografia do autor que aparece em várias exibições em um site de blog.For example, a partial view is useful for an author biography on a blog website that appears in several views. Uma biografia do autor é um conteúdo de exibição comum e não requer que um código seja executado para produzi-lo para a página da Web.An author biography is ordinary view content and doesn't require code to execute in order to produce the content for the webpage. O conteúdo da biografia do autor é disponibilizado para a exibição usando somente o model binding, de modo que usar uma exibição parcial para esse tipo de conteúdo é ideal.Author biography content is available to the view by model binding alone, so using a partial view for this type of content is ideal.

Componentes de exibição são semelhantes a exibições parciais no sentido em que permitem reduzir códigos repetitivos, mas são adequados para conteúdos de exibição que requerem que um código seja executado no servidor para renderizar a página da Web.View components are similar to partial views in that they allow you to reduce repetitive code, but they're appropriate for view content that requires code to run on the server in order to render the webpage. Componentes de exibição são úteis quando o conteúdo renderizado requer uma interação com o banco de dados, como para o carrinho de compras de um site.View components are useful when the rendered content requires database interaction, such as for a website shopping cart. Os componentes de exibição não ficam limitados ao model binding para produzir a saída da página da Web.View components aren't limited to model binding in order to produce webpage output.

Benefícios do uso de exibiçõesBenefits of using views

As exibições ajudam a estabelecer uma separação de Interesses dentro de um aplicativo MVC, separando a marcação da interface do usuário de outras partes do aplicativo.Views help to establish separation of concerns within an MVC app by separating the user interface markup from other parts of the app. Seguir um design de SoC faz com que seu aplicativo seja modular, o que fornece vários benefícios:Following SoC design makes your app modular, which provides several benefits:

  • A manutenção do aplicativo é mais fácil, porque ele é melhor organizado.The app is easier to maintain because it's better organized. Geralmente, as exibições são agrupadas segundo os recursos do aplicativo.Views are generally grouped by app feature. Isso facilita encontrar exibições relacionadas ao trabalhar em um recurso.This makes it easier to find related views when working on a feature.
  • As partes do aplicativo ficam acopladas de forma flexível.The parts of the app are loosely coupled. Você pode compilar e atualizar as exibições do aplicativo separadamente da lógica de negócios e dos componentes de acesso a dados.You can build and update the app's views separately from the business logic and data access components. É possível modificar os modos de exibição do aplicativo sem precisar necessariamente atualizar outras partes do aplicativo.You can modify the views of the app without necessarily having to update other parts of the app.
  • É mais fácil testar as partes da interface do usuário do aplicativo porque as exibições são unidades separadas.It's easier to test the user interface parts of the app because the views are separate units.
  • Devido à melhor organização, é menos provável que você repita acidentalmente seções da interface do usuário.Due to better organization, it's less likely that you'll accidentally repeat sections of the user interface.

Criando uma exibiçãoCreating a view

Exibições que são específicas de um controlador são criadas na pasta Views/ [NomeDoControlador].Views that are specific to a controller are created in the Views/[ControllerName] folder. Exibições que são compartilhadas entre controladores são colocadas na pasta Views/Shared.Views that are shared among controllers are placed in the Views/Shared folder. Para criar uma exibição, adicione um novo arquivo e dê a ele o mesmo nome que o da ação de seu controlador associado, com a extensão de arquivo .cshtml.To create a view, add a new file and give it the same name as its associated controller action with the .cshtml file extension. Para criar uma exibição correspondente à ação About no controlador Home, crie um arquivo About.cshtml na pasta Views/Home:To create a view that corresponds with the About action in the Home controller, create an About.cshtml file in the Views/Home folder:

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

A marcação Razor começa com o símbolo @.Razor markup starts with the @ symbol. Execute instruções em C# colocando o código C# dentro de blocos de código Razor entre chaves ({ ... }).Run C# statements by placing C# code within Razor code blocks set off by curly braces ({ ... }). Por exemplo, consulte a atribuição de "About" para ViewData["Title"] mostrado acima.For example, see the assignment of "About" to ViewData["Title"] shown above. É possível exibir valores em HTML simplesmente referenciando o valor com o símbolo @.You can display values within HTML by simply referencing the value with the @ symbol. Veja o conteúdo dos elementos <h2> e <h3> acima.See the contents of the <h2> and <h3> elements above.

O conteúdo da exibição mostrado acima é apenas uma parte da página da Web inteira que é renderizada para o usuário.The view content shown above is only part of the entire webpage that's rendered to the user. O restante do layout da página e outros aspectos comuns da exibição são especificados em outros arquivos de exibição.The rest of the page's layout and other common aspects of the view are specified in other view files. Para saber mais, consulte o tópico sobre Layout.To learn more, see the Layout topic.

Como controladores especificam exibiçõesHow controllers specify views

Normalmente, as exibições são retornadas de ações como um ViewResult, que é um tipo de ActionResult.Views are typically returned from actions as a ViewResult, which is a type of ActionResult. O método de ação pode criar e retornar um ViewResult diretamente, mas normalmente isso não é feito.Your action method can create and return a ViewResult directly, but that isn't commonly done. Como a maioria dos controladores herdam de Controller, basta usar o método auxiliar View para retornar o ViewResult:Since most controllers inherit from Controller, you simply use the View helper method to return the ViewResult:

HomeController.csHomeController.cs

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";

    return View();
}

Quando essa ação é retornada, a exibição About.cshtml mostrada na seção anterior é renderizada como a seguinte página da Web:When this action returns, the About.cshtml view shown in the last section is rendered as the following webpage:

Página About renderizada no navegador Microsoft Edge

O método auxiliar View tem várias sobrecargas.The View helper method has several overloads. Opcionalmente, você pode especificar:You can optionally specify:

  • Uma exibição explícita a ser retornada:An explicit view to return:

    return View("Orders");
    
  • Um modelo a ser passado para a exibição:A model to pass to the view:

    return View(Orders);
    
  • Um modo de exibição e um modelo:Both a view and a model:

    return View("Orders", Orders);
    

Descoberta de exibiçãoView discovery

Quando uma ação retorna uma exibição, um processo chamado descoberta de exibição ocorre.When an action returns a view, a process called view discovery takes place. Esse processo determina qual arquivo de exibição é usado com base no nome da exibição.This process determines which view file is used based on the view name.

O comportamento padrão do método View (return View();) é retornar uma exibição com o mesmo nome que o método de ação do qual ela é chamada.The default behavior of the View method (return View();) is to return a view with the same name as the action method from which it's called. Por exemplo, o nome do método ActionResult de About do controlador é usado para pesquisar um arquivo de exibição chamado About.cshtml.For example, the About ActionResult method name of the controller is used to search for a view file named About.cshtml. Primeiro, o tempo de execução pesquisa pela exibição na pasta Views/[NomeDoControlador].First, the runtime looks in the Views/[ControllerName] folder for the view. Se não encontrar uma exibição correspondente nela, ele procura pela exibição na pasta Shared.If it doesn't find a matching view there, it searches the Shared folder for the view.

Não importa se você retornar implicitamente o ViewResult com return View(); ou se passar explicitamente o nome de exibição para o método View com return View("<ViewName>");.It doesn't matter if you implicitly return the ViewResult with return View(); or explicitly pass the view name to the View method with return View("<ViewName>");. Nos dois casos, a descoberta de exibição pesquisa por um arquivo de exibição correspondente nesta ordem:In both cases, view discovery searches for a matching view file in this order:

  1. Views/[ControllerName]/[ViewName].cshtmlViews/[ControllerName]/[ViewName].cshtml
  2. Views/Shared/[NomeDaExibição].cshtmlViews/Shared/[ViewName].cshtml

Um caminho de arquivo de exibição pode ser fornecido em vez de um nome de exibição.A view file path can be provided instead of a view name. Se um caminho absoluto que começa na raiz do aplicativo (ou é iniciado por "/" ou "~ /") estiver sendo usado, a extensão .cshtml deverá ser especificada:If using an absolute path starting at the app root (optionally starting with "/" or "~/"), the .cshtml extension must be specified:

return View("Views/Home/About.cshtml");

Você também pode usar um caminho relativo para especificar exibições em diretórios diferentes sem a extensão .cshtml.You can also use a relative path to specify views in different directories without the .cshtml extension. Dentro do HomeController, você pode retornar a exibição Index de suas exibições Manage com um caminho relativo:Inside the HomeController, you can return the Index view of your Manage views with a relative path:

return View("../Manage/Index");

De forma semelhante, você pode indicar o atual diretório específico do controlador com o prefixo ". /":Similarly, you can indicate the current controller-specific directory with the "./" prefix:

return View("./About");

Exibições parciais e componentes de exibição usam mecanismos de descoberta semelhantes (mas não idênticos).Partial views and view components use similar (but not identical) discovery mechanisms.

É possível personalizar a convenção padrão de como as exibições ficam localizadas dentro do aplicativo usando um IViewLocationExpander personalizado.You can customize the default convention for how views are located within the app by using a custom IViewLocationExpander.

A descoberta de exibição depende da localização de arquivos de exibição pelo nome do arquivo.View discovery relies on finding view files by file name. Se o sistema de arquivos subjacente diferenciar maiúsculas de minúsculas, os nomes de exibição provavelmente diferenciarão maiúsculas de minúsculas.If the underlying file system is case sensitive, view names are probably case sensitive. Para fins de compatibilidade de sistemas operacionais, padronize as maiúsculas e minúsculas dos nomes de controladores e de ações e dos nomes de arquivos e pastas de exibição.For compatibility across operating systems, match case between controller and action names and associated view folders and file names. Se encontrar um erro indicando que não é possível encontrar um arquivo de exibição ao trabalhar com um sistema de arquivos que diferencia maiúsculas de minúsculas, confirme que o uso de maiúsculas e minúsculas é correspondente entre o arquivo de exibição solicitado e o nome do arquivo de exibição real.If you encounter an error that a view file can't be found while working with a case-sensitive file system, confirm that the casing matches between the requested view file and the actual view file name.

Siga a melhor prática de organizar a estrutura de arquivos de suas exibições de forma a refletir as relações entre controladores, ações e exibições para facilidade de manutenção e clareza.Follow the best practice of organizing the file structure for your views to reflect the relationships among controllers, actions, and views for maintainability and clarity.

Passando dados para exibiçõesPassing data to views

Passe dados para exibições usando várias abordagens:Pass data to views using several approaches:

  • Dados fortemente tipados: viewmodelStrongly typed data: viewmodel
  • Dados fracamente tipadosWeakly typed data
    • ViewData (ViewDataAttribute)ViewData (ViewDataAttribute)
    • ViewBag

Dados fortemente tipados (viewmodel)Strongly typed data (viewmodel)

A abordagem mais robusta é especificar um tipo de modelo na exibição.The most robust approach is to specify a model type in the view. Esse modelo é conhecido como viewmodel.This model is commonly referred to as a viewmodel. Você passa uma instância do tipo viewmodel para a exibição da ação.You pass an instance of the viewmodel type to the view from the action.

Usar um viewmodel para passar dados para uma exibição permite que a exibição tire proveito da verificação de tipo forte.Using a viewmodel to pass data to a view allows the view to take advantage of strong type checking. Tipagem forte (ou fortemente tipado) significa que cada variável e constante têm um tipo definido explicitamente (por exemplo, string, int ou DateTime).Strong typing (or strongly typed) means that every variable and constant has an explicitly defined type (for example, string, int, or DateTime). A validade dos tipos usados em uma exibição é verificada em tempo de compilação.The validity of types used in a view is checked at compile time.

O Visual Studio e o Visual Studio Code listam membros de classe fortemente tipados usando um recurso chamado IntelliSense.Visual Studio and Visual Studio Code list strongly typed class members using a feature called IntelliSense. Quando quiser ver as propriedades de um viewmodel, digite o nome da variável para o viewmodel, seguido por um ponto final (.).When you want to see the properties of a viewmodel, type the variable name for the viewmodel followed by a period (.). Isso ajuda você a escrever código mais rapidamente e com menos erros.This helps you write code faster with fewer errors.

Especifique um modelo usando a diretiva @model.Specify a model using the @model directive. Use o modelo com @Model:Use the model with @Model:

@model WebApplication1.ViewModels.Address

<h2>Contact</h2>
<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Para fornecer o modelo à exibição, o controlador o passa como um parâmetro:To provide the model to the view, the controller passes it as a parameter:

public IActionResult Contact()
{
    ViewData["Message"] = "Your contact page.";

    var viewModel = new Address()
    {
        Name = "Microsoft",
        Street = "One Microsoft Way",
        City = "Redmond",
        State = "WA",
        PostalCode = "98052-6399"
    };

    return View(viewModel);
}

Não há restrições quanto aos tipos de modelo que você pode fornecer a uma exibição.There are no restrictions on the model types that you can provide to a view. Recomendamos o uso de viewmodels do tipo POCO (objeto CRL básico) com pouco ou nenhum comportamento (métodos) definido.We recommend using Plain Old CLR Object (POCO) viewmodels with little or no behavior (methods) defined. Geralmente, classes de viewmodel são armazenadas na pasta Models ou em uma pasta ViewModels separada na raiz do aplicativo.Usually, viewmodel classes are either stored in the Models folder or a separate ViewModels folder at the root of the app. O viewmodel Address usado no exemplo acima é um viewmodel POCO armazenado em um arquivo chamado Address.cs:The Address viewmodel used in the example above is a POCO viewmodel stored in a file named Address.cs:

namespace WebApplication1.ViewModels
{
    public class Address
    {
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PostalCode { get; set; }
    }
}

Nada impede que você use as mesmas classes para seus tipos de viewmodel e seus tipos de modelo de negócios.Nothing prevents you from using the same classes for both your viewmodel types and your business model types. No entanto, o uso de modelos separados permite que suas exibições variem independentemente das partes de lógica de negócios e de acesso a dados do aplicativo.However, using separate models allows your views to vary independently from the business logic and data access parts of your app. A separação de modelos e viewmodels também oferece benefícios de segurança quando os modelos usam model binding e validação para dados enviados ao aplicativo pelo usuário.Separation of models and viewmodels also offers security benefits when models use model binding and validation for data sent to the app by the user.

Dados fracamente tipados (ViewData, atributo ViewData e ViewBag)Weakly typed data (ViewData, ViewData attribute, and ViewBag)

ViewBag não está disponível nas Páginas do Razor.ViewBag isn't available in Razor Pages.

Além de exibições fortemente tipadas, as exibições têm acesso a uma coleção de dados fracamente tipados (também chamada de tipagem flexível).In addition to strongly typed views, views have access to a weakly typed (also called loosely typed) collection of data. Diferente dos tipos fortes, ter tipos fracos (ou tipos flexíveis) significa que você não declara explicitamente o tipo dos dados que está usando.Unlike strong types, weak types (or loose types) means that you don't explicitly declare the type of data you're using. Você pode usar a coleção de dados fracamente tipados para transmitir pequenas quantidades de dados para dentro e para fora dos controladores e das exibições.You can use the collection of weakly typed data for passing small amounts of data in and out of controllers and views.

Passar dados entre...Passing data between a ... ExemploExample
Um controlador e uma exibiçãoController and a view Preencher uma lista suspensa com os dados.Populating a dropdown list with data.
Uma exibição e uma exibição de layoutView and a layout view Definir o conteúdo do elemento <title> na exibição de layout de um arquivo de exibição.Setting the <title> element content in the layout view from a view file.
Uma exibição parcial e uma exibiçãoPartial view and a view Um widget que exibe dados com base na página da Web que o usuário solicitou.A widget that displays data based on the webpage that the user requested.

Essa coleção pode ser referenciada por meio das propriedades ViewData ou ViewBag em controladores e exibições.This collection can be referenced through either the ViewData or ViewBag properties on controllers and views. A propriedade ViewData é um dicionário de objetos fracamente tipados.The ViewData property is a dictionary of weakly typed objects. A propriedade ViewBag é um wrapper em torno de ViewData que fornece propriedades dinâmicas à coleção de ViewData subjacente.The ViewBag property is a wrapper around ViewData that provides dynamic properties for the underlying ViewData collection. Observação: as pesquisas de chave diferenciam maiúsculas de minúsculas tanto para ViewData quanto para ViewBag.Note: Key lookups are case-insensitive for both ViewData and ViewBag.

ViewData e ViewBag são resolvidos dinamicamente em tempo de execução.ViewData and ViewBag are dynamically resolved at runtime. Uma vez que não oferecem verificação de tipo em tempo de compilação, geralmente ambos são mais propensos a erros do que quando um viewmodel é usado.Since they don't offer compile-time type checking, both are generally more error-prone than using a viewmodel. Por esse motivo, alguns desenvolvedores preferem nunca usar ViewData e ViewBag ou usá-los o mínimo possível.For that reason, some developers prefer to minimally or never use ViewData and ViewBag.

ViewDataViewData

ViewData é um objeto ViewDataDictionary acessado por meio de chaves string.ViewData is a ViewDataDictionary object accessed through string keys. Dados de cadeias de caracteres podem ser armazenados e usados diretamente, sem a necessidade de conversão, mas você precisa converter os valores de outros objetos ViewData em tipos específicos quando extraí-los.String data can be stored and used directly without the need for a cast, but you must cast other ViewData object values to specific types when you extract them. Você pode usar ViewData para passar dados de controladores para exibições e dentro das exibições, incluindo exibições parciais e layouts.You can use ViewData to pass data from controllers to views and within views, including partial views and layouts.

A seguir, temos um exemplo que define valores para uma saudação e um endereço usando ViewData em uma ação:The following is an example that sets values for a greeting and an address using ViewData in an action:

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

Trabalhar com os dados em uma exibição:Work with the data in a view:

@{
    // Since Address isn't a string, it requires a cast.
    var address = ViewData["Address"] as Address;
}

@ViewData["Greeting"] World!

<address>
    @address.Name<br>
    @address.Street<br>
    @address.City, @address.State @address.PostalCode
</address>

Atributo ViewDataViewData attribute

Outra abordagem que usa o ViewDataDictionary é ViewDataAttribute.Another approach that uses the ViewDataDictionary is ViewDataAttribute. As propriedades nos controladores ou nos modelos da Página do Razor decoradas com [ViewData] têm seus valores armazenados e carregados do dicionário.Properties on controllers or Razor Page models decorated with [ViewData] have their values stored and loaded from the dictionary.

No exemplo a seguir, o controlador Home contém uma propriedade Title decorada com [ViewData].In the following example, the Home controller contains a Title property decorated with [ViewData]. O método About define o título para a exibição About:The About method sets the title for the About view:

public class HomeController : Controller
{
    [ViewData]
    public string Title { get; set; }

    public IActionResult About()
    {
        Title = "About Us";
        ViewData["Message"] = "Your application description page.";

        return View();
    }
}

Na exibição About, acesse a propriedade Title como uma propriedade de modelo:In the About view, access the Title property as a model property:

<h1>@Model.Title</h1>

No layout, o título é lido a partir do dicionário ViewData:In the layout, the title is read from the ViewData dictionary:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"] - WebApplication</title>
    ...

ViewBagViewBag

ViewBag não está disponível nas Páginas do Razor.ViewBag isn't available in Razor Pages.

ViewBag é um objeto DynamicViewData que fornece acesso dinâmico aos objetos armazenados em ViewData.ViewBag is a DynamicViewData object that provides dynamic access to the objects stored in ViewData. Pode ser mais conveniente trabalhar com ViewBag, pois ele não requer uma conversão.ViewBag can be more convenient to work with, since it doesn't require casting. O exemplo a seguir mostra como usar ViewBag com o mesmo resultado que o uso de ViewData acima:The following example shows how to use ViewBag with the same result as using ViewData above:

public IActionResult SomeAction()
{
    ViewBag.Greeting = "Hello";
    ViewBag.Address  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}
@ViewBag.Greeting World!

<address>
    @ViewBag.Address.Name<br>
    @ViewBag.Address.Street<br>
    @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode
</address>

Usando ViewData e ViewBag simultaneamenteUsing ViewData and ViewBag simultaneously

ViewBag não está disponível nas Páginas do Razor.ViewBag isn't available in Razor Pages.

Como ViewData e ViewBag fazem referência à mesma coleção ViewData subjacente, você pode usar ViewData e ViewBag, além de misturá-los e combiná-los ao ler e gravar valores.Since ViewData and ViewBag refer to the same underlying ViewData collection, you can use both ViewData and ViewBag and mix and match between them when reading and writing values.

Defina o título usando ViewBag e a descrição usando ViewData na parte superior de uma exibição About.cshtml:Set the title using ViewBag and the description using ViewData at the top of an About.cshtml view:

@{
    Layout = "/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "About Contoso";
    ViewData["Description"] = "Let us tell you about Contoso's philosophy and mission.";
}

Leia as propriedades, mas inverta o uso de ViewData e ViewBag.Read the properties but reverse the use of ViewData and ViewBag. No arquivo _Layout.cshtml, obtenha o título usando ViewData e a descrição usando ViewBag:In the _Layout.cshtml file, obtain the title using ViewData and obtain the description using ViewBag:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@ViewBag.Description">
    ...

Lembre-se de que cadeias de caracteres não exigem uma conversão para ViewData.Remember that strings don't require a cast for ViewData. Você pode usar @ViewData["Title"] sem converter.You can use @ViewData["Title"] without casting.

Usar ViewData e ViewBag ao mesmo tempo funciona, assim como misturar e combinar e leitura e a gravação das propriedades.Using both ViewData and ViewBag at the same time works, as does mixing and matching reading and writing the properties. A seguinte marcação é renderizada:The following markup is rendered:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About Contoso</title>
    <meta name="description" content="Let us tell you about Contoso's philosophy and mission.">
    ...

Resumo das diferenças entre ViewData e ViewBagSummary of the differences between ViewData and ViewBag

ViewBag não está disponível em páginas Razor.ViewBag isn't available in the Razor Pages.

  • ViewData
    • Deriva de ViewDataDictionary, de forma que tem propriedades de dicionário que podem ser úteis, como ContainsKey, Add, Remove e Clear.Derives from ViewDataDictionary, so it has dictionary properties that can be useful, such as ContainsKey, Add, Remove, and Clear.
    • Chaves no dicionário são cadeias de caracteres, de forma que espaços em branco são permitidos.Keys in the dictionary are strings, so whitespace is allowed. Exemplo: ViewData["Some Key With Whitespace"]Example: ViewData["Some Key With Whitespace"]
    • Qualquer tipo diferente de string deve ser convertido na exibição para usar ViewData.Any type other than a string must be cast in the view to use ViewData.
  • ViewBag
    • Deriva de DynamicViewData, de forma que permite a criação de propriedades dinâmicas usando a notação de ponto (@ViewBag.SomeKey = <value or object>) e nenhuma conversão é necessária.Derives from DynamicViewData, so it allows the creation of dynamic properties using dot notation (@ViewBag.SomeKey = <value or object>), and no casting is required. A sintaxe de ViewBag torna mais rápido adicioná-lo a controladores e exibições.The syntax of ViewBag makes it quicker to add to controllers and views.
    • Mais simples de verificar quanto à presença de valores nulos.Simpler to check for null values. Exemplo: @ViewBag.Person?.NameExample: @ViewBag.Person?.Name

Quando usar ViewData ou ViewBagWhen to use ViewData or ViewBag

ViewData e ViewBag são abordagens igualmente válidas para passar pequenas quantidades de dados entre controladores e exibições.Both ViewData and ViewBag are equally valid approaches for passing small amounts of data among controllers and views. A escolha de qual delas usar é baseada na preferência.The choice of which one to use is based on preference. Você pode misturar e combinar objetos ViewData e ViewBag, mas é mais fácil ler e manter o código quando uma abordagem é usada de maneira consistente.You can mix and match ViewData and ViewBag objects, however, the code is easier to read and maintain with one approach used consistently. Ambas as abordagens são resolvidas dinamicamente em tempo de execução e, portanto, são propensas a causar erros de tempo de execução.Both approaches are dynamically resolved at runtime and thus prone to causing runtime errors. Algumas equipes de desenvolvimento as evitam.Some development teams avoid them.

Exibições dinâmicasDynamic views

Exibições que não declaram um tipo de modelo usando @model, mas que têm uma instância de modelo passada a elas (por exemplo, return View(Address);) podem referenciar as propriedades da instância dinamicamente:Views that don't declare a model type using @model but that have a model instance passed to them (for example, return View(Address);) can reference the instance's properties dynamically:

<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Esse recurso oferece flexibilidade, mas não oferece proteção de compilação ou IntelliSense.This feature offers flexibility but doesn't offer compilation protection or IntelliSense. Se a propriedade não existir, a geração da página da Web falhará em tempo de execução.If the property doesn't exist, webpage generation fails at runtime.

Mais recursos das exibiçõesMore view features

Auxiliares de Marca facilitam a adição do comportamento do lado do servidor às marcações HTML existentes.Tag Helpers make it easy to add server-side behavior to existing HTML tags. O uso de Auxiliares de marca evita a necessidade de escrever código personalizado ou auxiliares em suas exibições.Using Tag Helpers avoids the need to write custom code or helpers within your views. Auxiliares de marca são aplicados como atributos a elementos HTML e são ignorados por editores que não podem processá-los.Tag helpers are applied as attributes to HTML elements and are ignored by editors that can't process them. Isso permite editar e renderizar a marcação da exibição em várias ferramentas.This allows you to edit and render view markup in a variety of tools.

É possível gerar uma marcação HTML personalizada com muitos auxiliares HTML internos.Generating custom HTML markup can be achieved with many built-in HTML Helpers. Uma lógica de interface do usuário mais complexa pode ser tratada por Componentes de exibição.More complex user interface logic can be handled by View Components. Componentes de exibição fornecem o mesmo SoC oferecido por controladores e exibições.View components provide the same SoC that controllers and views offer. Eles podem eliminar a necessidade de ações e exibições que lidam com os dados usados por elementos comuns da interface do usuário.They can eliminate the need for actions and views that deal with data used by common user interface elements.

Como muitos outros aspectos do ASP.NET Core, as exibições dão suporte à injeção de dependência, permitindo que serviços sejam injetados em exibições.Like many other aspects of ASP.NET Core, views support dependency injection, allowing services to be injected into views.