Compartir a través de

Principales características de ASP.NET Web Pages 2

  • Artículo

por Microsoft

En este artículo se proporciona información general sobre las principales características nuevas de ASP.NET Web Pages 2 RC, un marco de programación web ligero que se incluye con Microsoft WebMatrix 2 RC.

Qué se incluye:

Nota:

En este tema se supone que usa WebMatrix para trabajar con el código de ASP.NET Web Pages 2. Sin embargo, al igual que con Web Pages 1, también puede crear sitios web de Web Pages 2 mediante Visual Studio, lo que proporciona funcionalidades y depuración mejoradas de IntelliSense. Para trabajar con Web Pages en Visual Studio, primero debe instalar Visual Studio 2010 SP1, Visual Web Developer Express 2010 SP1 o Visual Studio 11 Beta. A continuación, instale el ASP.NET MVC 4 Beta, que incluye plantillas y herramientas para crear aplicaciones ASP.NET MVC 4 y Web Pages 2 en Visual Studio.

Última actualización: 18 de junio de 2012

Instalación de WebMatrix

Para instalar Web Pages, puede usar el Instalador de plataforma web de Microsoft, que es una aplicación gratuita que facilita la instalación y configuración de tecnologías relacionadas con la web. Instalará WebMatrix 2 Beta, que incluye Web Pages 2 Beta.

  1. Vaya a la página de instalación para obtener la versión más reciente del Instalador de plataforma web:

    https://www.microsoft.com/web/downloads/platform.aspx

    Nota:

    Si ya tiene WebMatrix 1 instalado, con esta instalación se actualizará a WebMatrix 2 Beta. Puede ejecutar sitios web creados con la versión 1 o 2 en el mismo equipo. Para obtener más información, consulte la sección Ejecución de aplicaciones de páginas web en paralelo.

  2. Seleccione Instalar ahora.

    Si usa Internet Explorer, vaya al paso siguiente. Si usa un navegador diferente como Mozilla Firefox o Google Chrome, se le pedirá que guarde el archivo Webmatrix.exe en su equipo. Guarde el archivo y haga clic en él para iniciar el instalador.

  3. Ejecute el instalador y seleccione el botón Instalar. De esta forma, se instalarán WebMatrix y Web Pages.

Características nuevas y mejoradas

Cambios para la versión RC (junio de 2012)

La versión de RC de junio de 2012 tiene algunos cambios de la actualización de la versión Beta que se publicó en marzo de 2012. Estos cambios son:

  • Se agregó un método Validation.AddFormError al asistente Validation. Esto resulta útil si realiza la validación manualmente (por ejemplo, si valida un valor que se pasa en la cadena de consulta) y desea agregar un mensaje de error que el método Html.ValidationSummary pueda mostrar. Para obtener más información, consulte la sección Validación de datos que no proceden directamente de los usuarios en Validar la entrada de usuario en sitios de ASP.NET Web Pages (Razor).
  • La funcionalidad de unión y minificación se ha quitado de los ensamblados de núcleo ASP.NET Web Pages 2. Como consecuencia, el asistente Assets que aparece más adelante en este documento no está disponible. En su lugar, debe instalar el paquete NuGet de optimización de ASP.NET. Para obtener más información, consulte Agrupar y minificar recursos en un sitio de ASP.NET Web Pages (Razor).
  • Se han agregado ensamblados adicionales para admitir ASP.NET Web Pages 2. El único efecto notable de este cambio es que es posible que vea más ensamblados en la carpeta bin de un sitio después de crear un sitio o implementar un sitio en un proveedor de hospedaje.

Cambios para la versión Beta (febrero de 2012)

La versión Beta publicada en febrero de 2012 solo presenta algunos cambios respecto a la versión Beta que se publicó en diciembre de 2011. Estos cambios son:

  • Razor ahora admite atributos condicionales. En un elemento HTML, si establece un atributo en un valor que se resuelve en el código de servidor en false o null, ASP.NET no representa el atributo en absoluto. Por ejemplo, imagine que tiene el marcado siguiente para una casilla:

    <input type="checkbox"
name="check1"
value="check1"
checked="@checked1" />

    Si el valor de checked1 se resuelve en false o en null, el atributo checked no se representa. Éste es un cambio importante.

  • El método Validation.GetHtml se ha renombrado como Validation.For. Este es un cambio importante; Validation.GetHtml no funcionará en la versión Beta.

  • Ahora puede incluir el operador ~ en el marcado para hacer referencia a la raíz del sitio sin usar la función Href. (Es decir, el analizador de Razor ahora puede encontrar y resolver el operador ~ sin necesidad de una llamada de método explícita a Href). El método Href sigue funcionando, por lo que no se trata de un cambio importante.

    Por ejemplo, si anteriormente tenía un marcado como este:

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

    Ahora puede usar el marcado así:

    <a href="~/Default.cshtml">Home</a>

  • El asistente Scripts para la administración de recursos se ha reemplazado por el asistente Assets, que tiene métodos ligeramente diferentes, como los siguientes:

    • Para Scripts.Add, use Assets.AddScript

    • Para Scripts.GetScriptTags, use Assets.GetScripts

      Este es un cambio importante; la clase Scripts no está disponible en la versión Beta. Los ejemplos de código de este documento que usan la administración de recursos se han actualizado con este cambio.

