Os principais recursos do Páginas da Web do ASP.NET 2

Artigo
06/16/2023

Este artigo fornece uma visão geral dos principais novos recursos do Páginas da Web do ASP.NET 2 RC, uma estrutura de programação da Web leve incluída no Microsoft WebMatrix 2 RC.

O que está incluído:

Instalando o WebMatrix

Recursos novos e aprimorados

Alterações para a versão RC

Alterações para a versão Beta

Usando os modelos de site novos e atualizados

Validando entradas de usuário

Habilitar logons do Facebook e de outros sites usando OAuth e OpenID

Adicionando mapas usando o Auxiliar de Mapas

Executando aplicativos de páginas da Web lado a lado

Renderizando páginas para dispositivos móveis

Recursos adicionais

Observação

Este tópico pressupõe que você esteja usando o WebMatrix para trabalhar com seu código Páginas da Web do ASP.NET 2. No entanto, assim como acontece com as Páginas da Web 1, você também pode criar sites de Páginas da Web 2 usando o Visual Studio, o que oferece recursos avançados do IntelliSense e depuração. Para trabalhar com Páginas da Web no Visual Studio, primeiro você deve instalar o Visual Studio 2010 SP1, o Visual Web Developer Express 2010 SP1 ou o Visual Studio 11 Beta. Em seguida, instale o ASP.NET MVC 4 Beta, que inclui modelos e ferramentas para criar ASP.NET aplicativos MVC 4 e Páginas da Web 2 no Visual Studio.

Última atualização: 18 de junho de 2012

Instalando o WebMatrix

Para instalar páginas da Web, você pode usar o Microsoft Web Platform Installer, que é um aplicativo gratuito que facilita a instalação e a configuração de tecnologias relacionadas à Web. Você instalará o WebMatrix 2 Beta, que inclui As Páginas da Web 2 Beta.

Navegue até a página de instalação para obter a versão mais recente do Web Platform Installer:

https://go.microsoft.com/fwlink/?LinkId=226883

Observação

Se você já tiver o WebMatrix 1 instalado, esta instalação o atualizará para o WebMatrix 2 Beta. Você pode executar sites que foram criados usando a versão 1 ou 2 no mesmo computador. Para obter mais informações, consulte a seção em Executando aplicativos de páginas da Web lado a lado.
Escolha Instalar Agora.

Se você usar a Internet Explorer, vá para a próxima etapa. Se você usar um navegador diferente, como o Mozilla Firefox ou o Google Chrome, será solicitado que você salve o arquivo Webmatrix.exe em seu computador. Salve o arquivo e clique nele para iniciar o instalador.
Execute o instalador e escolha o botão Instalar . Isso instala o WebMatrix e as Páginas da Web.

Recursos novos e aprimorados

Alterações para a versão RC (junho de 2012)

O lançamento da versão RC em junho de 2012 tem algumas alterações em relação à atualização da versão Beta lançada em março de 2012. Essas alterações são:

Um Validation.AddFormError método foi adicionado ao Validation auxiliar. Isso será útil se você executar a validação manualmente (por exemplo, validar um valor que é passado na cadeia de caracteres de consulta) e quiser adicionar uma mensagem de erro que possa ser exibida pelo Html.ValidationSummary método . Para obter mais informações, consulte a seção Validando dados que não vêm diretamente de usuários na validação da entrada do usuário em sites do Páginas da Web do ASP.NET (Razor).
A funcionalidade para agrupamento e minificação foi removida dos assemblies principais Páginas da Web do ASP.NET 2. Como consequência, o Assets auxiliar listado posteriormente neste documento não está disponível. Em vez disso, você deve instalar o pacote NuGet de Otimização ASP.NET . Para obter mais informações, consulte Agrupando e minificando ativos em um site de Páginas da Web do ASP.NET (Razor).
Assemblies adicionais para dar suporte a Páginas da Web do ASP.NET 2 foram adicionados. O único efeito perceptível dessa alteração é que você pode ver mais assemblies na pasta bin de um site depois de criar um site ou implantar um site em um provedor de hospedagem.

Alterações para a versão Beta (fevereiro de 2012)

A versão Beta lançada em fevereiro de 2012 tem apenas algumas alterações da versão Beta lançada em dezembro de 2011. Essas alterações são:

O Razor agora dá suporte a atributos condicionais. Em um elemento HTML, se você definir um atributo como um valor que é resolvido no código do servidor para false ou null, ASP.NET não renderizará o atributo. Por exemplo, imagine que você tenha a seguinte marcação para uma caixa de marcar:
```
<input type="checkbox"
name="check1"
value="check1"
checked="@checked1" />
```
Se o valor de checked1 for resolvido para false ou para null, o checked atributo não será renderizado. Essa é uma alteração de quebra.
O Validation.GetHtml método foi renomeado para Validation.For. Esta é uma alteração interruptiva; Validation.GetHtml não funcionará na versão Beta.
Agora você pode incluir o ~ operador na marcação para fazer referência à raiz do site sem usar a Href função . (Ou seja, o analisador razor agora pode localizar e resolve o ~ operador sem exigir uma chamada de método explícita para Href.) O Href método ainda funciona, portanto, essa não é uma alteração interruptiva.

Por exemplo, se você já tinha marcação como esta:

