Introduciendo una nueva forma de hacer aplicaciones web: WebMatrix y ASP.net MVC3 “Razor”.Leonard A. Petit-Breuilh Torresl.petitbre@alumnos.duoc.clMSP DuocUC Antonio Varas

WebMatrix

¿Qué es WebMatrix?

Una manera rápida y sencilla de desarrollar sitios y aplicaciones web.

Incluye las ultimas tecnologías Microsoft

También incluye tecnologías y aplicaciones OpenSource

¿Qué es WebMatrix?

Premisa de WebMatrix

Personalizar PublicarCrear

Premisa de WebMatrix

Servidor Web (IIS Express 7.5)

Base de datos (SQL Compact)

Herramienta de desarrollo

Premisa de WebMatrix

PlantillasGalería de

aplicaciones web

Entorno de programación:•Server-side: ASP.net MVC3 “Razor” o PHP•Client-side: JS, JQuery, frameworks del lado del cliente (Flash, Silverlight, etc.)

¿Y Visual Studio 2010?

Mayor control y potencia.Intellisense de código ASP.net.Características avanzadas de IDE (Refactorización, modelado, etc.).

Descarga pequeña (20mb).Frameworks PHP y ASP.Net.Incluye IIS Express, y se pueden descargar Frameworks y aplicaciones vía WebPI.

¿Y Visual Studio 2010?

Descarga muy grande (700mb+).Solo tecnologías Microsoft.No incluye IIS Express.Elevada complejidad para el principiante.

Intellisense limitado a HTML.Herramientas orientadas al desarrollo de aplicaciones básicas.Editor simplificado de texto (sin refactorización, etc.).

En resumen: ¿Para quién es WebMatrix?

Instalando WebMatrixhttp://www.microsoft.com/web/webmatrix/

Iniciar Web Platform Installer (WebPI)

Requerimientos

•Windows XP (SP3), Server 2003 (SP3), Vista (SP2), 7, Server 2008 (SP2) o 2008 R2 (Intel/AMD x86).•1 GB de RAM. (2GB en Windows Vista / 7).•Conexión a Internet.

Instalación vía Web PI

Pantalla de Inicio de WebMatrix

Galería de aplicaciones web

Y Muchas mas…

Web Gallery Posee una serie de aplicaciones web listas para descargar como por ejemplo:

Demo 1: Instalando Wordpress con WebMatrix

Desarrollo de aplicaciones

Plantillas Posee una serie de plantillas de ejemplo para desarrollar aplicaciones web con ASP.net Razor

Sitio en blanco

Sitio de Inicio

Panadería Galería de Fotos

Calendario

Opciones del editor

Configuración del sitio

Archivos que componen el sitio (Editar, crear, etc.)

Crear y Administrar bases de datos

Informes acerca de los sitios (SEO, Links, Tamaños, etc.)

Sitio: Configuración•Configuración de la aplicación (versión de .NET, habilitar PHP, etc.)•Monitorear solicitudes HTTP

Sitio: Archivos

•Crear y Editar Archivos•Coloreado de sintaxis•Intellisense de HTML•Abrir con Visual Studio 2010

Sitio: Bases de Datos•Manipular bases de datos (SQL Server 2005/2008 y MySQL)•Exportar a SQL Server las bases SQL Server CE

Sitio: Informes

Problemas de:•Rendimiento•SEO•URL’s rotas•Etc.

Mis SitiosMis Sitios:La pantalla Mis Sitios sirve para seleccionar el sitio web que se va a editar.

PublicaciónPublicar:La pantalla Publicar permite subir el sitio a un servidor, vía FTP o Web Deploy.

Publicación

Buscar hospedaje, según precio y características (Pronto disponible en Chile).

EjecutarEjecutar:El botón Ejecutar arranca IIS Express y permite ejecutar el sitio tal como si estuviese en un servidor.

Preguntas

ASP.net MVC3 “Razor”

¿Qué es ASP.net MVC3 “Razor”?

Una manera sencilla de desarrollar sitios web.Facilita el mezclar HTML y codigo.Montones de “Helpers”, con funcionalidades listas para usar.

Sintaxis Razor•Bloque de código: @{(código ASP.net)}•Evaluar expresión entre código HTML: @(expresión)•Comentarios: @*(Comentario)*@ o el comentario del lenguaje a usar (// en el caso de C#) dentro de un bloque.•@: es utilizado para escribir directamente a la salida, sin formateo HTML. También se puede usar para esto el tag <text>.•Para imprimir el carácter @ se usa: @@•Eso no es necesario cuando la @ forma parte de un e-mail.

Si dentro de un bloque se coloca HTML o una evaluación de expresión, Razor la detecta automáticamente y la imprime

Imprimiendo un valor@{ var name = “John Doe”; <div> Your name: @name </div>}

@{ var name = “John Doe”; @: Your name: @name}

Opción 3: Salida directa (no HTML)

Opción 1: En un Bloque HTML (por ejemplo un DIV)

@{ var name = “John Doe”; <text> Your name: @name </text>}

Opción 2: Salida directa (no HTML) con el tag especial <text>

Acceso a bases de datos− SQL Compact Edition incluido

− Corre sin servidor, ya que está basado en archivo.

− Diseño y codificación simplificada

Diseño

@{ var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); }

Codificación

WebGrid

@{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS);

var grid = new WebGrid(data);}

<div id="grid"> @grid.GetHtml();</div>

<div id="grid"> @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>), grid.Column("Price", format:@<text>$@item.Price</text>) ) )</div>

