Novidades no ASP.NET MVC 4

Artigo
11/21/2024

ASP.NET MVC 4 é uma estrutura para criar aplicativos Web escalonáveis e baseados em padrões usando padrões de design bem estabelecidos e o poder do ASP.NET e da estrutura .NET. Esta nova quarta versão da estrutura se concentra em facilitar o desenvolvimento de aplicativos da Web para dispositivos móveis.

Para começar, quando você cria um novo projeto ASP.NET MVC 4, agora há um modelo de projeto de aplicativo móvel que você pode usar para criar um aplicativo autônomo especificamente para dispositivos móveis. Além disso, ASP.NET MVC 4 se integra ao jQuery Mobile por meio de um pacote NuGet jQuery.Mobile.MVC. O jQuery Mobile é uma estrutura baseada em HTML5 para o desenvolvimento de aplicativos da Web compatíveis com todas as plataformas populares de dispositivos móveis, incluindo Windows Phone, iPhone, Android e assim por diante. No entanto, se você precisar de especialização, ASP.NET MVC 4 também permite que você forneça diferentes exibições para diferentes dispositivos e forneça otimizações específicas do dispositivo.

Neste laboratório prático, você começará com o modelo de projeto ASP.NET MVC 4 "Aplicativo de Internet" para criar um aplicativo de Galeria de Fotos. Você aprimorará progressivamente o aplicativo usando o jQuery Mobile e os novos recursos do ASP.NET MVC 4 para torná-lo compatível com diferentes dispositivos móveis e navegadores da Web para desktop. Você também aprenderá sobre novas receitas de código para geração de código e como ASP.NET MVC 4 facilita a escrita de métodos de ação assíncronos dando suporte a tipos de retorno Task<ActionResult> .

Observação

Todo o código de exemplo e snippets estão incluídos no Kit de Treinamento Web Camps, disponível em Versões Microsoft-Web/WebCampTrainingKit. O projeto específico para este laboratório está disponível em Novidades em Web Forms no ASP.NET 4.5.

Objetivos

Neste laboratório prático, você aprenderá a:

Aproveite os aprimoramentos nos modelos de projeto MVC do ASP.NET, incluindo o novo modelo de projeto de aplicativo móvel
Use o atributo de janela de visualização HTML5 e as consultas de mídia CSS para melhorar a exibição em dispositivos móveis
Use o jQuery Mobile para aprimoramentos progressivos e para criar uma interface do usuário da Web otimizada para toque
Criar visualizações específicas para dispositivos móveis
Use o componente de alternador de visualização para alternar entre as visualizações móvel e desktop no aplicativo
Criar controladores assíncronos usando o suporte a tarefas

Pré-requisitos

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

Microsoft Visual Studio Express 2012 para Web ou superior (leia o Apêndice B para obter instruções sobre como instalá-lo).
ASP.NET MVC 4 (incluído na instalação do Microsoft Visual Studio 2012)
Emulador do Windows Phone (incluído no SDK do Windows Phone 7.1.1)
Opcional - WebMatrix 2 com extensão Electric Plum iPhone Simulator (somente para o Exercício 3 usado para navegar no aplicativo Web com um simulador de iPhone)

Instalação

Em todo o documento de laboratório, você será instruído a inserir blocos de código. Para sua conveniência, a maior parte desse código é fornecida como Snippets de Código do Visual Studio, que você pode usar de dentro do Visual Studio para evitar a necessidade de adicioná-lo manualmente.

Para instalar os snippets de código:

Abra uma janela do Windows Explorer e navegue até a pasta Source\Setup do laboratório.
Clique duas vezes no arquivo Setup.cmd nessa pasta para instalar os snippets de código do Visual Studio.

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

Exercícios

Este laboratório prático inclui os seguintes exercícios:

Novos modelos de projeto ASP.NET MVC 4
Criando o aplicativo Web da Galeria de Fotos
Adicionando suporte para dispositivos móveis
Usando controladores assíncronos

Observação

Cada exercício é acompanhado por uma pasta End contendo a solução resultante que você deve obter após concluir os exercícios. Você pode usar esta 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: Novos modelos de projeto ASP.NET MVC 4

Neste exercício, você explorará os aprimoramentos nos modelos de projeto ASP.NET MVC 4. Além do modelo de Aplicação de Internet, já presente no MVC 3, esta versão agora inclui um modelo separado para aplicativos Mobile. Primeiro, você verá alguns recursos relevantes de cada um dos modelos. Em seguida, você trabalhará para renderizar sua página corretamente nas diferentes plataformas usando a abordagem correta.

Tarefa 1 – Explorando o modelo de aplicativo da Internet

Abra o Visual Studio.
Selecione o arquivo | Novo | Comando de menu Projeto . Na caixa de diálogo Novo Projeto, selecione o Visual C# | Modelo da Web na árvore do painel esquerdo e escolha ASP.NET Aplicativo Web MVC 4. Nomeie o projeto PhotoGallery, selecione um local (ou deixe o padrão) e clique em OK.

Observação

Posteriormente, você personalizará a solução PhotoGallery ASP.NET MVC 4 que está criando agora.

Criando um novo projeto
Na caixa de diálogo Novo ASP.NET Projeto MVC 4, selecione o modelo de projeto Aplicativo de Internet e clique em OK. Verifique se você selecionou Razor como o mecanismo de exibição.

Criando um novo aplicativo de Internet ASP.NET MVC 4

Observação

A sintaxe do Razor foi introduzida no ASP.NET MVC 3. Seu objetivo é minimizar o número de caracteres e pressionamentos de tecla necessários em um arquivo, permitindo um fluxo de trabalho de codificação rápido e fluido. O Razor aproveita as habilidades existentes da linguagem C# / VB (ou outras) e fornece uma sintaxe de marcação de modelo que permite um fluxo de trabalho de construção HTML incrível.
Pressione F5 para executar a solução e ver os modelos renovados. Você pode conferir os seguintes recursos:

Modelos de estilo moderno

Os modelos foram renovados, proporcionando estilos mais modernos.

ASP.NET modelos reestilizados do MVC 4

Nova página de contato

Renderização adaptável

Confira o redimensionamento da janela do navegador e observe como o layout da página se adapta dinamicamente ao novo tamanho da janela. Esses modelos usam a técnica de renderização adaptável para renderizar corretamente em plataformas de desktop e móveis sem qualquer personalização.

ASP.NET modelo de projeto MVC 4 em diferentes tamanhos de navegador

Interface do usuário mais rica com JavaScript

Outro aprimoramento dos modelos de projeto padrão é o uso de JavaScript para fornecer um JavaScript mais interativo. Os links Login e Register usados no modelo exemplificam como usar as validações do jQuery para validar os campos de entrada do lado do cliente.