Uso de las plantillas de sitio nuevas y actualizadas

La plantilla Sitio de inicio se ha actualizado para que se ejecute en Web Pages 2 de forma predeterminada. También incluye las nuevas capacidades siguientes:

  • Representación de páginas adaptada a dispositivos móviles. Mediante el uso de estilos CSS y el selector @media, el sitio de inicio proporciona una representación mejorada de páginas en pantallas más pequeñas, incluidas las pantallas de dispositivos móviles.
  • Se han mejorado las opciones de pertenencia y autenticación. Puede permitir que los usuarios se registren en su sitio con sus cuentas de otros sitios de redes sociales, como Twitter, Facebook y Windows Live. Para obtener más información, consulte la sección Habilitación de inicios de sesión desde Facebook y otros sitios mediante OAuth y OpenID.
  • Elementos HTML5.

La nueva plantilla de Sitio personal le permite crear un sitio web que contenga un blog personal, una página de fotos y una página de Twitter. Puede personalizar un sitio basado en la plantilla de Sitio personal haciendo lo siguiente:

  • Cambie el aspecto del sitio editando el archivo de diseño (_SiteLayout.cshtml) y el archivo de estilos (Site.css).
  • Instale paquetes NuGet que agreguen funcionalidad al sitio. Para obtener información sobre cómo instalar paquetes, incluida la biblioteca de asistentes web de ASP.NET, consulte el tutorial sobre la instalación de asistentes.

Para acceder a la plantilla de Sitio personal, seleccione Plantillas en la pantalla Inicio rápido de WebMatrix.

topseven-personalsite-1

En el cuadro de diálogo Plantillas, seleccione la plantilla de Sitio personal.

topseven-personalsite-2

La página de aterrizaje de la plantilla de Sitio personal le permite seguir los vínculos para configurar el blog, la página de Twitter y la página de fotos.

topseven-personalsite-3

Validar los datos introducidos por el usuario

En Web Pages 1, para validar la entrada de usuario en los formularios enviados, se usa la clase System.Web.WebPages.Html.ModelState. (Esto se ilustra en varios de los ejemplos de código del tutorial de Web Pages 1 titulado Trabajar con datos). Puede seguir usando este enfoque en Web Pages 2. Sin embargo, Web Pages 2 también ofrece herramientas mejoradas para validar la entrada de usuario:

  • Nuevas clases de validación, incluidas System.Web.WebPages.ValidationHelper y System.Web.WebPages.Validator, que permiten realizar tareas de validación eficaces con algunas líneas de código.
  • Opcionalmente, validación del lado cliente, que proporciona comentarios inmediatos al usuario en lugar de requerir un recorrido de ida y vuelta al servidor para comprobar si hay errores de validación. (Por motivos de seguridad, la validación se realiza en el servidor incluso si las comprobaciones se han realizado de antemano en el cliente).

Para usar las nuevas características de validación, haga lo siguiente:

En el código de la página, registre un elemento que se va a validar mediante métodos del asistente Validation: Validation.RequireField, Validation.RequireFields (para registrar varios elementos que se van a requerir) o Validation.Add. El método Add permite especificar otros tipos de comprobaciones de validación, como la comprobación de tipos de datos, la comparación de entradas en campos diferentes, las comprobaciones de longitud de cadena y los patrones (mediante expresiones regulares). Estos son algunos ejemplos:

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 mostrar un error específico del campo, llame a Html.ValidationMessage en el marcado para cada elemento que se esté validando:

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

Para mostrar un resumen (lista <ul>) de todos los errores de la página, Html.ValidationSummary en el marcado:

@Html.ValidationSummary()

Estos pasos son suficientes para implementar la validación del lado servidor. Si desea agregar la validación del lado cliente, haga además lo siguiente.

Agregue las siguientes referencias de archivo de script dentro de la sección <head> de una página web. Las dos primeras referencias de script apuntan a archivos remotos en un servidor de red de entrega de contenido (CDN). La tercera referencia apunta a un archivo de script local. Las aplicaciones de producción deben implementar una reserva cuando la red CDN no está disponible. Pruebe la reserva.

<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>

