ASP.Net MVC 3 - Eugenio Serrano
27
-
Upload
eugenio-serrano -
Category
Technology
-
view
7.456 -
download
5
description
Presentacion de Eugenio Serrano, en el WebCamp de Cordoba, Argentina, Mayo 2011
Transcript of ASP.Net MVC 3 - Eugenio Serrano
¿Que es Razor?¿Qué es MVC 3?Usando Modelos, Vistas y ControladoresHtml Helpers y ValidadoresAJAX en ASP.Net MVC
Agenda
@if (User.Grok(Razor)) {<div>w00t!</div>
}• Nuevo motor de vistas mucho más simple• Permite escribir menos líneas de código• Permite mezclar código fuente y código
de marcado de forma mas natural• Tiene Helpers que nos ahorran el trabajo• Compatible con ASP.NET Web Pages en
WebMatrix
La sistaxis de Razor
Razor comparado con el resto <ul> <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> <% } %></ul>
<ul> @for (int i = 0; i < 10; i++) { <li>@i</li> }</ul>
Razor (2 transiciones):
Web Forms (6 transiciones):
<ul> <?php for ($i = 0; $i < 10; $i++) { echo("<li>$i</li>"); } ?></ul>
PHP(2 transiciones
y 1 echo):
Generando markup desde el código
@{ var name = “John Doe”; <div> Your name: @name </div>}
@{ var name = “John Doe”; @: Your name: @name}
Opción 3:Una simple linea
de salida
Opción 1:HTML Block
@{ var name = “John Doe”; <text> Your name: @name </text>}
Opción 2:Text Block
Comentarios en Razor@* <div> Hello World </div>*@
@* @{ var name = "John Doe"; @name }*@
Opción 3:Ambos
Opción 1:Markup
@{ //var name = "John Doe”; //@name}
Opción 2:Codigo
No escriba 2 veces lo mismo!Defina 1 layout y uselo en todo el sitio
Layouts para organizar páginas
Layout.cshtml
Page 1
Page 2
Page 3
1. Defina su Layout2. Referéncielos en sus paginas
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
Sections permiten definir aéreas de contenido que cambian entre paginas pero necesitan ser incluidas en el Layout
Sections para organizar las páginas
<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
RenderPage() lo ayuda a reusar markup y código que no cambia
Use RenderPage para organizarporciones 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
MOTOR DE VISTAS RAZORDemostración
ASP.NET MVCUn nuevo framework para desarrollo WebMás control sobre el HTMLMás fácil de hacer testPuede usar Web Forms o RAZOR para generar el HTMLEsta construido sobre en ASP.NET
¿Que ofrece?SoC (Separation of Concerns)
TDD por defaultMantenibilidad
Url y HTML mas limpioSEO y REST friendly
/Clientes/Buscar/Eugenio
CSS Friendly<html> <div> <label> <span>
Modelo de programación mas performanteNo hay ViewStateNo hay modelo de eventos
VIEWSTATE EN WEBFORMS Y MVCDemostración
¿Como funciona?
¿Como funciona?
Request
View
Controller
Response
Controlador:Recupera el modelo.Hace cosas.
Vista:Genera una representaciónvisual del modelo
Rutas
www.sitio.com/products/report/33/11/2009
URLs amigablesLegibles
www.sitio.com/products.aspx?module=reports&productId=33&year=2008&m=11 www.sitio.com/products/report/33/2008/11
Predecibleshttp://es.wikipedia.org/wiki/Microsoft
Ruteo – URIs amigablesSe agregan rutas a la RouteTable globalEl Mapeo crea un objeto RouteData (un diccionario de key/values)
protected void Application_Start(object sender, EventArgs e) { RouteTable.Routes.Add(
"Blog/bydate/[year]/[month]/[day]",new { controller="blog",
action="showposts" },new { year=@"\d{1,4}", month= @"\d{1,2}",
day = @"\d{1,2}"});}
Controlador – Uso BásicoEscenarios, Objetivos y Diseño
Las URLs indican “acciones” del Controlador, no páginas Las acciones deben declarase en el Controlador.El controlador ejecuta lógica y elige la vista.
public ActionResult ShowPost(int id) { Post p = PostRepository.GetPostById(id); if (p != null) { View(p); } else { View("nosuchpost", id); }}
Vistas – Uso BásicoEscenarios, Objetivos y Diseño:
Generan HTML u otro tipo de contenido. Helpers pre-definidos.
Pueden ser WebForms o Razor (u otras)Formatos de salida (images, RSS, JSON, …).Pueden definirse vistas Mock para testing.El controlador ofrece datos a la Vista
Datos Loosely typed o Strongly typed .
ASP.NET MVC 3 Demostración
AJAX en ASP.Net MVCUnobstructive AjaxEvita mezclar código script con código HTMLBasado en jQueryEn MVC 3, se han portado todas las librerías de script a jQueryValidadores remotos
ASP.NET MVC 3 Y AJAXDemostración
Mantengo menos de3 Web Apps. Necesito una herramienta que sea fácil de usar, de configurar, y poder publicar mis sitios
fácilmente
Quiero crear sitios por mi cuenta para
aprender a usar una herramienta y
conocer un framework de
forma fácil
Soy un desarrollador profesional y construyo grandes (y complejos) sitios web junto a un
grupo desarrolladores
ASP.NET: Un Framework para todo
ASP.NET: Un Framework para todo
Caching Modules
HandlersIntrinsics
Pages Controls
Globalization
Profile
Master Pages
MembershipRoles
Etc.
ASP.NET Core
ASP.NET Web Forms
ASP.NET MVC
ASP.NET Web Pages
Web Forms View Engine Razor View Engine
Visual Studio 2010 WebMatrix
