Novidades no ASP.NET e desenvolvimento da Web no Visual Studio 2012

Artigo
07/13/2023

A nova versão do Visual Studio apresenta uma série de aprimoramentos focados em melhorar a experiência e o desempenho ao trabalhar com tecnologias da Web. Os Editores do Visual Studio para CSS, JavaScript e HTML foram completamente renovados para incluir muitos dos auxílios de código mais procurados, como IntelliSense e recuo automático. Em relação ao desempenho, o agrupamento e a minificação agora são integrados como recursos internos para reduzir facilmente o tempo de carregamento da página.

O Visual Studio permite que você trabalhe com as tecnologias de site mais recentes. Você pode usar snippets CSS3 entre navegadores para garantir que seu site funcione independentemente da plataforma cliente, aproveitando também os novos elementos e recursos HTML5.

Escrever e criar perfil de código JavaScript deve ser mais fácil com esta versão do Visual Studio. Listas do IntelliSense, documentação XML integrada e recursos de navegação agora estão disponíveis para código JavaScript. Agora você tem o catálogo JavaScript ao seu alcance. Além disso, você pode marcar a conformidade do ECMAScript5 com seus scripts e detectar erros de sintaxe em um estágio inicial.

Por último, mas não menos importante, essa versão do Visual Studio implementa o agrupamento e a minificação internos. Seus arquivos de script e folhas de estilo serão empacotados e compactados para que o site seja executado mais rapidamente.

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

Objetivos

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

Usar os novos recursos e aprimoramentos no editor do CSS
Usar os novos recursos e aprimoramentos no editor HTML
Usar os novos recursos e aprimoramentos no editor do JavaScript
Configurar e usar o agrupamento e a minificação

Pré-requisitos

Microsoft Visual Studio Express 2012 para Web ou superior (leia Apêndice A para obter instruções sobre como instalá-lo).
Windows PowerShell (para scripts de instalação – já instalados no Windows 8 e no Windows Server 2008 R2)
Internet Explorer 10 – ou um navegador compatível com HTML5

Exercícios

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

Exercício 1: Novidades no Editor do CSS
Exercício 2: Novidades no Editor html
Exercício 3: Novidades no Editor javaScript
Exercício 4: Agrupamento e Minificação

Tempo estimado para concluir este laboratório: 60 minutos.

Exercício 1: Novidades no Editor do CSS

Os desenvolvedores web devem estar familiarizados com muitas das dificuldades relacionadas à edição do CSS. Um dos maiores problemas de estilo CSS é a compatibilidade entre navegadores. Geralmente acontece que, depois de aplicar estilos ao seu site, você percebe que ele parece diferente se você abri-lo em outro navegador ou dispositivo. Portanto, você pode gastar um tempo considerável na correção desses problemas visuais para perceber que, quando você finalmente faz isso funcionar em um navegador, ele é quebrado nas outras.

O Visual Studio agora inclui recursos que ajudam os desenvolvedores a acessar, trabalhar e organizar planilhas de estilo CSS com eficiência. Ao longo deste exercício, você atenderá aos novos recursos para uma organização e uma edição eficazes, bem como os Snippets de código CSS3 para compatibilidade entre navegadores.

Tarefa 1 – Novos Recursos do Editor

Nesta tarefa, você descobrirá os novos recursos do Editor do CSS. Este novo editor ajudará você a aumentar sua produtividade aproveitando o novo recuo inteligente, os comentários de código aprimorados e a lista avançada do IntelliSense.

Inicie o Visual Studio e abra a solução WhatsNewASPNET.sln localizada na pasta Source\WhatsNewASPNET deste laboratório.
Em Gerenciador de Soluções, abra o arquivo Site.css localizado na pasta Estilos. Verifique se as ferramentas do Editor de Texto estão visíveis na barra de ferramentas. Para fazer isso, selecione a opção de menu Exibir | Barras de Ferramentas e marcar as opções do Editor de Texto. Você observará que, como essa nova versão, o botão Comentário ( ) e o botão Descompactar ( ) também estão habilitados para o editor do CSS.

Habilitando o Editor e as Ferramentas CSS
Role o código e selecione qualquer definição de classe CSS. Clique no botão Comentário ( ) para comentar as linhas selecionadas. Em seguida, clique no botão Descompactar ( ) para desfazer as alterações.
Clique nos botões Recolher ( ) e Expandir ( ) localizados na margem esquerda do texto. Observe que agora você pode ocultar os estilos que não usa para ter uma exibição mais limpa.

em

Classes CSS em colapso
Verifique se o recurso de recuo inteligente está habilitado. Selecione a opção de menuOpções de Ferramentas | e, em seguida, selecione a páginaFormataçãoCSS | do Editor | de Texto no painel esquerdo da tela. Verifique a opção de recuo hierárquico .