La manera más fácil de obtener una copia local de la biblioteca de jquery.validate.unobtrusive.min.js es crear un nuevo sitio de Web Pages basado en una de las plantillas de sitio (como sitio de inicio). El sitio creado por la plantilla incluye el archivo jquery.validate.unobtrusive.js en su carpeta Scripts, desde donde puede copiarlo a su sitio.

Si su sitio web usa una página de _SiteLayout para controlar el diseño de página, puede incluir estas referencias de script en esa página para que la validación esté disponible para todas las páginas de contenido. Si desea realizar la validación solo en páginas concretas, puede usar el administrador de recursos para registrar los scripts solo en esas páginas. Para ello, llame a Assets.AddScript(path) en la página que desea validar y haga referencia a cada uno de los archivos de script. A continuación, agregue una llamada a Assets.GetScripts en la página _SiteLayout para representar las etiquetas <script> registradas. Para obtener más información, consulte la sección Registro de scripts con el administrador de recursos.

En el marcado de un elemento individual, llame al método Validation.For. Este método emite atributos que jQuery puede enlazar para proporcionar validación del lado cliente. Por ejemplo:

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

En el ejemplo siguiente se muestra una página que valida la entrada del usuario en un formulario. Para ejecutar y probar este código de validación, haga lo siguiente:

  1. Cree un sitio web nuevo con una de las plantillas de sitio de WebMatrix 2 que incluya una carpeta Scripts, como la plantilla de Sitio de inicio.
  2. En el nuevo sitio, cree una nueva página .cshtml y reemplace el contenido de la página por el código siguiente.
  3. Ejecute la página en un explorador. Escriba valores válidos y no válidos para ver los efectos en la validación. Por ejemplo, deje un campo obligatorio en blanco o escriba una letra en el 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 es la página que aparece cuando un usuario envía una entrada válida:

topSeven-valid-1

Esta es la página que aparece cuando un usuario la envía con un campo obligatorio vacío:

topSeven-valid-2

Esta es la página que aparece cuando un usuario la envía con algo distinto de un entero en el campo Créditos:

topSeven-valid-3

Para más información, consulte las siguientes entradas de blog:

Registro de scripts mediante el administrador de recursos

El administrador de recursos es una nueva característica que puede usar en el código de servidor para registrar y representar scripts de cliente. Esta característica es útil cuando se trabaja con código de varios archivos (como páginas de diseño, páginas de contenido, asistentes, etc.) que se combinan en una sola página en tiempo de ejecución. El administrador de recursos coordina los archivos de origen para asegurarse de que se hace referencia a los archivos de script correctamente y de forma eficaz en la página representada, independientemente de los archivos de código desde los que se llamen o de cuántas veces se llamen. El administrador de recursos también representa etiquetas <script> en el lugar correcto para que la página pueda cargarse rápidamente (sin descargar scripts mientras se representa) y para evitar los errores que pueden producirse si se llama a los scripts antes de que finalice la representación.

Por ejemplo, supongamos que crea un asistente personalizado que llama a un archivo JavaScript, y que llama a este asistente en tres lugares diferentes del código de su página de contenido. Si no usa el administrador de recursos para registrar las llamadas de script en el asistente, aparecerán tres etiquetas <script> diferentes que apuntan al mismo archivo de script en la página representada. Además, dependiendo de dónde se inserten las etiquetas <script> en la página representada, pueden producirse errores si el script intenta acceder a determinados elementos de página antes de que la página se cargue por completo. Si usa el administrador de recursos para registrar el script, evite estos problemas.

Para registrar un script con el administrador de recursos, haga lo siguiente:

  • En el código que necesita hacer referencia al script, llame al método Assets.AddScript.

  • En una página de _SiteLayout, llame al método Assets.GetScripts para representar las etiquetas <script>.

    Nota:

    Coloque llamadas a Assets.GetScripts como último elemento del elemento <body> de la página _SiteLayout. Esto ayuda a que la página se cargue más rápido y puede ayudar a evitar errores de script.

En el ejemplo siguiente se muestra cómo funciona el administrador de recursos. El código contiene los elementos siguientes:

  • Un asistente personalizado denominado MakeNote. Este asistente representa una cadena dentro de un cuadro envolviéndola con un elemento div con borde y añadiéndole "Nota:". El asistente también llama a un archivo JavaScript que agrega el comportamiento en tiempo de ejecución a la nota. En lugar de hacer referencia al script con una etiqueta <script>, el asistente registra el script llamando a Assets.AddScript.
  • Un archivo JavaScript. Este es el archivo al que llama el asistente y aumenta temporalmente el tamaño de fuente de los elementos de nota durante un evento mouseover.
  • Una página de contenido, que hace referencia a la página _SiteLayout, representa algún contenido en el cuerpo y, a continuación, llama al asistente MakeNote.
  • Una página de _SiteLayout. Esta página proporciona un encabezado común y una estructura de diseño de página. También incluye una llamada a Assets.GetScripts, que es como el administrador de recursos representa las llamadas de script en una página.