<a href="@Href("~/Default.cshtml")">Home</a>

Agora você pode usar uma marcação como esta:

<a href="~/Default.cshtml">Home</a>
O Scripts auxiliar para o gerenciamento de ativos (recurso) foi substituído pelo Assets auxiliar, que tem métodos ligeiramente diferentes, como o seguinte:
- Para Scripts.Add, use Assets.AddScript
- Para Scripts.GetScriptTags, use Assets.GetScripts
  
  Esta é uma alteração interruptiva; a Scripts classe não está disponível na versão Beta. Os exemplos de código neste documento que usam o gerenciamento de ativos foram atualizados com essa alteração.

Usando os modelos de site novos e atualizados

O modelo site inicial foi atualizado para que ele seja executado nas Páginas da Web 2 por padrão. Ele também inclui os seguintes novos recursos:

Renderização de página amigável para dispositivos móveis. Por meio do uso de estilos CSS e do @media seletor, o Site Inicial fornece renderização aprimorada de páginas em telas menores, incluindo telas de dispositivos móveis.
Opções de autenticação e associação aprimoradas. Você pode permitir que os usuários façam logon em seu site usando suas contas de outros sites de redes sociais, como Twitter, Facebook e Windows Live. Para obter mais informações, consulte a seção Habilitando logons do Facebook e outros sites usando OAuth e OpenID .
Elementos HTML5.

O novo modelo de Site Pessoal permite criar um site que contém um blog pessoal, uma página de fotos e uma página do Twitter. Você pode personalizar um site com base no modelo de Site Pessoal fazendo o seguinte:

Altere a aparência do site editando o arquivo de layout (_SiteLayout.cshtml) e o arquivo de estilos (Site.css).
Instale pacotes NuGet que adicionam funcionalidade ao seu site. Para obter informações sobre como instalar pacotes, incluindo a Biblioteca de Auxiliares da Web do ASP.NET, consulte o tutorial sobre como instalar auxiliares.

Para acessar o modelo de Site Pessoal , escolha Modelos na tela Início Rápido do WebMatrix.

Na caixa de diálogo Modelos , escolha o modelo Site Pessoal .

A página de aterrissagem do modelo de Site Pessoal permite que você siga links para configurar seu blog, página do Twitter e página de fotos.

Validando entradas de usuário

Nas Páginas da Web 1, para validar a entrada do usuário nos formulários enviados, use a System.Web.WebPages.Html.ModelState classe . (Isso é ilustrado em vários dos exemplos de código no tutorial páginas da Web 1 intitulado Trabalhando com dados.) Você ainda pode usar essa abordagem nas Páginas da Web 2. No entanto, as Páginas da Web 2 também oferecem ferramentas aprimoradas para validar a entrada do usuário:

Novas classes de validação, incluindo System.Web.WebPages.ValidationHelper e System.Web.WebPages.Validator, que permitem realizar tarefas de validação avançadas com algumas linhas de código.
Opcionalmente, a validação do lado do cliente, que fornece comentários imediatos ao usuário em vez de exigir uma viagem de ida e volta ao servidor para marcar para erros de validação. (Por motivos de segurança, a validação é executada no servidor mesmo que as verificações tenham sido executadas no cliente com antecedência.)

Para usar os novos recursos de validação, faça o seguinte:

No código da página, registre um elemento a ser validado usando métodos do Validation auxiliar: Validation.RequireField, Validation.RequireFields (para registrar vários elementos a serem necessários) ou Validation.Add. O Add método permite especificar outros tipos de verificações de validação, como verificação de tipo de dados, comparação de entradas em diferentes campos, verificações de comprimento de cadeia de caracteres e padrões (usando expressões regulares). Estes são alguns exemplos:

Validation.RequireField("text1");
Validation.RequireField("text1", "The text1 field is required");
Validation.RequireFields("text1", "text2", "text3");

Validation.Add("text1", Validation.StringLength(5));
Validation.Add("textDate", Validation.DateTime("Enter a date"));
Validation.Add("textCount", Validation.Integer("Enter a number"));
Validation.Add("textCount",
Validation.Range(1, 10, "Enter a value between 1 and 10"));

Para exibir um erro específico do campo, chame Html.ValidationMessage na marcação de cada elemento que está sendo validado:

<input type="text" name="course"
value="@Request["course"]" />
@Html.ValidationMessage("course")

Para exibir um resumo (<ul> lista) de todos os erros na página, Html.ValidationSummary na marcação:

@Html.ValidationSummary()

Essas etapas são suficientes para implementar a validação do lado do servidor. Se você quiser adicionar a validação do lado do cliente, faça o seguinte, além disso.

Adicione as referências de arquivo de script a seguir dentro da <head> seção de uma página da Web. As duas primeiras referências de script apontam para arquivos remotos em um servidor cdn (rede de distribuição de conteúdo). A terceira referência aponta para um arquivo de script local. Os aplicativos de produção devem implementar um fallback quando a CDN não estiver disponível. Teste o fallback.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

A maneira mais fácil de obter uma cópia local da biblioteca dejquery.validate.unobtrusive.min.js é criar um novo site de Páginas da Web com base em um dos modelos de site (como Site Inicial). O site criado pelo modelo inclui jquery.validate.unobtrusive.js arquivo em sua pasta Scripts, da qual você pode copiá-lo para seu site.