Validação do jQuery

Observação

Observe as duas seções de login, na primeira seção você pode fazer login usando uma conta registrada do site e na segunda seção você pode, alternativamente, fazer login usando outro serviço de autenticação como o google (desativado por padrão).
Feche o navegador para interromper o depurador e retornar ao Visual Studio.
Abra o arquivo AuthConfig.cs localizado na pasta App_Start .

Remova o comentário da última linha para registrar o cliente do Google para autenticação OAuth .

public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

Observação

Observe que você pode habilitar facilmente a autenticação usando qualquer serviço OpenID ou OAuth, como Facebook, Twitter, Microsoft, etc.

Pressione F5 para executar a solução e navegue até a página de logon.
Selecione o serviço do Google para fazer login.

Selecionando o serviço de login
Faça login usando sua conta do Google.
Permita que o site (localhost) recupere informações da Conta do Google.
Por fim, você terá que se registrar no site para associar a conta do Google.

Associar sua conta do Google

Associar sua conta do Google 13. Feche o navegador para interromper o depurador e retornar ao Visual Studio. 14. Agora explore a solução para conferir alguns outros novos recursos introduzidos pelo ASP.NET MVC 4 no modelo de projeto.

O modelo de projeto de aplicativo de Internet ASP.NET MVC 4

O modelo de projeto de aplicativo de Internet ASP.NET MVC 4

Marcação HTML 5

Navegue pelas exibições de modelo para descobrir a nova marcação de tema.

Novo modelo, usando marcação Razor e HTML5 (About.cshtml).
Bibliotecas JavaScript atualizadas

O modelo padrão ASP.NET MVC 4 agora inclui o KnockoutJS, uma estrutura JavaScript MVVM que permite criar aplicativos da Web avançados e altamente responsivos usando JavaScript e HTML. Como no MVC3, as bibliotecas de interface do usuário jQuery e jQuery também estão incluídas no ASP.NET MVC 4.

Observação