Para ejecutar el ejemplo:

  1. Cree un sitio web vacío con Web Pages 2. Puede usar la plantilla Sitio vacío de WebMatrix para esto.
  2. Cree una carpeta denominada Scripts en el sitio.
  3. En la carpeta Scripts, cree un archivo denominado Test.js, copie en él el contenido Test.js del ejemplo y guarde el archivo.
  4. Cree una carpeta denominada App_Code en el sitio.
  5. En la carpeta App_Code, cree un archivo denominado Helpers.cshtml, copie en él el código de ejemplo y guárdelo en una carpeta denominada App_Code en la carpeta raíz.
  6. En la carpeta raíz del sitio, cree un archivo denominado _SiteLayout.cshtml, copie en él el ejemplo y guarde el archivo.
  7. En la raíz del sitio, cree un archivo denominado ContentPage.cshtml, agregue el código de ejemplo y guárdelo.
  8. Ejecute ContentPage en un explorador. La cadena que ha pasado al asistente MakeNote se representa como una nota con la conversión boxing aplicada.
  9. Mueva el puntero del mouse sobre la nota. El script aumenta temporalmente el tamaño de fuente de la nota.
  10. Vea el origen de la página representada. Debido a la ubicación de la llamada a Assets.GetScripts, la etiqueta <script> representada que llama a Test.js es el último elemento del cuerpo de la 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")

En la captura de pantalla siguiente se muestra ContentPage.cshtml en un explorador cuando se mantiene el puntero del mouse sobre la nota:

topSeven-resmgr-1

Habilitación de inicios de sesión desde Facebook y otros sitios mediante OAuth y OpenID

Web Pages 2 proporciona opciones mejoradas para la pertenencia y la autenticación. La mejora principal es que hay nuevos proveedores de OAuth y OpenID. Con estos proveedores, puede permitir que los usuarios inicien sesión en su sitio mediante credenciales existentes de Facebook, Twitter, Windows Live, Google y Yahoo. Por ejemplo, para iniciar sesión con una cuenta de Facebook, los usuarios simplemente pueden elegir el icono de Facebook, que los redirigirá a la página de inicio de sesión de Facebook, donde tendrán que introducir su información de usuario. Después, pueden asociar el inicio de sesión de Facebook a su cuenta del sitio. Una mejora relacionada con las características de pertenencia a Web Pages es que los usuarios pueden asociar varios inicios de sesión (incluidos los inicios de sesión de sitios de redes sociales) a una sola cuenta en su sitio web.

En esta imagen se muestra la página Inicio de sesión de la plantilla Sitio de inicio, donde un usuario puede elegir el icono de Facebook, Twitter o Windows Live para habilitar el inicio de sesión con una cuenta externa:

topSeven-oauth-1

Puede habilitar la pertenencia a OAuth y OpenID con solo unas pocas líneas de código. Los métodos y propiedades que se usan para trabajar con los proveedores OAuth y OpenID están en la clase WebMatrix.Security.OAuthWebSecurity.

Sin embargo, en lugar de usar código para habilitar los inicios de sesión de otros sitios, una manera recomendada de empezar a trabajar con los nuevos proveedores es usar la nueva plantilla de sitio de inicio que se incluye con WebMatrix 2 Beta. La plantilla de Sitio de inicio incluye una infraestructura de pertenencia completa, con una página de inicio de sesión, una base de datos de pertenencia y todo el código necesario para que los usuarios puedan iniciar sesión en el sitio mediante credenciales locales o con las de otro sitio.

Cómo habilitar inicios de sesión mediante los proveedores de OAuth y OpenID

En esta sección se proporciona un ejemplo de cómo permitir que los usuarios inicien sesión desde sitios externos (Facebook, Twitter, Windows Live, Google o Yahoo) en un sitio basado en la plantilla de Sitio de inicio. Después de crear un sitio de inicio, haga esto (más detalles a continuación):

  • Para los sitios que usan un proveedor de OAuth (Facebook, Twitter y Windows Live), cree una aplicación en el sitio externo. Esto le proporciona las claves de aplicación que necesitará para invocar la característica de inicio de sesión para esos sitios. En el caso de los sitios que usan un proveedor de OpenID (Google, Yahoo), no es necesario crear una aplicación. Para todos estos sitios, debe tener una cuenta para iniciar sesión y crear aplicaciones para desarrolladores.

    Nota:

    Las aplicaciones de Windows Live solo aceptan una dirección URL dinámica para un sitio web de trabajo, por lo que no puede usar una dirección URL de sitio web local para probar los inicios de sesión.

  • Edite algunos archivos en su sitio web para especificar el proveedor de autenticación adecuado y enviar un inicio de sesión al sitio que desea usar.