Habilitando o recuo hierárquico
Localize a definição de classe main (.main) e acrescente um estilo aos elementos div. Você observará que o código se alinha automaticamente, ajudando os usuários a encontrar as classes pai rapidamente.

CSS
```
.main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }
```
Alinhamento hierárquico no CSS
Dentro da classe .main div, localize o cursor no final da borda: 0px e pressione Enter para exibir a lista do IntelliSense. Comece a digitar na parte superior e observe como a lista é filtrada conforme você digita. A lista exibirá os elementos que contêm a parte superior em qualquer parte da palavra (em versões anteriores do Visual Studio, a lista é filtrada pelos itens que começam com o termo).

Aprimoramentos do IntelliSense no CSS

Tarefa 2 – O Seletor de Cores

Nesta tarefa, você descobrirá o novo Seletor de Cores CSS integrado ao Visual Studio IntelliSense.

Em Site.css, localize a definição da classe de cabeçalho (.header) e coloque o cursor ao lado do atributo de cor da tela de fundo , entre os caracteres ":" e "#" nessa linha de código .

Localizando o cursor
Excluir dois-pontos (:) e escreva-o novamente para exibir o seletor de cores. Observe que as primeiras cores que você verá são as cores mais frequentes do seu site. Se você clicar na cor branca, seu código de cor HTML (#fff) substituirá o código de cor atual na folha de estilos.

Seletor de

Seletor de cores
Pressione o botão Expandir ( ) no seletor de cores para exibir o gradiente de cor e arraste o cursor de gradiente para selecionar uma cor diferente. Depois disso, clique no botão Conta-gotas e selecione qualquer cor na tela. Observe que o valor da cor da tela de fundo muda dinamicamente enquanto você move o cursor.

de cores

Gradiente do seletor de cores
No controle deslizante Opacidade , mova o seletor para o centro da barra para reduzir a opacidade. Observe que o valor de cor da tela de fundo agora altera sua escala para RGBA.

Opacidade do seletor de do

Opacidade do seletor de cores

Observação

A definição de cor RGBA (Vermelho, Verde, Azul, Alfa) no CSS3 permite que você defina o valor de opacidade de cor para um único item. Ao contrário da opacidade – um atributo - CSS semelhante cores RGBA também são compatíveis com os navegadores mais recentes.

Tarefa 3 – Snippets de código compatíveis com CSS

Nesta tarefa, você aprenderá a usar snippets CSS3 compatíveis com navegador cruzado para implementar alguns recursos em seu site.

No arquivo Site.css , localize a definição da classe CSS do cabeçalho (.header) e coloque o cursor abaixo do espaço reservado /*border radius*/ para adicionar um novo snippet de código. Pressione Enter para exibir a lista do IntelliSense e digite radius para filtrar a lista. Selecione a opção border-radius na lista com um clique duplo e pressione a tecla TAB para inserir o snippet. Em seguida, digite um tamanho de raio em pixels e pressione Enter. Por exemplo, digite 15px.

Os atributos CSS3 adicionados pelo snippet renderizarão bordas arredondadas na maioria dos navegadores de conformidade HTML5, incluindo navegadores baseados em Mozilla e WebKit.

Usando um snippet de raio de borda

Aplique os mesmos snippets de borda no estilo de página (.page).

CSS

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

Pressione F5 para executar a solução. Observe que cada página agora tem bordas arredondadas.

Cantos arredondados
Feche o navegador e retorne ao Visual Studio.
Abra o arquivo Custom.css localizado na pasta Estilos e coloque o cursor dentro da definição da classe div.images ul li img .
Pressione Enter para exibir a lista do IntelliSense, digite box-shadow e pressione a tecla TAB duas vezes para inserir o snippet de código de sombra padrão dentro da definição de classe. Defina os valores de sombra como 10px 10px 5px #888. Em seguida, digite border-radius e insira o snippet de código. Digite 15px para definir o tamanho do raio e pressione ENTER.

Cantos arredondados com sombra

Observação

Neste momento, o atributo de sombra é inserido com o prefixo correspondente (moz, webkit, o) para dar suporte a navegadores Mozilla e Webkit (Chrome, Safari, Konkeror).
Crie uma nova classe div.images ul li img:hover abaixo da definição da classe div.images ul li img e coloque o cursor dentro dos colchetes .

CSS
```
div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}
```

Digite transformar e pressione a tecla TAB duas vezes para inserir o snippet de transformação. Em seguida, insira rotate(-15deg) para alterar o valor do ângulo de rotação quando as imagens estiverem focalizados.

CSS

div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

Pressione F5 para executar a solução e navegue até a página CSS3. Observe que as imagens têm cantos arredondados e sombras de caixa. Passe o mouse sobre as imagens e watch-as girar.

Transformar snippet girando uma imagem

Observação

Se você estiver usando a Internet Explorer 10 e não conseguir ver as sombras, verifique se o modo de documento está definido como padrões IE10. Pressione F12 para abrir as ferramentas de desenvolvedor do Explorer internet e clique em Modo de Documento para alterar para os padrões do IE10.

Exercício 2: Novidades no Editor html

O Visual Studio tem um editor HTML aprimorado. Alguns dos aprimoramentos incluídos nesta versão são recuo inteligente em documentos HTML, snippets HTML5, correspondência de marca de início e término HTML e validação html. Ao longo deste exercício, você verá como essas alterações melhoram sua fluência ao trabalhar na marcação do site.

Assim como o editor do CSS, o editor html também foi aprimorado. A maioria dessas melhorias são pequenas que facilitam a vida do desenvolvedor Web. Coisas como mais snippets de código para HTML5, recuo inteligente, marcações de início e término correspondentes ao editar e validar o documento HTML DOCTYPE são algumas dessas melhorias.

Tarefa 1 – Validação de DOCTYPE aprimorada

O editor HTML agora tem a capacidade de marcar o DOCTYPE de sua página, mesmo que a definição possa estar na página master. Dependendo do DOCTYPE de sua página, o editor HTML validará com o conjunto correto de regras e filtrará a lista do IntelliSense considerando os elementos DOCTYPE.

Nesta tarefa, você alterará o DOCTYPE de uma página para ver como o comportamento do editor HTML muda adequadamente.

Se ainda não estiver aberto, inicie o Visual Studio e abra a solução WhatsNewASPNET.sln localizada na pasta Source\WhatsNewASPNET deste laboratório.
Abra a página Site.Master .
Observe o esquema de destino para a barra de ferramentas de validação. A maneira como o editor HTML se comporta (Validação, IntelliSense etc.) será alterada corretamente para se ajustar ao Doctype selecionado.

Usar Doctype na barra de ferramentas de Edição de Origem HTML
Altere o esquema de destino para HTML 4.01.

Alterando o Doctype na barra de ferramentas de Edição de Origem HTML
Coloque o cursor sob o elemento body e comece a digitar o nome de um elemento HTML5 (por exemplo, vídeo). Observe que o elemento não está disponível na lista do IntelliSense.

Elementos HTML5 não listados
Desfaça as alterações na barra de ferramentas esquema de destino para validação, escolhendo DOCTYPE: XHTML5 na lista suspensa.

Redefinir Doctype na barra de ferramentas de Edição de Origem HTML
Coloque o cursor sob o elemento body e comece a digitar um elemento HTML5 novamente (por exemplo, como vídeo). Observe que os elementos HTML5 agora estão disponíveis na lista do IntelliSense.

Elementos HTML5 que estão sendo listados

Tarefa 2 – Atualização Automática de Marcas de Início/Término

O Visual Studio agora atualiza as marcas de abertura ou fechamento html do elemento que você está editando para corresponder umas às outras. Esse novo recurso melhorará sua produtividade ao editar marcas HTML.

Na página Default.aspx , adicione um elemento H3 com um título (por exemplo, Rochas do Visual Studio 2012!).

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

Altere a marca H3 e digite H2 ou H1.

Observe que a marca final é atualizada automaticamente. Você também pode modificar a marca final para ver que a marca inicial também é atualizada adequadamente.

Atualização automática da marca final

Tarefa 3 – Novos snippets de código HTML5

O Visual Studio agora inclui vários snippets de código HTML5. Nesta tarefa, você usará alguns desses snippets.

Adicione uma nova pasta chamada áudio à raiz da pasta do site. Abra o Windows Explorer e copie qualquer arquivo de áudio na pasta de áudio da solução WhatsNewASPNET.sln.
Na página Default.aspx , localize o cursor no Web11 Rocks!! Cabeçalho. Digite áudio e pressione a tecla TAB.

O novo editor HTML inclui snippets de código para conteúdo HTML5. Lembre-se de usar a definição DOCTYPE adequada para habilitar os snippets html5.

Inserindo snippets de código HTML5

Atualize a fonte de áudio para apontar para um arquivo de áudio existente.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

Observação

Você precisará adicionar o arquivo de áudio à solução.

Pressione F5 para executar o site e reproduzir o áudio.

Executando o controle de áudio

Observação

Você também pode experimentar mais snippets incluídos no Visual Studio, como vídeo, figura etc.
Agora, tente inserir um controle em alguma parte da página. Por exemplo, tente inserir um controle GridView , mas em vez de digitar <Gri, comece a digitar <GV. Observe que a lista do IntelliSense mostra o controle asp:GridView .

O IntelliSense no Editor html agora fornece pesquisa de maiúsculas e minúsculas, bem como correspondência parcial (recuperando todos os elementos que contêm o termo).

Inserindo um GridView com listas do IntelliSense

Se você digitar <grade , obterá todos os itens que correspondem ao termo, mas o Visual Studio sugerirá o controle de visão de grade :

Inserindo um GridView com listas do IntelliSense e correspondência parcial

Tarefa 4 – Marcas Inteligentes do Editor html

Outra melhoria no Editor de HTML é o recurso Marcas Inteligentes. As marcas inteligentes facilitam a execução de tarefas de desenvolvimento comuns ou repetitivas por controle. Esse recurso já estava disponível na Designer HTML, mas não no Editor de HTML.

Abra Site.Master e localize o elemento asp:Menu . Coloque o cursor na marca inicial e observe que o pequeno glifo exibido na parte inferior do elemento – clique nele para abrir o menu de tarefas inteligentes. Observe que você tem acesso rápido a algumas tarefas relacionadas ao controle Menu.

Tarefas inteligentes para o controle menu

Tarefa 5 – Recuo Inteligente

Uma das melhores práticas em HTML é recuar os elementos aninhados para manter o código legível. No Visual Studio 2012, você observará que o editor recuará automaticamente os elementos enquanto você estiver escrevendo o código.

Observação

Na versão anterior do Visual Studio, o recuo inteligente estava disponível no editor XML, mas não no editor HTML.

Verifique se a configuração recuando no Editor HTML está definida como Recuo Inteligente. Para fazer isso, selecione as Ferramentas | Opção de menu Opções e, em seguida, selecione o Editor de Texto | HTML | Página guias no painel esquerdo da tela. Selecione a opção Recuo inteligente.

Configurações do Editor html
Na página Default.aspx , remova todo o conteúdo no elemento de áudio.
Coloque o cursor no final do elemento de áudio de abertura e pressione ENTER.

Observe que a nova posição do cursor tem um nível de recuo adicional.

Recuo inteligente no Editor html
Restaure a marca de áudio com o conteúdo que você removeu ou feche Default.aspx sem salvar as alterações.

Tarefa 6 – Extrair para o controle do usuário

As ferramentas de refatoração incluídas no Visual Studio, como extrair uma parte do código para uma função, são ótimos recursos que facilitam a melhoria e a refatoração do código existente. O equivalente para ASP.NET páginas seria a extração de código HTML para um Controle de Usuário. Fazer isso manualmente envolveria várias etapas, como criar um novo Controle de Usuário, mover a seção de código para o Controle de Usuário, registrar um prefixo de marca para o Controle de Usuário e, por fim, instanciar o Controle de Usuário nas páginas. Agora, a nova ferramenta Extrair para Controle de Usuário executa automaticamente todas essas etapas para você.

Nesta tarefa, você usará a nova operação contextual Extrair para Controle de Usuário para gerar um novo controle de usuário do código selecionado.

Na página Default.aspx , selecione os elementos H2 e áudio .
Clique com o botão direito do mouse e selecione Extrair no Controle de Usuário.

Opção de menu Extrair para Controle de Usuário
Digite um nome para o novo controle de usuário. Por exemplo, Jukebox.ascx e clique em OK.

Salvando o controle de usuário extraído
Observe que o código selecionado foi extraído para um controle de usuário e o local original do código selecionado foi substituído por uma instância do novo controle de usuário.

Página atualizada automaticamente para usar o novo controle de usuário
Pressione F5 para executar a página e verificar se o controle funciona.

Exercício 3: Novidades no Editor javaScript

Escrever ou editar código JavaScript não é uma tarefa fácil, especialmente quando seu aplicativo começa a aumentar de tamanho e você se vê lidando com arquivos longos e centenas de funções. Os desenvolvedores de script geralmente precisam fazer algum trabalho extra para manter a legibilidade do código e navegar entre arquivos. Com a inclusão de bibliotecas JavaScript como jQuery, a navegação de script tornou-se um desafio em si devido ao comprimento do código.

O Visual Studio renovou o editor javaScript com a promessa de tornar o modo de código acessível e organizado. Muitos recursos do Visual Studio que já existiam em editores C# ou VB agora são implementados no editor do JavaScript: Ir para Definição, recuo automático, documentação e validação ao escrever. Com a lista renovada do IntelliSense, você terá o catálogo de funções JavaScript ao seu alcance.

Neste exercício, você aprenderá alguns dos novos recursos e aprimoramentos do editor do JavaScript. Você procurará arquivos de exemplo e descobrirá cada uma das novas características que tornarão sua programação JavaScript mais eficiente no Visual Studio 2012.

Tarefa 1 – Novos recursos do Editor JavaScript

Esta tarefa apresentará alguns dos novos recursos do editor JavaScript, que se concentram em organizar seu código e trazer uma melhor experiência do usuário.

Se ainda não estiver aberto, inicie o Visual Studio e abra a solução WhatsNewASPNET.sln localizada na pasta Source\WhatsNewASPNET deste laboratório.
Pressione F5 para executar o aplicativo e clique no link JavaScript na barra de navegação. Atualize a página várias vezes e marcar como o contador incrementa.

Contador de páginas
Feche o navegador e volte para o Visual Studio.
Abra a página JavaScript.aspx e localize o bloco de <script> (mostrado abaixo).

O código a seguir usa o armazenamento local HTML5 para armazenar uma variável pageLoadCount que armazena o número de vezes que a página foi visitada pelo usuário atual. O Armazenamento Local é um banco de dados chave-valor do lado do cliente introduzido com o padrão HTML5. Os dados são salvos no computador local, dentro do navegador do usuário.
```
<script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>
```
Observação

Verifique se o DOCTYPE está definido como XHTML5 antes de prosseguir com as próximas etapas.
Edite o código e observe que o IntelliSense para JavaScript inclui recursos HTML5, como armazenamento local e seus métodos internos.

Recursos do JavaScript HTML5 no JavaScript
Clique em qualquer colchete de abertura ({) no código de script e observe que os colchetes estão realçados.

Colchetes são realçados
Descompacte a função testAutoAlign() (selecione as três linhas e você pode usar CTRL + K; CTRL + U) e localize o cursor dentro do código da função. Pressione Enter para acrescentar uma segunda linha. Observe que o código agora está alinhado e recuado automaticamente.

O código JavaScript é alinhado automaticamente

Tarefa 2 – Validando JavaScript

Nesta tarefa, você descobrirá a nova validação javaScript para o padrão ECMAScript5. Esse recurso ajudará você a escrever código JavaScript em conformidade, evitando problemas de script antes da implantação do site.

Observação

O Visual Studio 2010 implementou a conformidade do ECMAStript3, enquanto o Visual Studio 2012 fornece conformidade com o ECMAScript5.

Abra ECMA5script5.js localizado na pasta Scripts\projeto personalizado . Agora você testará a validação para o padrão ECMAScript5.
```
"use strict";

if (true) {
    function StrictModeError()
    {
    }
}
```
Você pode marcar a direção " use strict " na primeira linha do arquivo, o que permite o modo estrito ECMAScript5. Esse modo consiste em um subconjunto da linguagem que esclarece ambiguidades da edição anterior e adiciona alguns novos recursos, como getters e setters, suporte de biblioteca para JSON e reflexão mais completa sobre as propriedades do objeto.
Abra a Lista de Erros se ainda não estiver aberta (menu Exibir | Lista de erros). Observe que a declaração de função está sublinhada. Isso ocorre porque em funções padrão ECMA5 não podem ser aninhadas dentro de estruturas de linguagem. Na lista de erros abaixo, você verá os detalhes do aviso.

de

Mensagem de erro de validação do JavaScript
Comente a direção "usar estrito" e observe que os erros desaparecem, mas os avisos permanecem.
Na última linha do arquivo, escreva qualquer cadeia de caracteres como "test" (inclua as aspas para indicar que é como cadeia de caracteres). Escreva um período ao lado da cadeia de caracteres para exibir a lista do IntelliSense e selecione a opção de corte .

No padrão ECMAScript5, valores de cadeia de caracteres e variáveis também têm métodos de cadeia de caracteres definidos, como corte, maiúsculas, pesquisa e substituição.

Lista do IntelliSense em JavaScript

Tarefa 3 – Documentação XML para JavaScript

Nesta tarefa, você explorará os recursos do Visual Studio para documentação XML em JavaScript. Você verá que a lista do IntelliSense do JavaScript agora mostra a documentação XML de cada função. Além disso, você descobrirá o recurso de navegação em JavaScript.

Abra XMLDoc.js arquivo localizado na pasta Scripts/projeto personalizado . Esse arquivo contém a documentação XML em cada uma das funções JavaScript.

Documentação do JavaScript XML integrada ao IntelliSense
Abaixo , adicione a função no arquivo XMLDoc.js , crie uma nova função chamada test.
Na função de teste , chame a função de multiplicação que recebe dois parâmetros. Observe que a caixa de dica de ferramenta está mostrando a documentação da função multiplicar .
```
function test() {
  multiply(
}
```
Documentação XML para funções JavaScript
Conclua a instrução de chamada de função e digite um ponto para abrir a lista do IntelliSense no valor retornado. Observe que o Visual Studio está detectando o valor retornado na documentação, tratando o valor como um número.

Documentação XML para tipos de retorno
Agora, insira uma chamada para adicionar função. Observe que o editor javaScript agora dá suporte a sobrecargas de função. Ao escrever um nome de função, você poderá selecionar qualquer uma das sobrecargas disponíveis especificadas na documentação.

Documentação XML para sobrecargas
Abra GotoDefinition.js arquivo e localize a chamada de função $().html( ). Localize o cursor em html.
Pressione F12 e navegue até a definição. Observe que agora você pode acessar e procurar seu código JavaScript sem usar a ferramenta Localizar .
Localize o cursor na instrução jQuery antes do bloco de assinatura na parte inferior do arquivo de código. Pressione F12. Você navegará até o arquivo da biblioteca jQuery. Observe que você também pode navegar pelos arquivos jQuery usando F12.

Navegando até definições do jQuery

Observação

Verifique se GotoDefinition.js não tem erros de sintaxe antes de salvar o arquivo.

Exercício 4: Agrupamento e minificação

Quantas vezes seus sites incluem mais de um arquivo JavaScript ou CSS? Esse é um cenário muito comum em que o agrupamento e a minificação podem ajudar a reduzir o tamanho do arquivo e fazer com que o site seja executado mais rapidamente. O novo recurso de agrupamento no ASP.NET 4.5 empacota um conjunto de arquivos JS ou CSS em um único elemento e reduz seu tamanho minificando o conteúdo ( ou seja, removendo espaços em branco não necessários, removendo comentários, reduzindo identificadores ).

O agrupamento e a minificação no ASP.NET 4.5 são executados em runtime, para que o processo possa identificar o agente do usuário (por exemplo, IE, Mozilla etc.) e, portanto, melhorar a compactação direcionando o navegador do usuário (por exemplo, removendo coisas específicas do Mozilla quando a solicitação vem do IE).

Neste exercício, você aprenderá a habilitar e usar os diferentes tipos de agrupamento e minificação no ASP.NET 4.5.

Tarefa 1 – Instalando o pacote de agrupamento e minificação do NuGet

Se ainda não estiver aberto, inicie o Visual Studio e abra a solução WhatsNewASPNET.sln localizada na pasta Source\WhatsNewASPNET deste laboratório.
Abra o Console do Gerenciador de Pacotes NuGet. Para fazer isso, use o menu Exibir | Outro Console do Gerenciador dePacotes doWindows | .

Abrindo o console do gerenciador de pacotes
No Console do Gerenciador de Pacotes,digite Install-Package Microsoft.Web.Optimization e pressione ENTER.

Tarefa 2 – Pacotes Padrão

A maneira mais simples de usar o agrupamento e a minificação é habilitar os pacotes padrão. Esse método usa convenções para permitir que você faça referência à versão agrupada e minificada para os arquivos JS e CSS em uma pasta.

Nesta tarefa, você aprenderá a habilitar e referenciar os arquivos JS e CSS agrupados e minificados e exibir a saída resultante.

Se ainda não estiver aberto, inicie o Visual Studio e abra a solução WhatsNewASPNET.sln localizada na pasta Source\WhatsNewASPNET deste laboratório.
Na Gerenciador de Soluções, expanda as pastas Estilos, Scripts\personalizado e Scripts\bundle.

Observe que o aplicativo está usando mais de um arquivo CSS e JS.

Várias folhas de estilos e arquivos JavaScript no aplicativo
Abra o arquivo Global.asax.cs .

Observe que o novo namespace Microsoft.Web.Optimization é comentado no início do arquivo. Remova a marca de comentário da diretiva using para incluir os recursos de agrupamento e minificação.
```
using System;
using Microsoft.Web.Optimization;
```
Localize o método Application_Start .

Nesse método, remova a marca de comentário da chamada EnableDefaultBundles, conforme mostrado no snippet abaixo. Isso nos permite referenciar uma coleção agrupada de arquivos CSS em uma pasta usando o caminho para essa pasta, além do sufixo "CSS" ou "JS".
```
void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}
```
Abra o arquivo Optimization.aspx e localize o controle de conteúdo para HeadContent.

Observe que os arquivos CSS e os arquivos JS têm uma única marca referenciada.
```
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>
```
Observação

Esse código é para fins de demonstração. Idealmente, você fará referência aos pacotes no arquivo Site.Master. Neste código de exemplo, você descobrirá que alguns dos arquivos agrupados também estão sendo referenciados pelo arquivo Site.Master, tornando essa última referência redundante.
Observe que os links estão usando as convenções de agrupamento no atributo href para obter todos os arquivos CSS ou JS da pasta Styles e Scripts\custom, respectivamente.

Você pode usar o caminho Scripts/custom/JS conforme mostrado abaixo para agrupar e minificar todos os arquivos JS dentro de uma pasta Scripts/personalizada . Esse é o comportamento padrão com os pacotes padrão.
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
```
Abra o arquivo Styles\Site.css .

Observe que o arquivo CSS original contém código recuado, espaços em branco e comentários que ampliam o arquivo. (Além disso, o arquivo JavaScript contém espaços em branco e comentários).

Um dos arquivos CSS originais na pasta Scripts
Pressione F5 para executar o aplicativo e navegue até a página Otimização .
Clique no link Pacote CSS para baixar e abrir o arquivo.

Confira o arquivo empacotado minificado. Você observará que todos os espaços em branco, comentários e caracteres de recuo foram removidos, gerando um arquivo menor.

Arquivos CSS agrupados
Agora, clique no link pacote JS para abrir o arquivo empacotado javaScript. Você pode ignorar com segurança o aviso do explorer. Observe que os arquivos JavaScript na pasta personalizada também são agrupados e minificados.

Arquivos JavaScript agrupados

Habilitar a compactação para arquivos CSS ou JS era muito mais complicado na versão anterior do ASP.NET. Agora, como você viu, basta adicionar uma linha no arquivo Global.asax para habilitar o agrupamento e, em seguida, referenciar os arquivos agrupados do seu site.

Tarefa 3 – Pacotes Estáticos

A abordagem de pacote estático permite personalizar o conjunto de arquivos a serem agrupados, a referência e o método de minificação que será usado.

Nesta tarefa, você configurará um pacote estático para definir um conjunto específico de arquivos para agrupar e minificar.

Feche o navegador.
Abra o arquivo Global.asax.cs e localize o método Application_Start .

Remova a marca de comentário do código do pacote estático, conforme mostrado no código abaixo.

Você está definindo um pacote estático que será referenciado com o caminho virtual "~/StaticBundle" e usará JsMinify para a minificação de todos os arquivos especificados com o método AddFile . Por fim, você está adicionando o pacote estático à BundleTable e habilitando-o.

Observe que os arquivos não estão localizados no mesmo local; essa é outra vantagem em relação ao agrupamento padrão.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

Abra o arquivo Optimization.aspx .

Observe que o link para o Pacote JS Estático está usando o caminho que você declarou quando configurou o pacote estático no arquivo Global.asax.cs: /StaticBundle.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Pressione F5 para executar o aplicativo e navegue até a página Otimização .
Clique no link Pacote JS Estático para abrir o arquivo.

Observe que o arquivo JavaScript empacotado minificado é a saída para todos os arquivos JavaScript configurados no arquivo de pacote estático no caminho "/StaticBundle".

pacote

Pacote de arquivos JavaScript estáticos
Feche o navegador e retorne ao Visual Studio.

Tarefa 4 – Pacotes de Pasta Dinâmica

Nesta tarefa, você aprenderá a configurar pacotes de pastas dinâmicas. O poder do agrupamento dinâmico é que você pode incluir JavaScript estático, bem como outros arquivos em linguagens que são compilados em JavaScript e, portanto, exigem algum processamento antes que o agrupamento seja executado.

Neste exemplo, você aprenderá a usar a classe DynamicFolderBundle para criar um pacote dinâmico para arquivos escritos em CofeeScript. CofeeScript é uma linguagem de programação que é compilada em JavaScript e fornece uma sintaxe mais simples para escrever código JavaScript, aprimorando a brevidade e a legibilidade do JavaScript.

Abra o arquivo Global.asax.cs e localize o método Application_Start .

Remova o comentário do código de pacote dinâmico, conforme mostrado no código abaixo.

Você está definindo um pacote de pasta dinâmica que usará o processador de minificação personalizada CoffeeMinify que só se aplicará aos arquivos com a extensão ".coffee" (arquivos CoffeeScript). Observe que você pode usar um padrão de pesquisa para selecionar os arquivos a serem agrupados em uma pasta, como '*.coffee'.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}

Abra o Console do Gerenciador de Pacotes NuGet. Para fazer isso, use o menu Exibir | OutroConsole do Gerenciador de Pacotesdo Windows | .
No Console do Gerenciador de Pacotes,digite Install-Package CoffeeSharp e pressione ENTER.
Clique no botão Mostrar Todos os Arquivos na janela Gerenciador de Soluções

Mostrando todos os arquivos
Clique com o botão direito do mouse no arquivo CoffeeMinify.cs no Gerenciador de Soluções e selecione Incluir no Projeto

Incluir o arquivo CoffeeMinify.cs no projeto
Abra o arquivo CoffeeMinify.cs .

Essa classe herda do JsMinify para minificar a saída do JavaScript resultante da compilação de código CoffeeScript. Ele chama o compilador CoffeeScript para gerar o código JavaScript primeiro e, em seguida, envia-o para o método JsMinify.Process para minificar o código resultante.
```
public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}
```
Abra os arquivos Script1.coffee e Script2.coffee da pasta Scripts/pacote .

Esses arquivos incluirão o código CoffeScript a ser compilado ao executar o agrupamento com a classe CoffeeMinify.

Para fins de simplicidade, os arquivos CoffeeScript fornecidos incluem apenas o código de exemplo CoffeeScript. Os comentários são excluídos pelo processo JsMinify.

Arquivos CoffeeScript

Observação

O CofeeScript fornece uma sintaxe mais simples para escrever código JavaScript, aprimorar a brevidade e a legibilidade do JavaScript, bem como adicionar outros recursos, como compreensão de matriz e correspondência de padrões.

Abra o arquivo Optimization.aspx e localize os links do pacote.

Observe que o link para o Pacote JS Dinâmico está fazendo referência à pasta Scripts/pacote usando o sufixo /Coffee configurado para o pacote de pastas dinâmicas.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Pressione F5 para executar o aplicativo e navegue até a página Otimização .
Clique no link Pacote JS Dinâmico para abrir o arquivo gerado.

Observe que o conteúdo incluído neste pacote contém apenas arquivos .coffee . Você também pode ver que o código CoffeeScript foi compilado para JavaScript e as linhas comentadas foram removidas.

Pacote de arquivos JS dinâmicos

Observação

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

Resumo

Este laboratório ajuda você a entender o que é o Novo em ASP.NET e Desenvolvimento Web no Visual Studio 2012 e como aproveitar a variedade de aprimoramentos no Visual Studio 2012.

Ao concluir este Hands-On Lab, você aprendeu a usar os novos recursos e aprimoramentos nos Editores do Visual Studio 2012 para CSS, JavaScript e HTML. Além disso, você aprendeu como o Visual Studio 2012 implementa o agrupamento e a minificação internos.

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

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

Vá para [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Como alternativa, se você já tiver instalado o Web Platform Installer, poderá abri-lo e pesquisar o produto "Visual Studio Express 2012 para Web com o SDK do Windows Azure".
Clique em Instalar Agora. Se você não tiver o Web Platform Installer , será redirecionado para baixá-lo e instalá-lo primeiro.
Depois que o Instalador da Plataforma Web estiver aberto, clique em Instalar para iniciar a instalação.

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

Aceitando os termos de 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 Visual Studio Express para Web, vá para a tela Inicial e comece a escrever "VS Express" e clique no bloco do VS Express para Web.

Bloco do VS Express para Web

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

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

Tarefa 1 – Criar um novo site do Portal do Windows Azure

Acesse 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 sites ASP.NET gratuitamente e, em seguida, dimensionar à medida que o tráfego aumenta. Você pode se inscrever aqui.

Fazer 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 até o novo site

Site em execução
Voltar ao 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 conexão de banco de dados necessárias para conectar-se e autenticar cada um dos pontos de extremidade para os quais um método de publicação é habilitado. O Microsoft WebMatrix 2, Microsoft Visual Studio Express para Web e o Microsoft Visual Studio 2012 dão suporte à leitura de perfis de publicação para automatizar a configuração desses programas para publicar aplicativos Web em sites do Windows Azure.

Baixar o perfil de publicação do Site
Baixe o arquivo de perfil de publicação em um local conhecido. Além disso, neste exercício, você verá como usar esse arquivo para publicar um aplicativo Web em sites do Windows Azure do Visual Studio.

Salvando o arquivo de perfil de publicação

Tarefa 2 – Configurando o servidor de banco de dados

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

Você precisará de um servidor Banco de Dados SQL para armazenar o banco de dados do aplicativo. Você pode exibir os servidores Banco de Dados SQL de sua assinatura no portal de Gerenciamento do Windows Azure noPainel doSql Databases | Servers | Server. Se você não tiver um servidor criado, poderá criar um usando o botão Adicionar na barra de comandos. Anote o nome do servidor e a URL, o nome de logon do administrador e a senha, 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 Banco de Dados SQL
Na próxima tarefa, você testará a conexão de banco de dados do Visual Studio, por esse motivo, você precisará 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 . Insira um nome para a regra e clique no botão .

Adicionando 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 – Publicar um aplicativo ASP.NET MVC 4 usando a Implantação da Web

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

Publicando o site
Importe o perfil de publicação salvo na primeira tarefa.

Importando perfil de publicação
Clique em Validar Conexão. Depois que a Validação for concluída, clique em Avançar.

Observação

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

Validando a 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 de banco de dados (ou seja, DefaultConnection).

Configuração de implantação da Web
Configure a conexão de banco de dados da seguinte maneira:
- No nome do servidor, digite a URL do servidor 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 a senha de logon do 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 a 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 Banco de Dados SQL
Na página Visualização , clique em Publicar.

Publicando o aplicativo Web
Depois que o processo de publicação for concluído, o navegador padrão abrirá o site publicado.

Aplicativo publicado no Windows Azure