Se o site usar uma página _SiteLayout para controlar o layout da página, você poderá incluir essas referências de script nessa página para que a validação esteja disponível para todas as páginas de conteúdo. Se você quiser executar a validação apenas em páginas específicas, poderá usar o gerenciador de ativos para registrar os scripts apenas nessas páginas. Para fazer isso, chame Assets.AddScript(path) na página que você deseja validar e referenciar cada um dos arquivos de script. Em seguida, adicione uma chamada à Assets.GetScripts na página _SiteLayout para renderizar as marcas registradas <script> . Para obter mais informações, consulte a seção Registrando scripts com o Gerenciador de Ativos.

Na marcação de um elemento individual, chame o Validation.For método . Esse método emite atributos que jQuery pode enganchar para fornecer validação do lado do cliente. Por exemplo:

<input type="text" name="course"
value="@Request["course"]"
@Validation.For("course")
/>
@Html.ValidationMessage("course")

O exemplo a seguir mostra uma página que valida a entrada do usuário em um formulário. Para executar e testar esse código de validação, faça o seguinte:

Crie um novo site usando um dos modelos de site do WebMatrix 2 que inclua uma pasta Scripts , como o modelo site inicial.
No novo site, crie uma nova página .cshtml e substitua o conteúdo da página pelo código a seguir.
Execute a página em um navegador. Insira valores válidos e inválidos para ver os efeitos na validação. Por exemplo, deixe um campo obrigatório em branco ou insira uma letra no campo Créditos.