Para habilitar los inicios de sesión de Google y Yahoo:

  1. En el sitio web, edite la página _AppStart.cshtml y agregue las dos líneas de código siguientes en el bloque de código de Razor después de la llamada al método WebSecurity.InitializeDatabaseConnection. Este código habilita los proveedores de OpenID de Google y Yahoo.

    OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Google);
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Yahoo);

  2. En la página ~/Account/Login.cshtml, quite los comentarios del siguiente bloque <fieldset> de marcado cerca del final de la página. Para quitar la marca de comentario del código, quite los caracteres @* que precedan y sigan al bloque <fieldset>. El bloque de código resultante tiene el siguiente aspecto:

    <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>

  3. Agregue un elemento <input> para el proveedor de Google o Yahoo al grupo <fieldset> en la página ~/Account/Login.cshtml. El grupo <fieldset> actualizado con elementos <input> para Google y Yahoo tiene el siguiente aspecto:

    <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>

  4. En la página ~/Account/AssociateServiceAccount.cshtml, agregue los elementos <input> para Google o Yahoo al grupo <fieldset> cerca del final del archivo. Puede copiar los mismos elementos <input> que acaba de agregar a la sección <fieldset> en la página ~/Account/Login.cshtml.

    Se puede usar la página ~/Account/AssociateServiceAccount.cshtml de la plantilla Sitio de inicio si desea crear una página en la que los usuarios puedan asociar varios inicios de sesión desde otros sitios con una sola cuenta en su sitio web.

Ahora puede probar los inicios de sesión de Google y Yahoo.

  1. Ejecute la página default.cshtml de su sitio y seleccione el botón Iniciar sesión.

  2. En la página Inicio de sesión, en la sección Usar otro servicio para iniciar sesión, seleccione el botón de envío de Google o Yahoo. En este ejemplo se usa el inicio de sesión de Google.

    La página web redirige la solicitud a la página de inicio de sesión de Google.

    Screenshot shows the web page redirecting to the Google login page.

  3. Escriba las credenciales de una cuenta de Google existente.

  4. Si Google le pregunta si desea permitir que Localhost use información de la cuenta, haga clic en Permitir.

    El código usa el token de Google para autenticar al usuario y, a continuación, vuelve a esta página en su sitio web. Esta página permite a los usuarios asociar sus datos de inicio de sesión de Google a una cuenta existente en su sitio web, o bien, pueden registrar una cuenta nueva en su sitio a la que asociar los datos de inicio de sesión externos.

    Screenshot shows the register page.

  5. Seleccione el botón Asociar. El explorador vuelve a la página principal de la aplicación.

    Screenshot shows the application's home page.

    Screenshot shows another version of the application's home page.

Para habilitar los inicios de sesión de Facebook:

  1. Vaya al sitio de desarrolladores de Facebook (inicie sesión si todavía no lo ha hecho).

  2. Seleccione el botón Crear nueva aplicación y, a continuación, siga las indicaciones para asignar un nombre y crear la nueva aplicación.

  3. En la sección Select how your app will integrate with Facebook (Seleccione cómo se integrará la aplicación con Facebook), seleccione Sitio web.

  4. Rellene el campo URL del sitio con la dirección URL del sitio (por ejemplo, http://www.example.com). El campo Dominio es opcional; puede usarlo para proporcionar autenticación para un dominio completo (como example.com).

    Nota:

    Si ejecuta un sitio en el equipo local con una dirección URL como http://localhost:12345 (donde el número es un número de puerto local), puede agregar este valor al campo URL del sitio para probar el sitio. Sin embargo, cada vez que cambie el número de puerto del sitio local, deberá actualizar el campo URL del sitio de la aplicación.

  5. Seleccione el botón Guardar cambios.

  6. Vuelva a elegir la pestaña Aplicaciones y, a continuación, vea la página de inicio de la aplicación.

  7. Copie los valores identificador de aplicación y Secreto de la aplicación de la aplicación y péguelos en un archivo de texto temporal. Pasará estos valores al proveedor de Facebook en su código del sitio web.

  8. Salga del sitio para desarrolladores de Facebook.

Ahora debe realizar cambios en dos páginas de su sitio web para que los usuarios puedan iniciar sesión en el sitio con sus cuentas de Facebook.

  1. En su sitio web, edite la página _AppStart.cshtml y quite la marca de comentario del código del proveedor OAuth de Facebook. El bloque de código sin marca de comentario tiene el siguiente aspecto:

    OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Facebook,
consumerKey: "",   // for Facebook, consumerKey is called AppID in the SDK
consumerSecret: "");

  2. Copie el valor Identificador de aplicación de la aplicación de Facebook como el valor del parámetro consumerKey (entre comillas).

  3. Copie el valor Secreto de la aplicación de la aplicación Facebook como valor del parámetro consumerSecret.

  4. Guarde y cierre el archivo.

  5. Edite la página ~/Account/Login.cshtml y quite los comentarios del bloque <fieldset> cerca del final de la página. Para quitar la marca de comentario del código, quite los caracteres @* que precedan y sigan al bloque <fieldset>. El bloque de código con comentarios eliminados tiene el siguiente aspecto:

    <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>

  6. Guarde y cierre el archivo.