Você pode obter mais informações sobre a biblioteca KnockOutJS neste link: [http://learn.knockoutjs.com/](http://learn.knockoutjs.com/). Além disso, você pode aprender sobre o jQuery e a interface do usuário do jQuery em [http://docs.jquery.com/](http://docs.jquery.com/).

Tarefa 2 – Explorando o modelo de aplicativo móvel

ASP.NET MVC 4 facilita o desenvolvimento de sites para navegadores de celulares e tablets. Esse modelo tem a mesma estrutura de aplicativo que o modelo de aplicativo da Internet (observe que o código do controlador é praticamente idêntico), mas seu estilo foi modificado para renderizar corretamente em dispositivos móveis baseados em toque.

Selecione o arquivo | Novo | Comando de menu Projeto . Na caixa de diálogo Novo Projeto, selecione o Visual C# | Modelo da Web na árvore do painel esquerdo e escolha o ASP.NET Aplicativo Web MVC 4. Nomeie o projeto PhotoGallery.Mobile, selecione um local (ou deixe o padrão), selecione "Adicionar à solução" e clique em OK.
Na caixa de diálogo Projeto Novo ASP.NET MVC 4, selecione o modelo de projeto de Aplicativo Móvel e clique em OK. Verifique se você selecionou Razor como o mecanismo de exibição.

Criando um novo aplicativo móvel ASP.NET MVC 4
Agora você pode explorar a solução e conferir alguns dos novos recursos introduzidos pelo modelo de solução ASP.NET MVC 4 para dispositivos móveis:
- Biblioteca móvel jQuery
  
  O modelo de projeto de aplicativo móvel inclui a biblioteca jQuery Mobile, que é uma biblioteca de software livre para compatibilidade com navegadores móveis. O jQuery Mobile aplica aprimoramento progressivo a navegadores móveis que suportam CSS e JavaScript. O aprimoramento progressivo permite que todos os navegadores exibam o conteúdo básico de uma página da web, enquanto permite que apenas os navegadores mais poderosos exibam o conteúdo avançado. Os arquivos JavaScript e CSS, incluídos no estilo jQuery Mobile, ajudam os navegadores móveis a ajustar o conteúdo na tela sem fazer nenhuma alteração na marcação da página.
  
  Biblioteca móvel jQuery incluída no modelo
- Marcação baseada em HTML5
  
  Modelo de aplicativo móvel usando marcação HTML5 (Login.cshtml e index.cshtml)
Pressione F5 para executar a solução.
Abra o Emulador do Windows Phone 7.
Na tela inicial do telefone, abra o Internet Explorer. Verifique o URL em que o aplicativo de desktop foi iniciado e navegue até esse URL no telefone (por exemplo, http://localhost:[PortNumber]/).
Agora você pode entrar na página de login ou verificar a página sobre. Observe que o estilo do site é baseado no novo aplicativo Metro para celular. O modelo de projeto ASP.NET MVC 4 é exibido corretamente em dispositivos móveis, garantindo que todos os elementos da página estejam visíveis e habilitados. Observe que os links no cabeçalho são grandes o suficiente para serem clicados ou tocados.

Páginas de modelo de projeto em um dispositivo móvel
O novo modelo também usa a meta tag Viewport. A maioria dos navegadores móveis define uma largura para uma janela de navegador virtual ou "janela de visualização", que é maior que a largura real do dispositivo móvel. Isso permite que os navegadores móveis exibam toda a página da web dentro da exibição virtual. A metatag Viewport permite que os desenvolvedores da Web definam a largura, a altura e a escala da área do navegador em dispositivos móveis. O modelo MVC 4 do ASP.NET para Aplicativos Móveis define o visor para a largura do dispositivo ("width=device-width") no modelo de layout (Views\Shared_Layout.cshtml), para que todas as páginas tenham seu visor definido para a largura da tela do dispositivo. Observe que a marca meta Viewport não alterará a exibição padrão do navegador.
Abra _Layout.cshtml, localizado no campo Exibições | Pasta compartilhada e comente a meta tag Viewport. Execute o aplicativo, se ainda não estiver aberto, e verifique as diferenças.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

O site depois de comentar a meta tag da janela de visualização

O site depois de comentar a meta tag viewport 10. No Visual Studio, pressione SHIFT + F5 para interromper a depuração do aplicativo. 11. Remova o comentário da meta tag da janela de visualização.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

Tarefa 3 - Uso da renderização adaptável

Nesta tarefa, você aprenderá outro método para renderizar uma página da Web corretamente em dispositivos móveis e navegadores da Web ao mesmo tempo, sem qualquer personalização. Você já usou a meta tag Viewport com uma finalidade semelhante. Agora você conhecerá outro método poderoso: renderização adaptativa.

A renderização adaptável é uma técnica que usa consultas de mídia CSS3 para personalizar o estilo aplicado a uma página. As consultas de mídia definem condições dentro de uma folha de estilos, agrupando estilos CSS sob uma determinada condição. Somente quando a condição é verdadeira, o estilo é aplicado aos objetos declarados.

A flexibilidade fornecida pela técnica de renderização adaptativa permite qualquer personalização para exibir o site em diferentes dispositivos. Você pode definir quantos estilos quiser em uma única folha de estilos sem escrever código lógico para escolher o estilo. Portanto, é uma maneira muito legal de adaptar estilos de página, pois reduz a quantidade de código duplicado e lógica para fins de renderização. Por outro lado, o consumo de largura de banda aumentaria, pois o tamanho de seus arquivos CSS poderia crescer marginalmente.

Usando a técnica de renderização adaptável, seu site será exibido corretamente, independentemente do navegador. No entanto, você deve considerar se a carga extra de largura de banda é uma preocupação.

Observação

O formato básico de uma consulta de mídia é: @media [Escopo: todos | portátil | impressão | projeção | tela] ([property:value] e ... [propriedade: valor])

Exemplos de consultas de mídia: >@media all e (max-width: 1000px) e (min-width: 700px) {}: Para todas as resoluções entre 700px e 1000px.

@media tela e (min-width: 400px) e (max-width: 700px) { ... }: Somente para telas. A resolução deve estar entre 400 e 700px.

@media handheld e (min-width: 20em), screen e (min-width: 20em) { ... }: Para handhelds (dispositivos móveis e dispositivos) e telas. A largura mínima deve ser maior que 20em.

Você pode encontrar mais informações sobre isso no site do W3C.

Agora você explorará como a renderização adaptável funciona, melhorando a legibilidade do modelo de site padrão do ASP.NET MVC 4.

Abra a solução PhotoGallery.sln que você criou na Tarefa 1 e selecione o projeto PhotoGallery. Pressione F5 para executar a solução.
Redimensione a largura do navegador, definindo as janelas para metade ou para menos de um quarto do tamanho original. Observe o que acontece com os itens no cabeçalho: Alguns elementos não aparecerão na área visível do cabeçalho.
Abra Site.css arquivo do Gerenciador de Soluções do Visual Studio, localizado na pasta Projeto de conteúdo . Pressione CTRL + F para abrir a pesquisa integrada do Visual Studio e escreva @media para localizar a consulta de mídia CSS.

A condição de consulta de mídia definida neste modelo funciona da seguinte maneira: Quando o tamanho da janela do navegador está abaixo de 850 px, as regras CSS aplicadas são as definidas dentro desse bloco de mídia.

Localizando a consulta de mídia
Substitua o valor do atributo max-width definido em 850 px por 10px, para desativar a renderização adaptável e pressione CTRL + S para salvar as alterações. Retorne ao navegador e pressione CTRL + F5 para atualizar a página com as alterações feitas. Observe as diferenças em ambas as páginas ao ajustar a largura da janela.

@media estilo à esquerda e à direita, o estilo é omitido" title="À esquerda, a página está aplicando o estilo @media, à direita, o estilo é omitido" />

À esquerda, a página está aplicando o @media estilo, à direita, o estilo é omitido

Agora, vamos conferir o que acontece nos dispositivos móveis:

@media estilo, à direita, o estilo é omitido" title="À esquerda, a página está aplicando o estilo @media, à direita, o estilo é omitido" />

À esquerda, a página está aplicando o @media estilo, à direita, o estilo é omitido

Embora você perceba que as alterações quando a página é renderizada em um navegador da Web não são muito significativas, ao usar um dispositivo móvel as diferenças se tornam mais óbvias. No lado esquerdo da imagem, podemos ver que o estilo personalizado melhorou a legibilidade.

A renderização adaptável pode ser usada em muitos outros cenários, facilitando a aplicação de estilo condicional a um site e resolvendo problemas comuns de estilo com uma abordagem organizada.

A marca meta Viewport e as consultas de mídia CSS não são específicas do ASP.NET MVC 4, portanto, você pode aproveitar esses recursos em qualquer aplicativo Web.
No Visual Studio, pressione SHIFT + F5 para interromper a depuração do aplicativo.

Exercício 2: Criando o aplicativo Web da Galeria de Fotos

Neste exercício, você trabalhará em um aplicativo Galeria de Fotos para exibir fotos. Você começará com o modelo de projeto ASP.NET MVC 4 e, em seguida, adicionará um recurso para recuperar fotos de um serviço e exibi-las na página inicial.

No exercício a seguir, você atualizará essa solução para aprimorar a maneira como ela é exibida em dispositivos móveis.

Tarefa 1 – Criando um serviço de fotos simuladas

Nesta tarefa, você criará uma simulação do serviço de fotos para recuperar o conteúdo que será exibido na galeria. Para fazer isso, você adicionará um novo controlador que simplesmente retornará um arquivo JSON com os dados de cada foto.

Abra o Visual Studio se ainda não estiver aberto.
Selecione o arquivo | Novo | Comando de menu Projeto . Na caixa de diálogo Novo Projeto, selecione o Visual C# | Modelo da Web na árvore do painel esquerdo e escolha ASP.NET Aplicativo Web MVC 4. Nomeie o projeto PhotoGallery, selecione um local (ou deixe o padrão) e clique em OK. Como alternativa, você pode continuar trabalhando em sua solução de aplicativo de Internet ASP.NET MVC 4 existente do Exercício 1 e ignorar a próxima etapa.
Na caixa de diálogo Novo ASP.NET Projeto MVC 4, selecione o modelo de projeto Aplicativo de Internet e clique em OK. Verifique se o Razor foi selecionado como o Mecanismo de Exibição.
No Gerenciador de Soluções, clique com o botão direito do mouse na pasta App_Data do projeto e selecione Adicionar | Item existente. Navegue até a pasta Source\Assets\App_Data deste laboratório e adicione o arquivo Photos.json .
Crie um novo controlador com o nome PhotoController. Para fazer isso, clique com o botão direito do mouse na pasta Controladores , vá para Adicionar e selecione Controlador. Preencha o nome do controlador, deixe o modelo de controlador MVC vazio e clique em Adicionar.

Adicionando o PhotoController
Substitua o método Index pela ação Gallery a seguir e retorne o conteúdo do arquivo JSON que você adicionou recentemente ao projeto.

(Snippet de código - ASP.NET MVC 4 Lab - Ex02 - Ação da galeria)
```
public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}
```
Pressione F5 para executar a solução e, em seguida, navegue até a seguinte URL para testar o serviço de fotos simuladas: http://localhost:[port]/photo/gallery (o valor [port] depende da porta atual em que o aplicativo foi iniciado). A solicitação para essa URL deve recuperar o conteúdo do arquivo Photos.json.

Testando o serviço de fotos simuladas

Em uma implementação real, você pode usar ASP.NET API Web para implementar o serviço Galeria de Fotos. O ASP.NET Web API é uma estrutura que facilita o desenvolvimento de serviços HTTP que alcançam uma ampla variedade de clientes, incluindo navegadores e dispositivos móveis. O ASP.NET Web API é uma plataforma ideal para o desenvolvimento de aplicativos RESTful no .NET Framework.

Tarefa 2 – Exibindo a galeria de fotos

Nesta tarefa, você atualizará a página inicial para mostrar a galeria de fotos usando o serviço fictício criado na primeira tarefa deste exercício. Você adicionará arquivos de modelo e atualizará as visualizações da galeria.

No Visual Studio, pressione SHIFT + F5 para interromper a depuração do aplicativo.
Crie a classe Foto na pasta Modelos . Para fazer isso, clique com o botão direito do mouse na pasta Modelos , selecione Adicionar e clique em Classe. Em seguida, defina o nome como Photo.cs e clique em Adicionar.

Adicione os seguintes membros à classe Photo .

(Trecho de código - ASP.NET MVC 4 Lab - Ex02 - Modelo da foto)

public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

Abra o arquivo HomeController.cs da pasta Controladores.

Adicionar as seguintes instruções de uso.

(Snippet de código - ASP.NET MVC 4 Lab - Ex02 - HomeController Usings)

using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

Atualize a ação Index para usar HttpClient para recuperar os dados da galeria e, em seguida, use o JavaScriptSerializer para desserializá-los para o modelo de exibição.

(Snippet de código – ASP.NET MVC 4 Lab – Ex02 – Ação de índice)

public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

Abra o arquivo Index.cshtml localizado na pasta Views\Home e substitua todo o conteúdo pelo código a seguir.

Esse código percorre todas as fotos recuperadas do serviço e as exibe em uma lista não ordenada.

(Trecho de código - ASP.NET MVC 4 Lab - Ex02 - Lista de fotos)

@model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Conteúdo do seu projeto e selecione Adicionar | Item existente. Navegue até a pasta Source\Assets\Content deste laboratório e adicione o arquivo Site.css . Você terá que confirmar sua substituição. Se você tiver o arquivo Site.css aberto, terá que confirmar para recarregar o arquivo também.
Abra o Explorador de Arquivos e copie toda a pasta Fotos localizada na pasta Origem\Ativos deste laboratório para a pasta raiz do seu projeto no Gerenciador de Soluções.
Execute o aplicativo. Agora você deve ver a página inicial exibindo as fotos na galeria.

Galeria
No Visual Studio, pressione SHIFT + F5 para interromper a depuração do aplicativo.

Exercício 3: Adicionando suporte para dispositivos móveis

Uma das principais atualizações do ASP.NET MVC 4 é o suporte para desenvolvimento móvel. Neste exercício, você explorará ASP.NET novos recursos do MVC 4 para aplicativos móveis, estendendo a solução PhotoGallery criada no exercício anterior.

Tarefa 1 – Instalando o jQuery Mobile em um aplicativo MVC 4 ASP.NET

Abra a solução Begin localizada na pasta Source/Ex3-MobileSupport/Begin/ . Caso contrário, você pode continuar usando a solução final 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ê terá que executar essas etapas depois de abrir uma solução existente neste laboratório.
Abra o Console do Gerenciador de Pacotes clicando na opção de menu Console do Gerenciador de Pacotes do Gerenciador>de Pacotes do NuGet Tools.>

Abrindo o Console do Gerenciador de Pacotes NuGet
No Console do Gerenciador de Pacotes, execute o seguinte comando para instalar o pacote jQuery.Mobile.MVC .

O jQuery Mobile é uma biblioteca de código aberto para a criação de interface do usuário da Web otimizada para toque. O pacote NuGet jQuery.Mobile.MVC inclui auxiliares para usar o jQuery Mobile com um aplicativo MVC 4 ASP.NET.

Observação

Ao executar o comando a seguir, você baixará a biblioteca jQuery.Mobile.MVC do Nuget.

PM
```
Install-Package jQuery.Mobile.MVC
```
Esse comando instala o jQuery Mobile e alguns arquivos auxiliares, incluindo o seguinte:
- Views/Shared/_Layout.Mobile.cshtml: é um layout baseado no jQuery Mobile otimizado para uma tela menor. Quando o site receber uma solicitação de um navegador móvel, ele substituirá o layout original (_Layout.cshtml) por este.
- Um componente de alternador de exibição: consiste na exibição parcial Views/Shared/_ViewSwitcher.cshtml e no controlador ViewSwitcherController.cs . Esse componente mostrará um link em navegadores móveis para permitir que os usuários alternem para a versão desktop da página.
  
  Projeto de galeria de fotos com suporte móvel

Registre os pacotes móveis. Para fazer isso, abra o arquivo Global.asax.cs e adicione a seguinte linha.

(Snippet de código - ASP.NET MVC 4 Lab - Ex03 - Registrar pacotes móveis)

protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

Execute o aplicativo usando um navegador da Web para desktop.
Abra o Emulador do Windows Phone 7, localizado no Menu Iniciar | Todos os Programas | SDK do Windows Phone 7.1 | Emulador do Windows Phone.
Na tela inicial do telefone, abra o Internet Explorer. Verifique o URL em que o aplicativo foi iniciado e navegue até esse URL com o navegador do telefone (por exemplo, http://localhost:[PortNumber]/).

Você observará que seu aplicativo terá uma aparência diferente no emulador do Windows Phone, pois o jQuery.Mobile.MVC criou novos ativos em seu projeto que mostram exibições otimizadas para dispositivos móveis.

Observe a mensagem na parte superior do telefone, mostrando o link que alterna para a visualização da área de trabalho. Além disso, o layout _Layout.Mobile.cshtml criado pelo pacote que você instalou está incluindo um layout diferente no aplicativo.

Observação

Até agora, não há link para voltar à visualização móvel. Ele será incluído em versões posteriores.

Visualização móvel da página inicial da Galeria de Fotos
No Visual Studio, pressione SHIFT + F5 para interromper a depuração do aplicativo.

Tarefa 2 – Criando exibições móveis

Nesta tarefa, você criará uma versão móvel da exibição de índice com conteúdo adaptado para melhor aparência em dispositivos móveis.

Copie a exibição Views\Home\Index.cshtml e cole-a para criar uma cópia, renomeie o novo arquivo para Index.Mobile.cshtml.
Abra a nova exibição Index.Mobile.cshtml criada e substitua a marca ul> existente <por esse código. Ao fazer isso, você estará atualizando a <tag ul> com as anotações de dados móveis do jQuery para usar os temas móveis do jQuery.
```
<ul data-role="listview" data-inset="true" data-filter="true">
```
Observação

Observe que:
- O atributo data-role definido como listview renderizará a lista usando os estilos listview.
- O atributo data-inset definido como true mostrará a lista com borda e margem arredondadas.
- O atributo data-filter definido como true gerará uma caixa de pesquisa.
Você pode aprender mais sobre as convenções do jQuery Mobile na documentação do projeto: [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/)
Pressione CTRL + S para salvar as alterações.
Alterne para o Emulador do Windows Phone e atualize o site. Observe a nova aparência da lista de galerias, bem como a nova caixa de pesquisa localizada na parte superior. Em seguida, digite uma palavra na caixa de pesquisa (por exemplo, Tulipas) para iniciar uma pesquisa na galeria de fotos.

Galeria usando o estilo listview com filtragem

Para resumir, você usou a receita do View Mobilizer para criar uma cópia da visualização Index com o sufixo "mobile". Esse sufixo indica ao MVC 4 que ASP.NET todas as solicitações geradas de um dispositivo móvel usarão essa cópia do índice. Além disso, você atualizou a versão móvel da exibição Índice para usar o jQuery Mobile para aprimorar a aparência do site em dispositivos móveis.
Volte para o Visual Studio e abra Site.Mobile.css localizado na pasta Conteúdo .

Corrija o posicionamento do título da foto para que ele apareça no lado direito da imagem. Para fazer isso, adicione o código a seguir ao arquivo Site.Mobile.css .

CSS

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

Pressione CTRL + S para salvar as alterações.
Volte para o Emulador do Windows Phone e atualize o site. Observe que o título da foto está posicionado corretamente agora.

Título posicionado no lado direito da imagem

Tarefa 3 – Temas do jQuery Mobile

Cada layout e widget no jQuery Mobile é projetado em torno de uma nova estrutura CSS orientada a objetos que possibilita a aplicação de um tema de design visual unificado completo a sites e aplicativos.

O tema padrão do jQuery Mobile inclui 5 amostras que recebem letras (a, b, c, d, e) para referência rápida.

Nesta tarefa, você atualizará o layout móvel para usar um tema diferente do padrão.

Retorne ao Visual Studio.
Abra o arquivo _Layout.Mobile.cshtml localizado em Views\Shared.
Encontre o elemento div com a função de dados definida como "page" e atualize o tema de dados para "e".
```
<div data-role="page" data-theme="e">
```
Pressione CTRL + S para salvar as alterações.
Atualize o site no Emulador do Windows Phone e observe o novo esquema de cores.

Layout móvel com um esquema de cores diferente

Tarefa 4 – Usando o componente View-Switcher e os recursos de substituição do navegador

Uma convenção para páginas da Web otimizadas para dispositivos móveis é adicionar um link cujo texto seja algo como o modo de exibição de área de trabalho ou o modo de site completo, que permite que os usuários alternem para uma versão de desktop da página. O pacote jQuery.Mobile.MVC inclui um componente de alternador de exibição de exemplo para essa finalidade usado na exibição _Layout.Mobile.cshtml.

Link para alternar para a Visualização da Área de Trabalho

Link para alternar para a Visualização da Área de Trabalho

O alternador de exibição usa um novo recurso chamado Substituição do navegador. Esse recurso permite que seu aplicativo trate as solicitações como se elas viessem de um navegador (agente do usuário) diferente daquele de onde realmente vêm.

Nesta tarefa, você explorará a implementação de exemplo de um alternador de exibição adicionado pelo jQuery.Mobile.MVC e os novos recursos de substituição do navegador no ASP.NET MVC 4.

Retorne ao Visual Studio.
Abra a exibição _Layout.Mobile.cshtml localizada na pasta Views\Shared e observe o componente do alternador de exibição que está sendo referenciado como uma exibição parcial.

Layout móvel usando o componente View-Switcher
Abra a exibição parcial _ViewSwitcher.cshtml .

A visualização parcial usa o novo método ViewContext.HttpContext.GetOverriddenBrowser() para determinar a origem da solicitação da Web e mostrar o link correspondente para alternar para as visualizações Desktop ou Mobile.

O método GetOverriddenBrowser retorna uma instância HttpBrowserCapabilitiesBase que corresponde ao agente do usuário atualmente definido para a solicitação (real ou substituído). Você pode usar esse valor para obter propriedades como IsMobileDevice.

Visualização parcial do ViewSwitcher
Abra a classe ViewSwitcherController.cs localizada na pasta Controllers . Verifique se a ação SwitchView é chamada pelo link no componente ViewSwitcher e observe os novos métodos HttpContext.
- O método HttpContext.ClearOverriddenBrowser() remove qualquer agente de usuário substituído para a solicitação atual.
- O método HttpContext.SetOverriddenBrowser() substitui o valor real do agente do usuário da solicitação usando o agente do usuário especificado.
  
  Controlador ViewSwitcher
  
  A substituição do navegador é um recurso principal do MVC 4 ASP.NET, que também está disponível mesmo se você não instalar o pacote jQuery.Mobile.MVC. No entanto, esse recurso afeta apenas o modo de exibição, o layout e o modo de exibição parcial e não afeta nenhum dos recursos que dependem do objeto Request.Browser.

Tarefa 5 – Adicionando o View-Switcher no modo de exibição da área de trabalho

Nesta tarefa, você atualizará o layout da área de trabalho para incluir o alternador de exibição. Isso permitirá que os usuários móveis voltem para a visualização móvel ao navegar na visualização da área de trabalho.

Atualize o site no Emulador do Windows Phone.
Clique no link de visualização da área de trabalho na parte superior da galeria. Observe que não há alternador de exibição na visualização da área de trabalho para permitir que você retorne à visualização móvel.
Volte para o Visual Studio e abra o modo de exibição _Layout.cshtml .
Localize a seção de login e insira uma chamada para renderizar a _ViewSwitcher visualização parcial abaixo da _LogOnPartial visualização parcial. Em seguida, pressione CTRL + S para salvar as alterações.
```
<div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>
```
Pressione CTRL + S para salvar as alterações.
Atualize a página no Emulador do Windows Phone e clique duas vezes na tela para aumentar o zoom. Observe que a home page agora mostra o link de exibição móvel que alterna da exibição móvel para a área de trabalho.

Alternador de Visualização renderizado na visualização da área de trabalho
Alterne para a visualização móvel novamente e navegue até a página Sobre (http://localhost[porta]/Página inicial/Sobre). Observe que, mesmo que você não tenha criado uma exibição About.Mobile.cshtml, a página Sobre será exibida usando o layout móvel (_Layout.Mobile.cshtml).

Sobre a página
Por fim, abra o site em um navegador da Web para desktop. Observe que nenhuma das atualizações anteriores afetou a visualização da área de trabalho.

Visualização da área de trabalho do PhotoGallery

Tarefa 6 – Criando novos modos de exibição

O novo recurso de modos de exibição permite que um aplicativo selecione exibições dependendo do navegador que está gerando a solicitação. Por exemplo, se um navegador da área de trabalho solicitar a home page, o aplicativo retornará o modelo Views\Home\Index.cshtml . Em seguida, se um navegador móvel solicitar a home page, o aplicativo retornará o modelo Views\Home\Index.mobile.cshtml .

Nesta tarefa, você criará um layout personalizado para dispositivos iPhone e terá que simular solicitações de dispositivos iPhone. Para fazer isso, você pode usar um emulador/simulador de iPhone (como o Electric Mobile Simulator) ou um navegador com complementos que modificam o agente do usuário. Para obter instruções sobre como definir a string do agente do usuário em um navegador Safari para emular um iPhone, consulte Como permitir que o Safari finja que é o IE no blog de David Alison.

Observe que essa tarefa é opcional e você pode continuar em todo o laboratório sem executá-la.

No Visual Studio, pressione SHIFT + F5 para interromper a depuração do aplicativo.
Abra Global.asax.cs e adicione a seguinte instrução using.
```
using System.Web.WebPages;
```

Adicione o código realçado a seguir ao método Application_Start.

(Snippet de código - ASP.NET MVC 4 Lab - Ex03 - iPhone DisplayMode)

protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

Você registrou um novo DefaultDisplayMode chamado "iPhone", dentro da lista estática DisplayModeProvider.Instance.Modes estática, que será correspondida a cada solicitação de entrada. Se a solicitação de entrada contiver a cadeia de caracteres "iPhone", ASP.NET MVC encontrará as exibições cujo nome contém o sufixo "iPhone". O parâmetro 0 indica o quão específico é o novo modo; Por exemplo, essa visualização é mais específica do que a regra geral ".mobile" que corresponde a solicitações de dispositivos móveis.

Depois que esse código for executado, quando um navegador do iPhone gerar uma solicitação, seu aplicativo usará o layout Views\Shared\_Layout.iPhone.cshtml que você criará nas próximas etapas.

Observação

Essa maneira de testar a solicitação para o iPhone foi simplificada para fins de demonstração e pode não funcionar conforme o esperado para todas as strings de agente do usuário do iPhone (por exemplo, test diferencia maiúsculas de minúsculas).

Crie uma cópia do arquivo _Layout.Mobile.cshtml na pasta Views\Shared e renomeie a cópia para "_Layout.iPhone.cshtml".
Abra _Layout.iPhone.cshtml que você criou na etapa anterior.
Localize o elemento div com o atributo data-role definido como page e altere o atributo data-theme para "a".

<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

Agora você tem 3 layouts em seu aplicativo ASP.NET MVC 4:

_Layout.cshtml: layout padrão usado para navegadores da área de trabalho.
_Layout.mobile.cshtml: layout padrão usado para dispositivos móveis.
_Layout.iPhone.cshtml: layout específico para dispositivos iPhone, usando um esquema de cores diferente para diferenciar de _Layout.mobile.cshtml.
Pressione F5 para executar o aplicativo e navegar no site no Emulador do Windows Phone.
Abra um simulador de iPhone (consulte o Apêndice C para obter instruções sobre como instalar e configurar um simulador de iPhone) e navegue até o site também. Observe que cada telefone está usando o modelo específico.

Usando diferentes modos de exibição para cada dispositivo móvel

Exercício 4: Usando controladores assíncronos

O Microsoft .NET Framework 4.5 apresenta novos recursos de linguagem em C# e Visual Basic para fornecer uma nova base para assincronia na programação .NET. Essa nova base torna a programação assíncrona semelhante e tão simples quanto a programação síncrona. Agora você pode escrever métodos de ação assíncronos no MVC 4 ASP.NET usando a classe AsyncController . Você pode usar métodos de ação assíncronos para solicitações de execução longa e não associadas à CPU. Isso evita que o servidor Web execute o trabalho enquanto a solicitação está sendo processada. A classe AsyncController é normalmente usada para chamadas de serviço Web de longa duração.

Este exercício explica os conceitos básicos da operação assíncrona no ASP.NET MVC 4. Se você quiser um mergulho mais profundo, confira o seguinte artigo: [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

Tarefa 1 – Implementando um controlador assíncrono

Abra a solução Begin localizada na pasta Source/Ex4-Async/Begin/ . Caso contrário, você pode continuar usando a solução final 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ê terá que executar essas etapas depois de abrir uma solução existente neste laboratório.
Abra a classe HomeController.cs na pasta Controllers .
Adicione a seguinte instrução using.
```
using System.Threading.Tasks;
```
Atualize a classe HomeController para herdar de AsyncController. Os controladores derivados de AsyncController permitem que ASP.NET processem solicitações assíncronas e ainda podem atender a métodos de ação síncrona.
```
public class HomeController : AsyncController
{
```
Adicione a palavra-chave async ao método Index e faça com que ele retorne o tipo Task<ActionResult>.
```
public async Task<ActionResult> Index()
{
    ...
```
Observação

A palavra-chave async é uma das novas palavras-chave que o .NET Framework 4.5 fornece; ela informa ao compilador que esse método contém código assíncrono. Um objeto Task representa uma operação assíncrona que pode ser concluída em algum momento no futuro.
Substitua o cliente. GetAsync() com a versão assíncrona completa usando a palavra-chave await, conforme mostrado abaixo.

(Snippet de código – ASP.NET MVC 4 Lab – Ex04 – GetAsync)
```
public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...
```
Observação

Na versão anterior, você estava usando a propriedade Result do objeto Task para bloquear o thread até que o resultado seja retornado (versão de sincronização).

Adicionar a palavra-chave await informa ao compilador para aguardar de forma assíncrona a tarefa retornada da chamada de método. Isso significa que o restante do código será executado como um retorno de chamada somente após a conclusão do método esperado. Outra coisa a notar é que você não precisa alterar seu bloco try-catch para fazer isso funcionar: as exceções que acontecem em segundo plano ou em primeiro plano ainda serão capturadas sem nenhum trabalho extra usando um manipulador fornecido pela estrutura.

Altere o código para continuar com a implementação assíncrona substituindo as linhas pelo novo código, conforme mostrado abaixo

(Snippet de código – ASP.NET MVC 4 Lab – Ex04 – ReadAsStringAsync)

public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

Execute o aplicativo. Você não notará grandes alterações, mas seu código não bloqueará um thread do pool de threads, fazendo um melhor uso dos recursos do servidor e melhorando o desempenho.

Observação

Você pode saber mais sobre os novos recursos de programação assíncrona no laboratório "Programação assíncrona no .NET 4.5 com C# e Visual Basic" incluído no Kit de Treinamento do Visual Studio.

Tarefa 2 – Manipulando tempos limite com tokens de cancelamento

Métodos de ação assíncrona que retornam instâncias de Task também podem dar suporte a tempos limite. Nesta tarefa, você atualizará o código do método Index para lidar com um cenário de tempo limite usando um token de cancelamento.

Volte para o Visual Studio e pressione SHIFT + F5 para interromper a depuração.
Adicione a seguinte instrução using ao arquivo HomeController.cs .
```
using System.Threading;
```

Atualize a ação Index para receber um argumento CancellationToken .

public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

Atualize a chamada GetAsync para passar o token de cancelamento.

(Snippet de código – ASP.NET MVC 4 Lab – Ex04 – SendAsync com CancellationToken)

public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

Decore o método Index com um atributo AsyncTimeout definido como 500 milissegundos e um atributo HandleError configurado para lidar com TaskCanceledException redirecionando para uma exibição TimedOut .

(Snippet de código - ASP.NET MVC 4 Lab - Ex04 - Atributos)
```
[AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
```
Abra a classe PhotoController e atualize o método Gallery para atrasar a execução em 1000 milissegundos (1 segundo) para simular uma tarefa de execução longa.
```
public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}
```
Abra o arquivo Web.config e habilite erros personalizados adicionando o elemento a seguir.
```
<system.web>
  <customErrors mode="On"></customErrors>
  ...
```
Crie um novo modo de exibição em Views\Shared chamado TimedOut e use o layout padrão. No Gerenciador de Soluções, clique com o botão direito do mouse na pasta Exibições\Compartilhado e selecione Adicionar | Visualizar.

Usando diferentes modos de exibição para cada dispositivo móvel

Atualize o conteúdo da exibição TimedOut conforme mostrado abaixo.

@{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

Execute o aplicativo e navegue até a URL raiz. Como você adicionou um Thread.Sleep de 1000 milissegundos, você receberá um erro de tempo limite, gerado pelo atributo AsyncTimeout e catch pelo atributo HandleError .

Exceção de tempo limite tratada

Observação

Além disso, você pode implantar esse aplicativo em sites do Windows Azure seguindo o Apêndice D: Publicando um aplicativo MVC 4 ASP.NET usando a Implantação da Web.

Resumo

Neste laboratório prático, você observou alguns dos novos recursos residentes no ASP.NET MVC 4. Os seguintes conceitos foram discutidos:

Aproveite os aprimoramentos nos modelos de projeto MVC do ASP.NET, incluindo o novo modelo de projeto de aplicativo móvel
Use o atributo de janela de visualização HTML5 e as consultas de mídia CSS para melhorar a exibição em dispositivos móveis
Use o jQuery Mobile para aprimoramentos progressivos e para criar uma interface do usuário da Web otimizada para toque
Criar visualizações específicas para dispositivos móveis
Use o componente de alternador de visualização para alternar entre as visualizações móvel e desktop no aplicativo
Criar controladores assíncronos usando o suporte a tarefas

Apêndice A: Usando trechos de código

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

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

Usando trechos 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#)

Coloque o cursor onde deseja inserir o código.
Comece a digitar o nome do snippet (sem espaços ou hífens).
Veja como o IntelliSense exibe os nomes dos snippets correspondentes.
Selecione o snippet correto (ou continue digitando até que o nome do snippet inteiro seja selecionado).
Pressione a tecla Tab duas vezes para inserir o snippet no local do cursor.

Comece a digitar o nome do snippet

Comece a digitar o nome do snippet

Pressione Tab para selecionar o snippet destacado

Pressione Tab para selecionar o snippet destacado

Pressione Tab novamente e o snippet será expandido

Pressione Tab novamente e o snippet será expandido

Para adicionar um snippet de código usando o mouse (C#, Visual Basic e XML)

Clique com o botão direito do mouse onde deseja inserir o snippet de código.
Selecione Inserir Snippet seguido de Meus Snippets de Código.
Escolha o snippet relevante da lista, clicando nele.

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

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

Escolha o snippet relevante da lista, clicando nele

Escolha o snippet relevante da lista, clicando nele

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

Você pode instalar o 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 o Microsoft Web Platform Installer.

Vá para [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Como alternativa, se você já instalou o Web Platform Installer, poderá abri-lo e pesquisar o produto "Visual Studio Express 2012 for Web with Windows Azure SDK".
Clique em Instalar agora. Se você não tiver o Web Platform Installer , será redirecionado para baixá-lo e instalá-lo primeiro.
Quando o Web Platform Installer estiver aberto, clique em Instalar para iniciar a configuração.

Instalar o Visual Studio Express
Leia todas as licenças e termos dos produtos e clique em Aceito para continuar.

Aceitando os termos da licença
Aguarde até que o processo de download e instalação seja concluído.

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

Instalação concluída
Clique em Sair para fechar o Web Platform Installer.
Para abrir o Visual Studio Express para Web, vá para a tela Iniciar e comece a escrever "VS Express" e clique no bloco VS Express para Web .

Bloco do VS Express para Web

Apêndice C: Instalando o WebMatrix 2 e o iPhone Simulator

Para executar seu site em um dispositivo iPhone simulado, você pode usar a extensão WebMatrix "Electric Mobile Simulator for the iPhone". Além disso, você pode configurar a mesma extensão para executar o simulador do Visual Studio 2012.

Tarefa 1 – Instalando o WebMatrix 2

Vá para [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Como alternativa, se você já instalou o Web Platform Installer, poderá abri-lo e pesquisar o produto "WebMatrix 2".
Clique em Instalar agora. Se você não tiver o Web Platform Installer , será redirecionado para baixá-lo e instalá-lo primeiro.
Quando o Web Platform Installer estiver aberto, clique em Instalar para iniciar a configuração.

Instalar o WebMatrix 2
Leia todas as licenças e termos dos produtos e clique em Aceito para continuar.

Aceitando os termos da licença
Aguarde até que o processo de download e instalação seja concluído.

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

Instalação concluída
Clique em Sair para fechar o Web Platform Installer.

Tarefa 2 - Instalando a extensão do iPhone Simulator

Execute o WebMatrix e abra qualquer site existente ou crie um novo.
Clique no botão Executar na faixa de opções Página Inicial e selecione Adicionar novo.

Adicionando nova extensão do WebMatrix
Selecione Simulador de iPhone e clique em Instalar.

Navegando em extensões do WebMatrix
Nos detalhes do pacote, clique em Instalar para continuar com a instalação da extensão.

Extensão do iPhone Simulator
Leia e aceite o EULA da extensão.

EULA da extensão WebMatrix
Agora, você pode executar seu site a partir do WebMatrix usando a opção Simulador de iPhone.

Execute usando o iPhone

Tarefa 3 – Configurando o Visual Studio 2012 para executar o Simulador de iPhone

Abra o Visual Studio 2012 e abra qualquer site ou crie um novo projeto.
Clique na seta para baixo no botão Executar e selecione Procurar com.

Navegue com
Na caixa de diálogo "Procurar com", clique em Adicionar.
Na caixa de diálogo "Adicionar programa", use os seguintes valores:
- Programa: C:\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe (atualize o caminho de acordo)
- Argumentos: "1"
- Nome amigável: iPhone Simulator
  
  Adicionar programa para navegar
Clique em OK e feche as caixas de diálogo.
Agora você pode executar seus aplicativos Web no simulador do iPhone do Visual Studio 2012.

Navegue com o iPhone Simulator

Apêndice D: Publicando um aplicativo MVC 4 do ASP.NET usando a Implantação da Web

Este apêndice mostrará como criar um novo site no Portal de Gerenciamento do Windows Azure e publicar o aplicativo obtido seguindo o laboratório, aproveitando o recurso de publicação de Implantação da Web fornecido pelo Windows Azure.

Tarefa 1 – Criando um novo site a partir do Portal do Windows Azure

Vá para o Portal de Gerenciamento do Windows Azure e entre usando as credenciais da Microsoft associadas à sua assinatura.

Observação

Com o Windows Azure, você pode hospedar 10 ASP.NET sites gratuitamente e, em seguida, dimensionar à medida que o tráfego cresce. Você pode se inscrever aqui.

Faça logon no Portal de Gerenciamento do Windows Azure
Clique em Novo na barra de comandos.

Criando um novo site
Clique em Site de Computação | . Em seguida, selecione a opção Criação rápida. Forneça uma URL disponível para o novo site e clique em Criar Site.

Observação

Um site do Windows Azure é o host de um aplicativo Web em execução na nuvem que você pode controlar e gerenciar. A opção Criação Rápida permite implantar um aplicativo Web concluído no site do Windows Azure de fora do portal. Ele não inclui etapas para configurar um banco de dados.

Criando um novo site usando a Criação rápida
Aguarde até que o novo site seja criado.
Depois que o site for criado, clique no link na coluna URL . Verifique se o novo site está funcionando.

Navegando para o novo site

Site em execução
Volte para o portal e clique no nome do site na coluna Nome para exibir as páginas de gerenciamento.

Abrindo as páginas de gerenciamento do site
Na página Painel, na seção de visão rápida, clique no link Baixar perfil de publicação.

Observação

O perfil de publicação contém todas as informações necessárias para publicar um aplicativo Web em um site do Windows Azure para cada método de publicação habilitado. O perfil de publicação contém as URLs, as credenciais de usuário e as cadeias de caracteres de banco de dados necessárias para se conectar e autenticar em cada um dos pontos de extremidade para os quais um método de publicação está habilitado. O Microsoft WebMatrix 2, o Microsoft Visual Studio Express for Web e o Microsoft Visual Studio 2012 oferecem suporte à leitura de perfis de publicação para automatizar a configuração desses programas para publicar aplicativos Web em sites do Windows Azure.

Baixando o perfil de publicação do site
Baixe o arquivo de perfil de publicação em um local conhecido. Mais adiante neste exercício, você verá como usar esse arquivo para publicar um aplicativo Web em sites do Windows Azure a partir do Visual Studio.

Salvando o arquivo de perfil de publicação

Tarefa 2 – Configurando o servidor de banco de dados

Se o seu aplicativo usar bancos de dados do SQL Server, você precisará criar um servidor do Banco de Dados SQL. Se você quiser implantar um aplicativo simples que não usa o SQL Server, ignore essa tarefa.

Você precisará de um servidor de Banco de Dados SQL para armazenar o banco de dados do aplicativo. Você pode exibir os servidores do Banco de dados SQL de sua assinatura no portal de gerenciamento do Windows Azure no Painel do servidor de servidores dos bancos de dados | | SQL. Se você não tiver um servidor criado, poderá criar um usando o botão Adicionar na barra de comandos. Anote o nome e a URL do servidor, o nome de login e a senha do administrador, pois você os usará nas próximas tarefas. Não crie o banco de dados ainda, pois ele será criado em um estágio posterior.

Painel do Servidor do Banco de Dados SQL
Na próxima tarefa, você testará a conexão do banco de dados do Visual Studio, por esse motivo, você precisa incluir seu endereço IP local na lista de endereços IP permitidos do servidor. Para fazer isso, clique em Configurar, selecione o endereço IP do endereço IP do cliente atual e cole-o nas caixas de texto Endereço IP inicial e Endereço IP final e clique no botão.

Adicionando o endereço IP do cliente
Depois que o endereço IP do cliente for adicionado à lista de endereços IP permitidos, clique em Salvar para confirmar as alterações.

Confirmar alterações

Tarefa 3 – Publicando um aplicativo MVC 4 ASP.NET usando a Implantação da Web

Volte para a solução MVC 4 ASP.NET. No Gerenciador de Soluções, clique com o botão direito do mouse no projeto de site e selecione Publicar.

Publicando o site
Importe o perfil de publicação que você salvou na primeira tarefa.

Importando o perfil de publicação
Clique em Validar conexão. Quando a validação estiver concluída, clique em Avançar.

Observação

A validação é concluída quando você vê uma marca de seleção verde ao lado do botão Validar conexão.

Validando conexão
Na página Configurações, na seção Bancos de dados, clique no botão ao lado da caixa de texto da conexão com o banco de dados (ou seja, DefaultConnection).

Configuração de implantação da Web
Configure a conexão do banco de dados da seguinte maneira:
- No Nome do servidor, digite a URL do servidor do Banco de Dados SQL usando o prefixo tcp:.
- Em Nome de usuário, digite o nome de logon do administrador do servidor.
- Em Senha , digite sua senha de login de administrador do servidor.
- Digite um novo nome de banco de dados, por exemplo: MVC4SampleDB.
  
  Configurando a cadeia de conexão de destino
Em seguida, clique em OK. Quando solicitado a criar o banco de dados, clique em Sim.

Criando o banco de dados
A cadeia de conexão que você usará para se conectar ao Banco de dados SQL no Windows Azure é mostrada na caixa de texto Conexão Padrão. Em seguida, clique em Próximo.

Cadeia de conexão apontando para o Banco de Dados SQL
Na página Visualização, clique em Publicar.

Publicando o aplicativo Web
Quando o processo de publicação terminar, seu navegador padrão abrirá o site publicado.

Aplicativo publicado no Windows Azure