MSP DuocUC Antonio Varas
[email protected]
Crear
Personalizar
Publicar
Servidor Web
(IIS Express 7.5)
Base de datos
(SQL Compact)
Herramienta de desarrollo
Plantillas
Galerí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.)
Mayor control y potencia.
Descarga pequeña (20mb).
Intellisense de código
ASP.net.
Frameworks PHP y ASP.Net.
Características avanzadas
de IDE (Refactorización,
modelado, etc.).
Incluye IIS Express, y se
pueden descargar
Frameworks y aplicaciones
vía WebPI.
Descarga muy grande
(700mb+).
Intellisense limitado a
HTML.
Solo tecnologías Microsoft.
No incluye IIS Express.
Herramientas orientadas al
desarrollo de aplicaciones
básicas.
Elevada complejidad para
el principiante.
Editor simplificado de texto
(sin refactorización, etc.).
http://www.microsoft.com/web/webmatrix/
@{
Opción 1: En un
Bloque HTML (por
ejemplo un DIV)
var name = “John Doe”;
<div>
Your name: @name
</div>
}
Opción 2: Salida
directa (no HTML)
con el tag especial
<text>
@{
Opción 3: Salida
directa (no HTML)
@{
var name = “John Doe”;
<text>
Your name: @name
</text>
}
var name = “John Doe”;
@: Your name: @name
}
Diseño
Codificación
@{
var db = Database.Open("ArtGallery");
var product = db.Query("SELECT * FROM PRODUCTS);
}
@{
var db = Database.Open("ArtGallery");
var data = db.Query("SELECT * FROM PRODUCTS);
<div id="grid">
[email protected](
grid @{
= new WebGrid(data);
}
columns:
var grid.Columns(
db = Database.Open("ArtGallery");
grid.Column("Name",
"Product", style:
var data = db.Query("SELECT
* FROM "product"),
PRODUCTS);
<div id="grid">
grid.Column("Description",
var grid = new WebGrid( format:@<i>@item.Description</i>),
@grid.GetHtml();
grid.Column("Price", format:@<text>[email protected]</text>)
source: data,
</div> )
defaultSort: "Name",
)
rowsPerPage: 3);
</div> }
Pagina
1
Pagina
2
Layout.cshtml
Pagina
3
/Shared/_Layout.cshtml
<html>
<head>
MyPage.cshtml
<title>Simple Layout</title>
</head>
@{
<body>
Layout = "/Shared/_Layout.cshtml";
@RenderBody()
}
</body>
</html>
<p>
My content goes here
</p>
MyPage.cshtml
/Shared/_Layout.cshtml
@{
Layout = "/Shared/_Layout.cshtml";
<html>
}
<head>
<title>Simple Layout</title>
@section Menu {
</head>
<ul id="pageMenu">
<body>
<li>Option 1</li>
@RenderSection("Menu")
<li>Option 2</li>
@RenderBody()
</ul>
</body>
}
</html>
<p>
My content goes here
</p>
/Shared/_Layout.cshtml
/Shared/_Footer.cshtml
<html>
<div class="footer">
<head>
© 2010 Contoso
<title>Simple Layout</title>
</div>
</head>
<body>
@RenderSection("Menu")
@RenderBody()
@RenderPage("/Shared/_Footer.cshtml")
</body>
</html>
@{
Themes.Initialize("~/App_Themes","_Default");
}
/_AppStart.cshtml
@{
WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email",
true);
}
StarterSite database
@if (!WebSecurity.IsAuthenticated) {
Response.Redirect("/Account/Login");
}
@if ( Roles.IsUserInRole("admin")) {
<span> Welcome
<b>@WebSecurity.CurrentUserName</b>! </span>
}
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.
Usar código en línea
• Se usa @helper y archivos CSHTML
• Para Helpers simples
Usar una clase
• Clase estática con métodos estáticos CSHTML
implementados como @function
• Para Helpers que usen .NET
Usar un assembly (DLL)
• Helpers con clases
• Se desarrollan con VS2010
@FacebookSocialPlugins.ShowLoginButton(...);
@helper HelloWorld(string name = "") {
<div>Hello
@name</div>
@helper ShowLoginButton(string buttonText = "") {
}
<fb:login-button>@buttonText</fb:login-button>
}
@functions {
public static string SayHello(string name) {
return “Hello ” + name;
}
}
Descargar

Introduciendo una nueva forma de hacer