Ahora puede probar el inicio de sesión de Facebook.

  1. Ejecute la página default.cshtml del sitio y seleccione el botón Inicio de sesión.

  2. En la página Inicio de sesión, en la sección Utilice otro servicio para iniciar sesión, seleccione el icono de Facebook.

    La página web redirige la solicitud a la página de inicio de sesión de Google.

    Screenshot shows a page for registration.

  3. Inicie sesión en una cuenta de Facebook.

    El código usa el token de Facebook para autenticarse y, a continuación, vuelve a una página donde puede asociar su inicio de sesión de Facebook con el inicio de sesión de su sitio. El nombre de usuario o la dirección de correo electrónico se rellenan en el campo Correo electrónico del formulario.

    Screenshot shows the user name or email field on the registration page.

  4. Seleccione el botón Asociar.

    El explorador vuelve a la página principal y ya se ha iniciado sesión.

    Screenshot shows the browser returning to the home page.

Para habilitar inicios de sesión con Twitter:

  1. Vaya al sitio de desarrolladores de Twitter.

  2. Seleccione el vínculo Crear una aplicación y, a continuación, inicie sesión en el sitio.

  3. En el formulario Crear una aplicación, rellene los campos Nombre y Descripción.

  4. En el campo Sitio web, escriba la dirección URL del sitio (por ejemplo, http://www.example.com).

    Nota:

    Si está probando el sitio localmente (con una dirección URL como http://localhost:12345), es posible que Twitter no acepte la dirección URL. Sin embargo, es posible que pueda usar la dirección IP de bucle invertido local (por ejemplo, http://127.0.0.1:12345). Esto simplifica el proceso de probar la aplicación localmente. Sin embargo, cada vez que cambie el número de puerto del sitio local, deberá actualizar el campo Sitio web de su aplicación.

  5. En el campo Dirección URL de devolución de llamada, escriba una dirección URL para la página del sitio web a la que desea que los usuarios vuelvan después de iniciar sesión en Twitter. Por ejemplo, para enviar usuarios a la página principal del sitio de inicio (que reconocerá su estado de inicio de sesión), escriba la misma dirección URL que escribió en el campo Sitio web.

  6. Acepte los términos y seleccione el botón Create your Twitter application (Crear aplicación de Twitter).

  7. En la página de aterrizaje Mis aplicaciones, seleccione la aplicación que ha creado.

  8. En la pestaña Detalles, desplácese hasta la parte inferior y seleccione el botón Create My Access Token (Crear mi token de acceso).

  9. En la pestaña Detalles, copie los valores Clave de consumidor y Secreto de consumidor de la aplicación y péguelos en un archivo de texto temporal. Pasará estos valores al proveedor de Twitter en su código del sitio web.

  10. Salga del sitio de Twitter.

Ahora debe realizar cambios en dos páginas de su sitio web para que los usuarios puedan iniciar sesión en el sitio con sus cuentas de Twitter.

  1. En su sitio web, edite la página _AppStart.cshtml y quite la marca de comentario del código del proveedor OAuth de Twitter. El bloque de código sin marca de comentario tiene el siguiente aspecto:

    OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Twitter,
consumerKey: "",
consumerSecret: "");

  2. Copie el valor Clave de consumidor de la aplicación de Twitter como el valor del parámetro consumerKey (entre comillas).

  3. Copie el valor Secreto de consumidor de la aplicación Twitter como valor del parámetro consumerSecret.

  4. Guarde y cierre el archivo.

  5. Edite la página ~/Account/Login.cshtml y quite los comentarios del bloque <fieldset> cerca del final de la página. Para quitar la marca de comentario del código, quite los caracteres @* que precedan y sigan al bloque <fieldset>. El bloque de código con comentarios eliminados tiene el siguiente aspecto:

    <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>

  6. Guarde y cierre el archivo.

Ahora puede probar el inicio de sesión de Twitter.

  1. Ejecute la página default.cshtml de su sitio y seleccione el botón Inicio de sesión.

  2. En la página Inicio de sesión, en la sección Utilice otro servicio para iniciar sesión, seleccione el icono de Twitter.

    La página web redirige la solicitud a una página de inicio de sesión de Twitter para la aplicación que ha creado.

    Screenshot shows the web page redirecting to a Twitter login page.

  3. Inicie sesión en una cuenta de Twitter.

  4. El código usa el token de Twitter para autenticar al usuario y, a continuación, le devuelve a una página donde puede asociar su inicio de sesión con su cuenta del sitio web. El nombre o la dirección de correo electrónico se rellenan en el campo Email del formulario.

    Screenshot shows the name or email address being filled in on the form.

  5. Seleccione el botón Asociar.

    El explorador vuelve a la página principal y ya se ha iniciado sesión.

    Screenshot shows the browser returning to the home page and the user being logged in.

Adición de Mapas mediante el asistente de Mapas

Web Pages 2 incluye adiciones a la biblioteca de asistentes web de ASP.NET, que es un paquete de complementos para un sitio de páginas web. Uno de estos es un componente de mapeo proporcionado por la clase Microsoft.Web.Helpers.Maps. Puede usar la clase Maps para generar mapas basados en una dirección o en un conjunto de coordenadas de longitud y latitud. La clase Maps le permite llamar directamente a motores de mapa populares como Bing, Google, MapQuest y Yahoo.

Para usar la nueva clase Maps en el sitio web, primero debe instalar la versión 2 de la biblioteca de asistentes web. Para ello, vaya a las instrucciones para instalar la versión publicada actualmente de la biblioteca de asistentes web de ASP.NET e instale la versión 2.

Los pasos para agregar el mapeo a una página son los mismos independientemente de a cuál de los motores de mapa llame. Solo tiene que agregar una referencia de archivo JavaScript a la página de mapeo y, a continuación, agregar una llamada que represente las etiquetas <script> en la página. A continuación, en la página de mapeo, llame al motor de mapa que desea usar.

En el ejemplo siguiente se muestra cómo crear una página que represente un mapa basado en una dirección y otra página que represente un mapa basado en coordenadas de longitud y latitud. En el ejemplo de mapeo de direcciones se usa Google Maps y en el ejemplo de mapeo de coordenadas se usa Bing Maps. Tenga en cuenta los elementos siguientes del código:

  • Llamada a Assets.AddScript en la parte superior de las dos páginas de mapeo. Este método agrega una referencia al archivo jquery-1.6.2.min.js que se incluye con la plantilla Sitio de inicio y que es necesario para la clase Maps.
  • Llamada al método Assets.GetScripts en el archivo de diseño. Este método representa la etiqueta <script> en las dos páginas de mapeo.
  • Llamada a los métodos @Maps.GetGoogleHtml y @Maps.GetBingHtml de las páginas de mapeo. Para asignar una dirección, debe pasar una cadena de dirección. Para asignar coordenadas, debe pasar coordenadas de longitud y latitud. Para el motor de Bing Maps, también debe pasar una clave (que se obtiene de forma gratuita al registrarse en el sitio de desarrolladores de Bing Maps). Los métodos para los demás motores de mapas funcionan de forma similar (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).

Para crear páginas de mapeo:

  1. Cree un sitio web basado en la plantilla Sitio de inicio.

  2. Cree un archivo denominado MapAddress.cshtml en la raíz del sitio. Esta página generará un mapa basado en una dirección que se le pase.

  3. Copie el código siguiente en el archivo y sobrescriba el contenido 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>

  4. Cree un archivo denominado _MapLayout.cshtml en la raíz del sitio. Esta página será la página de diseño de las dos páginas de mapeo.

  5. Copie el código siguiente en el archivo y sobrescriba el contenido 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>

  6. Cree un archivo denominado MapCoordinates.cshtml en la raíz del sitio. Esta página generará un mapa basado en un conjunto de coordenadas que le pase.

  7. Copie el código siguiente en el archivo y sobrescriba el contenido 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 probar las páginas de mapeo:

  1. Ejecute el archivo MapAddress.cshtml de la página.

  2. Escriba una cadena de dirección completa que incluya una dirección postal, un estado o una provincia y un código postal y, a continuación, elija el botón Map It (Mapear). La página representa un mapa de Google Maps:

    topseven-maphelper-1

  3. Busque un conjunto de coordenadas de latitud y longitud para una ubicación específica.

  4. Ejecute la página MapCoordinates.cshtml. Escriba las coordenadas y, a continuación, seleccione el botón Map It (Mapear). La página representa un mapa de Bing Maps:

    topseven-maphelper-2

Ejecución de aplicaciones de páginas web en paralelo

Web Pages 2 agrega la capacidad de ejecutar aplicaciones en paralelo. Esto le permite seguir ejecutando sus aplicaciones de Web Pages 1, compilar nuevas aplicaciones de Web Pages 2 y ejecutar todas ellas en el mismo equipo.

Estas son algunas cosas que debe recordar al instalar Web Pages 2 Beta con WebMatrix:

  • De forma predeterminada, las aplicaciones Web Pages existentes se ejecutarán como aplicaciones de la versión 2 en el equipo. (Los ensamblados de la versión 2 se instalan en la GAC y se usarán automáticamente).

  • Si desea ejecutar un sitio con la versión 1 de Web Pages (en lugar del valor predeterminado, como en el punto anterior), puede configurar el sitio para que lo haga. Si el sitio aún no tiene un archivo web.config en la raíz del sitio, cree uno nuevo y copie el siguiente XML en él de forma que se sobrescriba el contenido existente. Si el sitio ya contiene un archivo web.config, agregue un elemento <appSettings> como el siguiente a la sección <configuration>.

    <?xml version="1.0"?>
<configuration>
<appSettings>
<add key="webPages:Version" value="1.0"/>
</appSettings>
</configuration>

    Si no se especifica una versión en el archivo web.config, el sitio se implementa como sitio de versión 2. (Los ensamblados de la versión 2 se copian en la carpeta bin del sitio implementado).

  • Las nuevas aplicaciones que se crean con las plantillas de sitio de Web Matrix versión 2 Beta incluyen los ensamblados de la versión 2 de Web Pages en la carpeta bin del sitio.

En general, siempre puede controlar qué versión de Web Pages se va a usar con el sitio mediante NuGet para instalar los ensamblados adecuados en la carpeta bin del sitio. Para buscar paquetes, visite NuGet.org.

Representación de páginas para dispositivos móviles

Web Pages 2 permite crear presentaciones personalizadas para representar contenido en dispositivos móviles u otros dispositivos.

El espacio de nombres System.Web.WebPages contiene las siguientes clases que permiten trabajar con modos de presentación: DefaultDisplayMode, DisplayInfo y DisplayModes. Puede usar estas clases directamente y escribir código que represente la salida adecuada para dispositivos específicos.

Como alternativa, puede crear páginas específicas del dispositivo mediante un patrón de nomenclatura de archivos como este: FileName.Mobile.cshtml. Por ejemplo, puede crear dos versiones de una página, una denominada MyFile.cshtml y otra denominada MyFile.Mobile.cshtml. En tiempo de ejecución, cuando un dispositivo móvil solicita MyFile.cshtml, Web Pages representa el contenido de MyFile.Mobile.cshtml. De lo contrario, se representa MyFile.cshtml.

En el ejemplo siguiente se muestra cómo habilitar la representación para dispositivos móviles agregando una página de contenido para dispositivos móviles. Page1.cshtml contiene contenido y una barra lateral de navegación. Page1.Mobile.cshtml contiene el mismo contenido, pero omite la barra lateral.

Para compilar y ejecutar el código de ejemplo:

  1. En un sitio de Web Pages, cree un archivo denominado Page1.cshtml y copie el contenido Page1.cshtml en él desde el ejemplo.

  2. Cree un archivo denominado Page1.Mobile.cshtml y copie el contenido Page1.Mobile.cshtml en él desde el ejemplo. Observe que la versión móvil de la página omite la sección de navegación para una mejor representación en una pantalla más pequeña.

  3. Ejecute un explorador de escritorio y vaya a Page1.cshtml.

  4. Ejecute un explorador móvil (o un emulador de dispositivo móvil) y vaya a Page1.cshtml. Tenga en cuenta que esta vez las páginas web representan la versión móvil de la página.

    Nota:

    Para probar páginas móviles, puede usar un simulador de dispositivo móvil que se ejecute en un equipo de escritorio. Esta herramienta le permite probar páginas web como se verían en dispositivos móviles (es decir, normalmente con un área de visualización mucho más pequeña). Un ejemplo de simulador es el complemento User Agent Switcher para Mozilla Firefox, que permite emular varios exploradores móviles desde una versión de escritorio de 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 representado en un explorador de escritorio:

topseven-displaymodes-1

Page1.Mobile.cshtml se muestra en una vista de simulador de Apple iPhone en el explorador Firefox. Aunque la solicitud es a Page1.cshtml, la aplicación representa Page1.Mobile.cshtml.

topseven-displaymodes-2

Recursos adicionales

Recursos de ASP.NET Web Pages 1

Nota:

La mayoría de los recursos de programación y API de Web Pages 1 se siguen aplicando a Web Pages 2.

Recursos de WebMatrix