@{
// Specify what fields users must fill in.
Validation.RequireFields("course", "professorname", "credits");
// Add validation criteria.  Here, require that input to Credits is an integer.
Validation.Add("credits", Validator.Integer());

if (IsPost)  {
// Wrap the postback code with a validation check.
if (Validation.IsValid()) {
    var course = Request["course"];
    var professorName = Request["professorname"];
    var credits = Request["credits"];
    // Display valid input values.
    <text>
        You entered: <br />
        Class: @course <br />
        Professor: @professorName <br />
        Credits: @credits <br />
    </text>
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing Validation in ASP.NET Web Pages version 2</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script  src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="@Href("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
</head>
<body>
<form method="post" action="">
<!-- Display a summary message about any validation issues. -->
@Html.ValidationSummary()
<fieldset>
  <legend>Add Class</legend>
<div>
  <label for="Course">Class:</label>
  <!-- Validation.For("course") adds validation attributes to the input element. -->
  <input type="text" name="Course" value="@Request["course"]"  @Validation.For("course") />

  <!-- Display a field-specific message about validation issues. -->
  @Html.ValidationMessage("course")
</div>

<div>
  <label for="ProfessorName">Professor:</label>
  <input type="text" name="ProfessorName" value="@Request["professorname"]"
      @Validation.For("professorname") />
  @Html.ValidationMessage("professorname")
</div>

<div>
  <label for="Credits">Credits:</label>
  <input type="text" name="Credits" value="@Request["credits"]" @Validation.For("credits") />
  @Html.ValidationMessage("credits")
</div>

<div>
  <label>&nbsp;</label>
  <input type="submit" value="Submit" class="submit" />
</div>
  </fieldset>
</form>
</body>
</html>

Esta é a página quando um usuário envia uma entrada válida:

Esta é a página quando um usuário a envia com um campo necessário deixado vazio:

Aqui está a página quando um usuário a envia com algo diferente de um inteiro no campo Créditos :

Para obter mais informações, consulte as seguintes postagens no blog:

Validação atualizada nas Páginas da Web v2 Noções básicas sobre como adicionar validação usando o Validation auxiliar (somente no lado do servidor)
Validação atualizada nas Páginas da Web v2, Parte 2 Adicionando validação do lado do cliente.
Validação atualizada nas Páginas da Web v2, Parte 3 Erros de validação de formatação.

Registrando scripts usando o Gerenciador de Ativos

O gerenciador de ativos é um novo recurso que você pode usar no código do servidor para registrar e renderizar scripts de cliente. Esse recurso é útil quando você está trabalhando com código de vários arquivos (como páginas de layout, páginas de conteúdo, auxiliares etc.) que são combinados em uma única página em tempo de execução. O gerenciador de ativos coordena os arquivos de origem para garantir que os arquivos de script sejam referenciados de forma correta e eficiente na página renderizada, independentemente de quais arquivos de código são chamados ou quantas vezes são chamados. O gerenciador de ativos <script> também renderiza marcas no lugar certo para que a página possa ser carregada rapidamente (sem baixar scripts durante a renderização) e para evitar erros que podem ocorrer se os scripts forem chamados antes da renderização ser concluída.

Por exemplo, suponha que você crie um auxiliar personalizado que chama um arquivo JavaScript e chame esse auxiliar em três locais diferentes no código da página de conteúdo. Se você não usar o gerenciador de ativos para registrar as chamadas de script no auxiliar, três marcas diferentes <script> que apontam para o mesmo arquivo de script serão exibidas em sua página renderizada. Além disso, dependendo de onde as <script> marcas são inseridas na página renderizada, os erros poderão ocorrer se o script tentar acessar determinados elementos de página antes que a página seja totalmente carregada. Se você usar o gerenciador de ativos para registrar o script, evite esses problemas.

Você pode registrar um script com o gerenciador de ativos fazendo isso:

No código que precisa referenciar o script, chame o Assets.AddScript método .
Em uma página _SiteLayout , chame o Assets.GetScripts método para renderizar as <script> marcas.

Observação

Coloque chamadas para Assets.GetScripts como o último item no <body> elemento da página _SiteLayout . Isso ajuda a página a carregar mais rapidamente e pode ajudar a evitar erros de script.

O exemplo a seguir mostra como o gerenciador de ativos funciona. O código contém os seguintes itens:

Um auxiliar personalizado chamado MakeNote. Esse auxiliar renderiza uma cadeia de caracteres dentro de uma caixa encapsulando um div elemento ao seu redor que é estilizado com uma borda e adicionando "Observação:" a ela. O auxiliar também chama um arquivo JavaScript que adiciona comportamento em tempo de execução à nota. Em vez de referenciar o script com uma <script> marca, o auxiliar registra o script chamando Assets.AddScript .
Um arquivo JavaScript. Esse é o arquivo que é chamado pelo auxiliar e aumenta temporariamente o tamanho da fonte dos itens de observação durante um mouseover evento.
Uma página de conteúdo, que faz referência à página _SiteLayout , renderiza algum conteúdo no corpo e chama o MakeNote auxiliar.
Uma página _SiteLayout . Esta página fornece um cabeçalho comum e uma estrutura de layout de página. Ele também inclui uma chamada para Assets.GetScripts, que é como o gerenciador de ativos renderiza chamadas de script em uma página.

Para executar o exemplo:

Crie um site vazio das Páginas da Web 2. Você pode usar o modelo Site Vazio do WebMatrix para isso.
Crie uma pasta chamada Scripts no site.
Na pasta Scripts , crie um arquivo chamado Test.js, copie o conteúdo doTest.js para ele do exemplo e salve o arquivo.
Crie uma pasta chamada App_Code no site.
Na pasta App_Code , crie um arquivo chamado Helpers.cshtml, copie o código de exemplo nele e salve-o em uma pasta chamada App_Code na pasta raiz.
Na pasta raiz do site, crie um arquivo chamado _SiteLayout.cshtml, copie o exemplo para ele e salve o arquivo.
Na raiz do site, crie um arquivo chamado ContentPage.cshtml, adicione o código de exemplo e salve-o.
Execute ContentPage em um navegador. A cadeia de caracteres que você passou para o MakeNote auxiliar é renderizada como uma nota em caixa.
Passe o ponteiro do mouse sobre a nota. O script aumenta temporariamente o tamanho da fonte da nota.
Exiba a origem da página renderizada. Devido ao local em que você colocou a chamada para Assets.GetScripts, a marca renderizada <script> que chama Test.js é o último item no corpo da página.

Test.js

function UpdateNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "150%";
}
function ReturnNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "inherit";
}

Helpers.cshtml

@helper MakeNote(string content, string noteid) {
Assets.AddScript("~/Scripts/Test.js");

<div id="@noteid" style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;"
 onmouseover="UpdateNoteStyle('@noteid')" onmouseout="ReturnNoteStyle('@noteid')">
  <p>
  <strong>Note</strong>&nbsp;&nbsp; @content
   </p>
</div>
}

_SiteLayout.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
    <div class="content-wrapper">
        <h1>Contoso Ltd.</h1>
    </div>
</header>
<div id="body">
    <section class="content-wrapper main-content clear-fix">
        @RenderBody()
    </section>
</div>
@Assets.GetScripts()
</body>
</html>

ContentPage.cshtml

@{
Layout = "~/_SiteLayout.cshtml";
}
<p>
Nullam scelerisque facilisis placerat. Fusce a augue
erat, malesuada euismod dui.
</p>
@Helpers.MakeNote("Latin is fun to translate.", "note1")

A captura de tela a seguir mostra ContentPage.cshtml em um navegador quando você segura o ponteiro do mouse sobre a nota:

Habilitando logons do Facebook e de outros sites usando OAuth e OpenID

As Páginas da Web 2 fornecem opções aprimoradas para associação e autenticação. O aprimoramento main é que há novos provedores OAuth e OpenID. Usando esses provedores, você pode permitir que os usuários façam logon em seu site usando suas credenciais existentes do Facebook, Twitter, Windows Live, Google e Yahoo. Por exemplo, para fazer logon usando uma conta do Facebook, os usuários podem simplesmente escolher um ícone do Facebook, que os redireciona para a página de logon do Facebook em que inserem suas informações de usuário. Em seguida, eles podem associar o logon do Facebook à sua conta em seu site. Um aprimoramento relacionado aos recursos de associação de Páginas da Web é que os usuários podem associar vários logons (incluindo logons de sites de redes sociais) a uma única conta em seu site.

Esta imagem mostra a página Logon do modelo site inicial, em que um usuário pode escolher um ícone do Facebook, Twitter ou Windows Live para habilitar o logon com uma conta externa:

Você pode habilitar a associação OAuth e OpenID usando apenas algumas linhas de código. Os métodos e as propriedades que você usa para trabalhar com os provedores OAuth e OpenID estão na WebMatrix.Security.OAuthWebSecurity classe .

No entanto, em vez de usar o código para habilitar logons de outros sites, uma maneira recomendada de começar a usar os novos provedores é usar o novo modelo site inicial incluído no WebMatrix 2 Beta. O modelo site inicial inclui uma infraestrutura de associação completa, completa com uma página de logon, um banco de dados de associação e todo o código necessário para permitir que os usuários façam logon em seu site usando credenciais locais ou aquelas de outro site.

Como habilitar logons usando os provedores OAuth e OpenID

Esta seção fornece um exemplo de como permitir que os usuários façam logon de sites externos (Facebook, Twitter, Windows Live, Google ou Yahoo) para um site baseado no modelo site inicial . Depois de criar um site inicial, você faz isso (detalhes a seguir):

Para os sites que usam um provedor OAuth (Facebook, Twitter e Windows Live), crie um aplicativo no site externo. Isso fornece as chaves de aplicativo necessárias para invocar o recurso de logon desses sites. Para sites que usam um provedor OpenID (Google, Yahoo), você não precisa criar um aplicativo. Para todos esses sites, você deve ter uma conta para fazer logon e criar aplicativos de desenvolvedor.

Observação

Os aplicativos do Windows Live aceitam apenas uma URL dinâmica para um site funcional, portanto, você não pode usar uma URL de site local para testar logons.
Edite alguns arquivos em seu site para especificar o provedor de autenticação apropriado e enviar um logon para o site que você deseja usar.

Para habilitar logons do Google e do Yahoo:

Em seu site, edite a página _AppStart.cshtml e adicione as duas linhas de código a seguir no bloco de código Razor após a chamada ao WebSecurity.InitializeDatabaseConnection método . Esse código habilita os provedores OpenID do Google e do Yahoo.
```
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Google);
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Yahoo);
```

Na página ~/Account/Login.cshtml , remova os comentários do bloco de marcação a seguir <fieldset> próximo ao final da página. Para descompactar o código, remova os @* caracteres que precedem e sigam o <fieldset> bloco. O bloco de código resultante tem esta aparência:

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

Adicione um <input> elemento para o provedor Google ou Yahoo ao <fieldset> grupo na página ~/Account/Login.cshtml . O grupo atualizado <fieldset> com elementos para Google e Yahoo se parece com <input> o seguinte exemplo:

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
<input type="submit" name="provider" id="yahoo" value="Yahoo" title="Log in using your Yahoo account." />
<input type="submit" name="provider" id="google" value="Google" title="Log in using your Google account." />
</fieldset>

Na página ~/Account/AssociateServiceAccount.cshtml , adicione <input> elementos para Google ou Yahoo ao <fieldset> grupo próximo ao final do arquivo. Você pode copiar os mesmos <input> elementos que acabou de adicionar à <fieldset> seção na página ~/Account/Login.cshtml .

A página ~/Account/AssociateServiceAccount.cshtml no modelo site inicial poderá ser usada se você quiser criar uma página na qual os usuários possam associar vários logons de outros sites a uma única conta em seu site.

Agora você pode testar logons do Google e do Yahoo.

Execute a página default.cshtml do seu site e escolha o botão Fazer logon .
Na página Logon , na seção Usar outro serviço para fazer logon , escolha o botão Enviar do Google ou do Yahoo . Este exemplo usa o logon do Google.

A página da Web redireciona a solicitação para a página de logon do Google.
Insira credenciais para uma conta existente do Google.
Se o Google perguntar se você deseja permitir que o Localhost use informações da conta, clique em Permitir.

O código usa o token do Google para autenticar o usuário e retorna para esta página em seu site. Esta página permite que os usuários associem o logon do Google a uma conta existente em seu site ou possam registrar uma nova conta em seu site para associar o logon externo.
Escolha o botão Associar . O navegador retorna à home page do aplicativo.

Para habilitar logons do Facebook:

Acesse o site de desenvolvedores do Facebook (faça logon se você ainda não estiver conectado).
Escolha o botão Criar Novo Aplicativo e siga os prompts para nomear e criar o novo aplicativo.
Na seção Selecionar como seu aplicativo se integrará ao Facebook, escolha a seção Site .
Preencha o campo URL do Site com a URL do seu site (por exemplo, http://www.example.com). O campo Domínio é opcional; você pode usar isso para fornecer autenticação para um domínio inteiro (como example.com).

Observação

Se você estiver executando um site em seu computador local com uma URL como http://localhost:12345 (em que o número é um número de porta local), você pode adicionar esse valor ao campo URL do Site para testar seu site. No entanto, sempre que o número da porta do site local for alterado, você precisará atualizar o campo URL do Site do aplicativo.
Escolha o botão Salvar Alterações .
Escolha a guia Aplicativos novamente e exiba a página inicial do aplicativo.
Copie a ID do aplicativo e os valores do Segredo do Aplicativo para seu aplicativo e cole-os em um arquivo de texto temporário. Você passará esses valores para o provedor do Facebook no código do site.
Saia do site do desenvolvedor do Facebook.

Agora você faz alterações em duas páginas em seu site para que os usuários possam fazer logon no site usando suas contas do Facebook.

Em seu site, edite a página _AppStart.cshtml e remova o comentário do código para o provedor OAuth do Facebook. O bloco de código não compactado se parece com o seguinte:
```
OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Facebook,
consumerKey: "",   // for Facebook, consumerKey is called AppID in the SDK
consumerSecret: "");
```
Copie o valor da ID do aplicativo do Facebook como o valor do consumerKey parâmetro (dentro das aspas).
Copie o valor do Segredo do Aplicativo do aplicativo facebook como o valor do consumerSecret parâmetro.
Salve e feche o arquivo.

Edite a página ~/Account/Login.cshtml e remova os comentários do <fieldset> bloco próximo ao final da página. Para descompactar o código, remova os @* caracteres que precedem e sigam o <fieldset> bloco. O bloco de código com comentários removidos é semelhante ao seguinte:

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

Salve e feche o arquivo.

Agora você pode testar o logon do Facebook.

Execute a página default.cshtml do site e escolha o botão Logon .
Na página Logon , na seção Usar outro serviço para fazer logon , escolha o ícone do Facebook .

A página da Web redireciona a solicitação para a página de logon do Facebook.
Faça logon em uma conta do Facebook.

O código usa o token do Facebook para autenticar você e retorna a uma página em que você pode associar seu logon do Facebook ao logon do seu site. Seu nome de usuário ou endereço de email é preenchido no campo Email no formulário.
Escolha o botão Associar .

O navegador retorna à home page e você está conectado.

Para habilitar logons do Twitter:

Navegue até o site de desenvolvedores do Twitter.
Escolha o link Criar um Aplicativo e faça logon no site.
No formulário Criar um Aplicativo , preencha os campos Nome e Descrição .
No campo WebSite, insira a URL do seu site (por exemplo, http://www.example.com).

Observação

Se você estiver testando seu site localmente (usando uma URL como http://localhost:12345), o Twitter poderá não aceitar a URL. No entanto, talvez você possa usar o endereço IP de loopback local (por exemplo http://127.0.0.1:12345). Isso simplifica o processo de testar seu aplicativo localmente. No entanto, sempre que o número da porta do site local for alterado, você precisará atualizar o campo WebSite do aplicativo.
No campo URL de Retorno de Chamada , insira uma URL para a página em seu site para a qual você deseja que os usuários retornem depois de fazer logon no Twitter. Por exemplo, para enviar usuários para a home page do Site Inicial (que reconhecerá seus status conectados), insira a mesma URL que você inseriu no campo WebSite.
Aceite os termos e escolha o botão Criar seu aplicativo do Twitter .
Na página de aterrissagem Meus Aplicativos , escolha o aplicativo que você criou.
Na guia Detalhes , role até a parte inferior e escolha o botão Criar Meu Token de Acesso .
Na guia Detalhes , copie os valores Chave do Consumidor e Segredo do Consumidor para seu aplicativo e cole-os em um arquivo de texto temporário. Você passará esses valores para o provedor do Twitter no código do site.
Saia do site do Twitter.

Agora você faz alterações em duas páginas em seu site para que os usuários possam fazer logon no site usando suas contas do Twitter.

Em seu site, edite a página _AppStart.cshtml e remova o comentário do código para o provedor OAuth do Twitter. O bloco de código não compactado tem esta aparência:
```
OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Twitter,
consumerKey: "",
consumerSecret: "");
```
Copie o valor da Chave do Consumidor do aplicativo Twitter como o valor do consumerKey parâmetro (dentro das aspas).
Copie o valor segredo do consumidor do aplicativo Twitter como o valor do consumerSecret parâmetro .
Salve e feche o arquivo.

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

Salve e feche o arquivo.

Agora você pode testar o logon do Twitter.

Execute a página default.cshtml do seu site e escolha o botão Logon .
Na página Logon , na seção Usar outro serviço para fazer logon , escolha o ícone do Twitter .

A página da Web redireciona a solicitação para uma página de logon do Twitter para o aplicativo que você criou.
Faça logon em uma conta do Twitter.
O código usa o token do Twitter para autenticar o usuário e, em seguida, retorna você para uma página em que você pode associar seu logon à sua conta do site. Seu nome ou endereço de email é preenchido no campo Email no formulário.
Escolha o botão Associar .

O navegador retorna à home page e você está conectado.

Adicionando mapas usando o Auxiliar de Mapas

As Páginas da Web 2 incluem adições à Biblioteca de Auxiliares da Web ASP.NET, que é um pacote de suplementos para um site de Páginas da Web. Um deles é um componente de mapeamento fornecido pela Microsoft.Web.Helpers.Maps classe . Você pode usar a Maps classe para gerar mapas com base em um endereço ou em um conjunto de coordenadas de longitude e latitude. A Maps classe permite que você chame diretamente em mecanismos de mapa populares, incluindo Bing, Google, MapQuest e Yahoo.

Para usar a nova Maps classe em seu site, primeiro você deve instalar a versão 2 da Biblioteca de Auxiliares da Web. Para fazer isso, vá para as instruções para instalar a versão lançada no momento da Biblioteca de Auxiliares web do ASP.NET e instalar a versão 2.

As etapas para adicionar mapeamento a uma página são as mesmas, independentemente de quais dos mecanismos de mapa você chamar. Basta adicionar uma referência de arquivo JavaScript à página de mapeamento e, em seguida, adicionar uma chamada que renderize as <script> marcas em sua página. Em seguida, na página de mapeamento, chame o mecanismo de mapa que você deseja usar.

O exemplo a seguir mostra como criar uma página que renderiza um mapa com base em um endereço e outra página que renderiza um mapa com base em coordenadas de longitude e latitude. O exemplo de mapeamento de endereço usa o Google Mapas e o exemplo de mapeamento de coordenadas usa Bing Mapas. Observe os seguintes elementos no código:

A chamada para Assets.AddScript na parte superior das duas páginas de mapeamento. Esse método adiciona uma referência ao arquivo jquery-1.6.2.min.js incluído com o modelo site inicial e que é exigido pela Maps classe .
A chamada para o Assets.GetScripts método no arquivo de layout. Esse método renderiza a <script> marca nas duas páginas de mapeamento.
A chamada para os @Maps.GetGoogleHtml@Maps.GetBingHtml métodos e nas páginas de mapeamento. Para mapear um endereço, você deve passar uma cadeia de caracteres de endereço. Para mapear coordenadas, você deve passar coordenadas de longitude e latitude. Para o mecanismo de Bing Mapas, você também deve passar uma chave (que você obtém gratuitamente inscrevendo-se no site Bing Mapas Developers). Os métodos para os outros mecanismos de mapa funcionam de maneira semelhante (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).

Para criar páginas de mapeamento:

Crie um site com base no modelo site inicial .
Crie um arquivo chamado MapAddress.cshtml na raiz do site. Esta página gerará um mapa com base em um endereço que você passa para ele.

Copie o código a seguir para o arquivo, substituindo o conteúdo existente.

@{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map an Address:</h3>
<form method="post" action="" id="coordinates" style="width: 320px">
<fieldset>
  <div>
    <label for="address">Address:</label>
    <input style="width: 300px" type="text"  name="address"  value="@Request["address"]"/>
    <input type="submit" value="Map It!" />
   </div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theAddress = Request["address"];
@Maps.GetGoogleHtml(theAddress,
    width: "800",
    height: "800")
}
</div>

Crie um arquivo chamado _MapLayout.cshtml na raiz do site. Esta página será a página de layout das duas páginas de mapeamento.

Copie o código a seguir para o arquivo, substituindo o conteúdo existente.

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />

<title></title>
<style type="text/css">
    #navigation {
        position: absolute;
        top: 1em;
        left: 3em;
        width: 18em;
    }
    #content {
        margin-top: 10em;
        margin-left: 3em;
    }
</style>
</head>
<body>
  @RenderBody()

  @*
Call the Assets helper to render tags for the Maps helper. For
releases after Web Pages 2 Beta, call Assets.GetScripts().
  *@
  @Assets.GetScripts()
</body>
</html>

Crie um arquivo chamado MapCoordinates.cshtml na raiz do site. Esta página gerará um mapa com base em um conjunto de coordenadas que você passa para ele.

Copie o código a seguir para o arquivo, substituindo o conteúdo existente.

@{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map a set of coordinates:</h3>
<form method="post" action="" id="coordinates">
<fieldset>
<div>
    <label for="latitude">Latitude:&nbsp;&nbsp;&nbsp;</label>
    <input type="text"  name="latitude" value="@Request["latitude"]"/>
</div>
<div>
    <label for="longitude">Longitude:</label>
    <input type="text" name="longitude" value="@Request["longitude"]"/>
</div>
<div>
    <input type="submit" value="Map It!" />
</div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theLatitude = Request["latitude"];
var theLongitude = Request["longitude"];
@Maps.GetBingHtml("Ag6C5Ci9VUGz9AIhQyJ7YNwGraanqwy5-V3LK1qGDpdEVPV-MUPBryG18ELoC6g6",
    "",
    theLatitude,
    theLongitude,
    width: "800",
    height: "800")
}
</div>

Para testar suas páginas de mapeamento:

Execute o arquivo MapAddress.cshtml da página.
Insira uma cadeia de caracteres de endereço completa, incluindo um endereço de rua, estado ou província e código postal e escolha o botão Mapear. A página renderiza um mapa do Google Mapas:
Encontre um conjunto de coordenadas de latitude e longitude para um local específico.
Execute a página MapCoordinates.cshtml. Insira as coordenadas e escolha o botão Mapear. A página renderiza um mapa de Bing Mapas:

Executando aplicativos de Páginas da Web lado a lado

As Páginas da Web 2 adicionam a capacidade de executar aplicativos lado a lado. Isso permite que você continue executando seus aplicativos de Páginas da Web 1, crie novos aplicativos de Páginas da Web 2 e execute todos eles no mesmo computador.

Aqui estão algumas coisas a serem lembradas quando você instala as Páginas da Web 2 Beta com WebMatrix:

Por padrão, os aplicativos de Páginas da Web existentes serão executados como aplicativos da versão 2 no computador. (Os assemblies da versão 2 são instalados no GAC e serão usados automaticamente.)
Se você quiser executar um site usando Páginas da Web versão 1 (em vez do padrão, como no ponto anterior), poderá configurar o site para fazer isso. Se seu site ainda não tiver um arquivo web.config na raiz do site, crie um novo e copie o XML a seguir nele, substituindo o conteúdo existente. Se o site já contiver um arquivo web.config , adicione um <appSettings> elemento como o seguinte à <configuration> seção .
```
<?xml version="1.0"?>
<configuration>
<appSettings>
<add key="webPages:Version" value="1.0"/>
</appSettings>
</configuration>
```
'- Se você não especificar uma versão no arquivo web.config , um site será implantado como um site de versão 2. (Os assemblies da versão 2 são copiados para a pasta bin no site implantado.)
Os novos aplicativos criados usando os modelos de site na Matriz da Web versão 2 Beta incluem os assemblies das Páginas da Web versão 2 na pasta bin do site.

Em geral, você sempre pode controlar qual versão das Páginas da Web usar com seu site usando o NuGet para instalar os assemblies apropriados na pasta bin do site. Para encontrar pacotes, visite NuGet.org.

Renderizando páginas para dispositivos móveis

As Páginas da Web 2 permitem criar exibições personalizadas para renderizar conteúdo em dispositivos móveis ou outros dispositivos.

O System.Web.WebPages namespace contém as seguintes classes que permitem que você trabalhe com modos de exibição: DefaultDisplayMode, DisplayInfoe DisplayModes. Você pode usar essas classes diretamente e escrever código que renderiza a saída certa para dispositivos específicos.

Como alternativa, você pode criar páginas específicas do dispositivo usando um padrão de nomenclatura de arquivo como este: FileName.Mobile.cshtml. Por exemplo, você pode criar duas versões de uma página, uma chamada MyFile.cshtml e outra chamada MyFile.Mobile.cshtml. Em tempo de execução, quando um dispositivo móvel solicita MyFile.cshtml, as Páginas da Web renderizam o conteúdo de MyFile.Mobile.cshtml. Caso contrário, MyFile.cshtml será renderizado.

O exemplo a seguir mostra como habilitar a renderização móvel adicionando uma página de conteúdo para dispositivos móveis. Page1.cshtml contém conteúdo mais uma barra lateral de navegação. Page1.Mobile.cshtml contém o mesmo conteúdo, mas omite a barra lateral.

Para compilar e executar o exemplo de código:

Em um site de Páginas da Web, crie um arquivo chamado Page1.cshtml e copie o conteúdo Page1.cshtml para ele do exemplo.
Crie um arquivo chamado Page1.Mobile.cshtml e copie o conteúdo Page1.Mobile.cshtml para ele do exemplo. Observe que a versão móvel da página omite a seção de navegação para melhor renderização em uma tela menor.
Execute um navegador da área de trabalho e navegue até Page1.cshtml.
Execute um navegador móvel (ou um emulador de dispositivo móvel) e navegue até Page1.cshtml. Observe que desta vez as Páginas da Web renderizam a versão móvel da página.

Observação

Para testar páginas móveis, você pode usar um simulador de dispositivo móvel executado em um computador desktop. Essa ferramenta permite testar páginas da Web como elas seriam exibidas em dispositivos móveis (ou seja, normalmente com uma área de exibição muito menor). Um exemplo de simulador é o complemento Switcher do Agente de Usuário para Mozilla Firefox, que permite emular vários navegadores móveis de uma versão da área de trabalho do Firefox.

Page1.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    #navigation {
        position: absolute;
        top: 0;
        left: 0;
        width: 10em;
    }
    #content {
    margin-left: 13em;
        margin-right: 10em;
    }