@{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3);}

Despliegue de datos en forma de grilla, incluye opciones para paginación y formateo. Tambien soporta actualizaciones vía Ajax. Es uno de los Helpers integrados a Razor.

Layouts y Templates

Layout.cshtml

Pagina1

Pagina 2

Pagina 3

Se puede definir un diseño que puede ser reutilizado en todo el sitioEl objetivo es evitar la repetición innecesaria de código.

Sintaxis de los Layouts

<html>    <head>      <title>Simple Layout</title>    </head>    <body>         @RenderBody() </body></html>

/Shared/_Layout.cshtml

@{ Layout = "/Shared/_Layout.cshtml";}

<p> My content goes here</p>

MyPage.cshtml

1.Definir un Layout2.Referenciarlo en las páginas

Usando secciones para organizar las paginas

<html>    <head>      <title>Simple Layout</title>    </head>    <body>  @RenderSection("Menu")        @RenderBody() </body></html>

/Shared/_Layout.cshtml@{ Layout = "/Shared/_Layout.cshtml";}

@section Menu { <ul id="pageMenu">

<li>Option 1</li><li>Option 2</li>

</ul>}<p> My content goes here</p>

MyPage.cshtml

Las secciones permiten definir áreas de contenido que cambian entre paginas pero necesitan ser incluidas en un layout

Usar RenderPage para organizar las paginas que no cambian

<html>    <head>      <title>Simple Layout</title>    </head>    <body>  @RenderSection("Menu")        @RenderBody() @RenderPage("/Shared/_Footer.cshtml") </body></html>

/Shared/_Layout.cshtml

<div class="footer">   © 2010 Contoso</div>

/Shared/_Footer.cshtml

RenderPage() ayuda a reutilizar el código de las paginas que no cambian

Temas•Los temas permiten utilizar distintos diseños para los sitios.•Los usuarios pueden intercambiar los temas también.

Usando Temas

@{ Themes.Initialize("~/App_Themes","_Default");}

•Se colocan los temas como carpetas en la carpeta App_Themes•Luego se registra el tema en el archivo app_start•Si un recurso no está redefinido en un Tema, se ocupa lo que está en el tema _Default

Membrecía•Provee la posibilidad de que los usuarios se registren•Organiza a los usuarios en roles•Permite restringir el acceso a las paginas dependiendo del rol•WebMatrix incluye Helpers y Bases de Datos para la configuración sencilla de la membrecía•Algunas plantillas incluyen una carpeta “Admin” que tiene todas las paginas necesarias para hacer membrecía

Configurando Membrecía

@{ WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true);}

/_AppStart.cshtml

StarterSite database

En una línea de código

Controlando el acceso a las paginas

@if (!WebSecurity.IsAuthenticated) {      Response.Redirect("/Account/Login"); }

@if ( Roles.IsUserInRole("admin")) {     <span> Welcome <b>@WebSecurity.CurrentUserName</b>! </span>}

El acceso a las paginas se puede controlar basándose en lo siguiente:¿Está el usuario logueado?¿Tiene el usuario acceso a la página?¿El usuario pertenece al rol correcto?

Helpers

Añadir funcionalidad nueva a las páginas

Diseñados para hacer la vida mas facil

Controles AJAX Y mucho mas…

Categorías de Helpers

Helpers HTML

Helpers de API

Hechos para hacer mas facil el mostrar código comunmente usado en una pagina.Ejemplos: Facebook, Twitter, grillas, calendarios, etc.

Hechos para facilitar el acceso de API’s complejas desde el sitio.Ejemplos: Paypal, Odata, Windows Azure Storage, Servicios Web, etc.

Los Helpers se dividen en los siguientes tipos:

Añadiendo HelpersHay dos maneras de añadir Helpers a su sitio web

Administrador de Paquetes

(Aplicación integrada en el

servidor)

Descarga manual(Bajarlo y

copiarlo en la aplicación)

Construyendo un Helper: 3 formas

• Se usa @helper y archivos CSHTML• Para Helpers simples

Usar código en línea

• Clase estática con métodos estáticos CSHTML implementados como @function

• Para Helpers que usen .NET

Usar una clase

• Helpers con clases• Se desarrollan con VS2010

Usar un assembly (DLL)

@FacebookSocialPlugins.ShowLoginButton(...);

•Se usa un CSHTML•Se guarda en la carpeta App_Code•El nombre del archivo es el nombre de la clase

Helpers: Sintaxis en línea

Helpers: Sintaxis en línea

@helper HelloWorld(string name = "") { <div>Hello @name</div> }

@helper ShowLoginButton(string buttonText = "") { <fb:login-button>@buttonText</fb:login-button> }

•@helper se usa para crear atajos HTML, y para empaquetar HTML que se ocupa habitualmente. •Permiten el uso de parámetros•Por ejemplo: El Plugin Social de Facebook está hecho como un Helper con sintaxis en línea @helper.

Helpers: Sintaxis en línea

@functions {public static string SayHello(string name) {

return “Hello ” + name;}

}

•@function se usa para generar funciones que retornen valores, idealmente para envolver la funcionalidad de ciertas api’s complejas.•El Helper de Twitter está construido con funciones @function.

Demo 2: Analizando la aplicación Galería Fotográfica.

Recursos

http://www.microsoft.com/web/webmatrix

• http://bit.ly/h8Bsbd• www.facebook.com/EstudiantesMS

Preguntas

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Visual Studio, WebMatrix, the Visual Studio logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies.

 The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.  Because Microsoft must respond

to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. 

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.