</style>
</head>
<body>
<div id="navigation">
    <h3>Related Sites</h3>
    <ul>
        <li><a href="http://www.adventure-works.com/">Adventure Works</a></li>
        <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li>
        <li><a href="http://www.treyresearch.net/">Trey Research</a></li>
    </ul>
</div>
<div id="content">
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

Page1.Mobile.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    #content {
    margin-left: 2em;
        margin-right: 5em;
    }
</style>
</head>
<body>
<div id="content">
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

Page1.cshtml renderizado em um navegador da área de trabalho:

Page1.Mobile.cshtml exibido em uma exibição do simulador do Apple iPhone no navegador Firefox. Embora a solicitação seja para Page1.cshtml, o aplicativo renderiza Page1.Mobile.cshtml.

Recursos adicionais

recursos do Páginas da Web do ASP.NET 1

Observação

A maioria dos recursos de programação e API das Páginas da Web 1 ainda se aplicam às Páginas da Web 2.

Introdução à programação de Páginas da Web do ASP.NET

Recursos do WebMatrix

Microsoft WebMatrix Site
Iniciando o desenvolvimento para a Web com o Microsoft WebMatrix(inclui um aplicativo de páginas da Web de exemplo completo)

Compartilhar via

Os principais recursos do Páginas da Web do ASP.NET 2

Instalando o WebMatrix

Recursos novos e aprimorados

Alterações para a versão RC (junho de 2012)

Alterações para a versão Beta (fevereiro de 2012)

Usando os modelos de site novos e atualizados

Validando entradas de usuário

Registrando scripts usando o Gerenciador de Ativos

Habilitando logons do Facebook e de outros sites usando OAuth e OpenID

Como habilitar logons usando os provedores OAuth e OpenID

Adicionando mapas usando o Auxiliar de Mapas

Executando aplicativos de Páginas da Web lado a lado

Renderizando páginas para dispositivos móveis

Recursos adicionais

recursos do Páginas da Web do ASP.NET 1

Recursos do WebMatrix

Comentários

Comentários

Recursos adicionais