Tutorial Web Matrix PDF

Correo: Fredy.Guibert@studentpartner.com | Fredy.Guibert@ieee.
org
Twitter: @fredyfx
Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 1

http://www.facebook.com/UPAO.net http://www.facebook.com/IEEEComputerSocietyUPAO
Tutorial Microsoft WebMatrix
Contenido
Trminos y Condiciones de uso .................................................................................... 4
Previo a la Instalacin ................................................................................................. 4
Advertencia............................................................................................................. 4
Instalacin .............................................................................................................. 5
Introduccin a Microsoft WebMatrix ............................................................................ 12
Caractersticas ......................................................................................................... 12
Elementos de la Interfaz ............................................................................................ 13
Iniciando el tutorial ................................................................................................... 15
HTML Bsico ......................................................................................................... 15
Hojas de estilo ...................................................................................................... 16
Sintaxis Razor ....................................................................................................... 21
Creando una Interfaz consistente............................................................................. 22
Header .............................................................................................................. 23
Footer ............................................................................................................... 25
Programacin bsica .............................................................................................. 25
intro.cshtml........................................................................................................ 25
Formularios ........................................................................................................... 28
form.cshtml ....................................................................................................... 28
Creacin de Base de datos ...................................................................................... 30
Operaciones CRUD ................................................................................................. 33
Create ............................................................................................................... 34
Read ................................................................................................................. 34
Update .............................................................................................................. 35
Delete ............................................................................................................... 36
Creacin de estructura ........................................................................................... 37
Login.................................................................................................................... 37

_AppStart.cshtml ................................................................................................... 37
Carpeta account .................................................................................................... 38
new.cshtml ........................................................................................................ 38
login.cshtml ....................................................................................................... 40
logout.cshtml ..................................................................................................... 41
Carpeta crud ......................................................................................................... 41
read.cshtml ........................................................................................................ 42
create.cshtml ..................................................................................................... 43
update.cshtml .................................................................................................... 45
delete.cshtml ..................................................................................................... 47
Carpeta reports ..................................................................................................... 49
pricereport.cshtml ............................................................................................... 49
stockreport.cshtml .............................................................................................. 49
reports.cshtml ....................................................................................................... 49
error.cshtml .......................................................................................................... 50
web.config ............................................................................................................ 50
Finalizando el tutorial ................................................................................................ 51
Recursos Extras ....................................................................................................... 55
Palabras Finales ....................................................................................................... 56

Trminos y Condiciones de uso
[02 minutos]
Duracin del tutorial: 1 Hora y 45 Minutos, 105 minutos en total distribuidos en: 15 de
introduccin, 80 de programacin y 10 de preguntas/respuestas. Si faltase tiempo, con
gusto las dudas que tengan sern respondidas mediante correo electrnico o va twitter.
Para el presente tutorial no se requiere experiencia alguna en desarrollo web pero s

conocimiento en desarrollo de aplicaciones, hoy aprenderemos con ejemplos simples y
directos, tengan en cuenta las siguientes recomendaciones para lograr un aprendizaje
exitoso:
Celulares en silencio.
Tener sus sentidos enfocados en el presente tutorial.
Leer detenidamente este material.
Prohibida la navegacin en internet y reproduccin de msica.
Las preguntas se realizarn al final; se sugiere anotar cualquier tipo de duda para
luego hacerla saber; en caso falte tiempo para la resolucin de dudas, va correo
electrnico obtendrn respuestas.
Previo a la Instalacin
[02 minutos]
Actualmente sus computadoras ya se encuentran configuradas con todos los elementos que
utilizaremos, como vern en la imagen adjunta, tenemos instalado algunos mdulos, como
el soporte para PHP, s, tal y como estn pensando: Pero PHP no solo corre sobre un
apache? Tambin corre sobre Internet Information Services (ms conocido como IIS,
servidor web de Microsoft)
Advertencia
[01 minuto]
Si tambin programan utilizando un servidor local como apache (con netbeans / eclipse /
wamp / xampp), tendrn problemas con el puerto 80 ya que lo estar usando el IIS
(referencia: localhost). Para solucionar este asunto tienen 2 opciones:
Configuran el apache para que utilice otro puerto.

Deshabilitar el IIS de manera temporal.
Por efectos de practicidad, veremos la 2da opcin: nos dirigimos a Panel de control ->
Programas -> Programas y caractersticas -> Activar o desactivar las caractersticas de
Windows. Desmarcamos todo Internet Information Services, si requiere reinciar la
computadora, se reinicia y listo!

Instalacin
[00 minutos] [Cada quien ya tiene instalado en casa]
Para quienes no dispongan de Microsoft WebMatrix en sus ordenadores, podrn descargarlo

en el siguiente enlace: http://go.microsoft.com/fwlink/?LinkID=205867
Una vez descargado, procedemos a ejecutar:

Debemos tener en cuenta los requisitos que necesita Microsoft WebMatrix.
Una vez aceptado los requisitos, proceder a descargarlos.

Al final obtendremos un reporte sobre todo lo instalado en nuestra computadora.
Ahora tenemos instalado Microsoft WebMatrix, podemos agregar componentes adicionales:

Viene lo interesante, instalaremos un mdulo de soporte de PHP, para ello, se busca primero
PHP y luego clickeamos en el botn agregar.
De manera automtica, se agregarn las dependencias

Debemos tener en cuenta que tambin se necesitar el conector MySQL/Net; y si todava no
tienes el MySQL Instalado, se recomienda instalar las GUI Tools como el MySQL Query
Browser y/o MySQL Workbench, debido a que si solo se instala el MySQL, tendrs el manejo
via consola y via WebMatrix nicamente.
Ahora procedemos a verificar los elementos aadidos

Y procederemos con la instalacin!

Aceptamos los trminos y condiciones de uso
Esperamos mientras se ejecuta la descarga de los componentes antes mencionados

Listo, tenemos completamente preparado nuestro entorno de trabajo
Introduccin a Microsoft WebMatrix

[02 minuto]
WebMatrix es un software gratuito que trae consigo un conjunto de herramientas para

facilitar el desarrollo web utilizando ASP.net o PHP y una gran interaccin con aplicaciones
Open Source tales como sistemas de gestores de contenido como Wordpress, Drupal, entre
otros.
Caractersticas
[03 minutos]
Soporta PHP.
Internet Information Services Express [IIS Express] -> Servidor Web
ASP.net (VB | C#) -> Web Framework.
SQL Server Compact Edition [SQL Server CE] -> Gestor de Base de Datos nativo,
tambin soporta conexin con MySQL [Requiere un conector adicional].
Anlisis de SEO y Rendimiento.

Elementos de la Interfaz
[05 minutos]
La intefaz que utiliza WebMatrix, es sencilla permitiendo una fcil navegacin, del mismo
modo, los elementos son muy intuitivos, por lo cual permite adaptarse en poco tiempo, a su
vez, cabe mencionar que el men principal que posee cuenta con estilo Ribbon (el cual
apareci en Office 2007).
Esta herramienta se divide prcticamente en 4 bloques:
Men [Seccin verde]

Elementos de trabajo [Seccin naranja]
Contenido [Seccin negra]
Panel [Seccin azul]

A continuacin se detallarn las interfaces:
Nos encontramos con las solicitudes, es decir, lo que pasa a

travs del servidor mediante posts y gets; las opciones
generales del servidor: aqu es donde seleccionamos si
soporta ASP.net y/o PHP, si habilitamos SSL y qu pginas
sern mostradas primero.
Archivos, portapapeles, edicin, vistas, iniciar visual studio,

cargar e instalar extensiones, son las opciones que
encontramos en esta seccin.
Aqu podemos crear nuevas bases de datos tanto en SQL

Server CE como en MySQL [requiere extensin], del mismo
modo, crear tablas, modificar las conexiones, crear
consultas, vistas, procedimientos almacenados y realizar
una migracin a SQL Server.
Se detallan informes de Rendimiento del sitio web, tanto de

tiempo, como de recursos, a su vez se obtiene un informe
SEO [Search Engine Optimization] para conocer qu tanta
aceptacin tendr nuestra web con los bots de los
buscadores.

Iniciando el tutorial
[80 minutos]
El presente tutorial busca dar un panorama general sobre la programacin de aplicaciones

web: login de acceso, la seguridad web basado en los roles de usuario, un mantenimiento a
una tabla (agregar, editar, buscar, eliminar) y un par de reportes grficos.
1. [10 minutos] Conociendo HTML

2. [10 minutos] Estilo haciendo uso de CSS a los bloques.
3. [10 minutos] Sintaxis Razor
4. [05 minutos] Creacin de una interfaz consistente.
5. [05 minutos] Programacin bsica.
6. [07 minutos] Formularios: envo de variables mtodos GET y POST
7. [10 minutos] Creacin de Base de Datos: Tabla productos.
8. [10 minutos] Operaciones CRUD [Create Read Update Delete].
9. [03 minutos] Creacin de estructura del proyecto.
10. [10 minutos] Login de acceso al sistema -> Sesiones.
HTML Bsico
[10 minutos]
Los elementos HTML son componentes que especifican como los documentos HTML deben
ser construidos y que tipo de contenido debe ser posicionado en que lugar de un documento
HTML.Los nombres de elementos son encerrados entre picos, tambin denominados
parntesis angulares: <NombreElemento>, los cuales son llamados etiquetas. Si el elemento
contiene otro contenido, este termina con una etiqueta de cierre, donde el nombre del
elemento es precedido por un slash: </NombreElemento>.
Etiquetas Descripcin
<a> Es uno de los elementos ms importantes del HTML. Es el encargado de crear
</a> los tpicos vnculos hipertextuales. Puede actuar como origen y como destino
de estos enlaces. Adems son muy apreciadas sus capacidades dinmicas.
<br /> br de "break" - ruptura. Fuerza al ruptura (o salto) de linea.
<div> div de "division" - divisin. Sirve para crear secciones o agrupar contenidos.
</div>
<fieldset> El elemento fieldset (grupo de campos) permite organizar en grupos los
/fieldset> campos de un formulario.
<legend> El elemento <legend> (leyenda) crea un ttulo para un grupos los campos
</legend>
(<fieldset>) de un formulario.
<p></p> El elemento p (prrafo) es el apropiado para distribuir el texto en prrafos.
<input> El elemento input (<input>) es usado para crear controles interactivos para
formularios basados en la web.
<img> Esta etiqueta inserta una imagen.

Hojas de estilo
[10 minutos]
Comenzamos creando la carpeta

style y dentro de ella ubicaremos
a nuestra hoja de estilos *(CSS)
llamada StyleSheet.css
Luego de ello procedemos a definir

las caractersticas de los elementos
HTML.
*El cdigo de nuestro CSS se encuentra lneas

abajo.
Otra caracterstica de Microsoft WebMatrix en la edicin de hojas de estilo es su sencillez

para la definicin de color por ejemplo, adems de tener intellisense activado para la
rpida bsqueda de propiedades, te especifica en la descripcin de cada elemento.

A continuacin presentamos el cdigo de nuestra hoja de estilo llamada StyleSheet.css
/*Con esto definimos valores generales*/

* {
margin:0; padding:0;
}
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend,
dl, dt, dd, blockquote, applet, object {
border:0;
}
body {
padding: 15px;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000;
width: 960px;
background-color: rgba(0, 0, 0, 0.07);
}
#header{
width: 960px;
height: 150px;
background-color: #235980;
color: #fff;
}
#login{
float: right;
padding-top: 20px;
padding-right: 20px;
clear: none;
}
#titulo{
clear: none;
padding: 20px;
}
#menu{
width: 960px;
color: #fff;
}
#menu li{
border-color: #ff6a00;
border-style: solid;
display: inline;
padding: 10px;

font-size: 16px;
color: #fff;
}
#help li{
font-size: 10px;
display: inline;
}
a:hover {
background-color: #2586d7;
color: #ecff00;
}
a {
color:#fff;
text-decoration:none;
border:none;
}
.enlace{
color: #000;
}
.footer {
text-align: center;
color: #fff;
font-size: 12px;
margin-top: 20px;
padding: 5px;
}
img a {
border:none;
}
h1, h2, h3, h4, h5, h6 {

font-family: Arial, Helvetica, Sans Serif;
margin:0 0 10px 0;
}
h1 {
font-size:230%;
}
h2 {
font-size:183%;
font-weight: bold;
}

h3 {
font-size:140%;
font-weight: bold;
}
h4 {
font-size:120%;
font-weight: bold;
}
h5 {
font-size:100%;
}
h1.title {
border-bottom:1px dotted #84a1af;
margin:0 0 20px 0;
}
label {
float:left;
width: 15em;
margin-right: 6em;
}
fieldset {
padding: 1em;
border: 1px solid;
width: 35em;
}
legend {
padding: 2px 4px;
border: 1px solid;
font-weight:bold;
}
/* Para resaltar los errores de validacion*/

.validation-summary-errors {
font-weight:bold;
color:red;
font-size: 11pt;
padding-left: 20px;
float: right;
margin: 50px 80px 0px 0px;
}
/* Para el slider*/
/* el rectangulo contenedor */
#slider_container_1 {

height: 375px;
margin:0 auto;
padding: 10px;
width: 500px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
border-radius: 10px 10px;
}
/* el rectangulo con las imagenes */

#SliderName {
height: 375px;
margin: auto;
width: 500px;
}
/* las flecha para ir hacia atras (son imagenes de 24x24 */

.SliderNamePrev, .SliderNameNext {
background: url() no-repeat center center;
display: block;
height: 24px;
position: absolute;
text-decoration: none;
top: 155px;
width: 24px;
}
/* la flecha para ir hacia atras */

.SliderNamePrev {
background-image: url('../images/left.png');
left: 10px;
}
/* la flecha para ir hacia adelante*/

.SliderNameNext {
background-image: url('../images/right.png');
right: 10px;
}
/* el rectangulo con los textos */

.SliderNameDescription {
font-family: Verdana;
font-size: 25px;
padding: 5px;
text-align: left;
}
/* la barra de navegacion inferior */
#SliderNameNavigation {
background-color: #FFF;
height: 0px;
margin: 10px 0 0 0;

text-align: center;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
/* Publicidad de las comunidades */

.cherryL{
float: left;
}
.cherryR{
float: right;
}
Sintaxis Razor
[10 minutos]
La sintaxis Razor ofrece todo el poder de

ASP.NET, pero con una sintaxis simplificada que
es ms fcil de aprender, de tal manera que Razor Sintaxis
comprendes mejor la lgica de la programacin
llegando a ser altamente productivos. Con
mucho esfuerzo, dedicacin y constante ASP.net
prctica llegaremos a ser Expertos en
desarrollo web! A pesar de que esta sintaxis es
muy simple de usar, su relacin familiar con
.Net Framework
ASP.NET y el framework .NET significa que a
medida que los sitios que desarrollaremos se
vuelven ms sofisticados, tenemos el poder
para lograrlo.
Para conocer esta sintaxis, debemos tener en cuenta que:
Las declaraciones comienzan con el caracter arroba @

Se encierran bloques de cdigo entre llaves.
Dentro de un bloque, se termina cada instruccin de cdigo con un punto y coma,
excepto si est mezclado con cdigo HTML.
Se colocan valores literales entre comillas.
El cdigo es sensitivo como en C#.
Gran parte de su codificacin implica objetos.
Los espacios en blanco no afectan el funcionamiento.


@{ var numero = 7; }
@{ var saludo = "Greetings World, we are programmers!"; }

<p>El valor de su cuenta es: @numero </p>

<p>Su mensaje : @mensaje</p>

@{
var diasemana = DateTime.Now.DayOfWeek;
var saludocompleto = saludo + " Hoy es: " + diasemana;
var saludoCompleto = saludo + " este es otro saludo";
}
Creando una Interfaz consistente

[05 minutos]
Se imaginan estar programando los bloques o secciones por

pgina sin la necesidad de tener todo en cada una? Seamos
ms productivos, ahorremos tiempo y reutilicemos cdigo!
Dentro de la carpeta style, creamos 3 archivo:
header.cshtml
slider.cshtml
footer.cshtml
StyleSheet.css
Todas las pginas que veremos en este tutorial tendrn el siguiente esquema:

Header
Nuestro Header contiene un pequeo formulario de login, por lo cual se opt de fusionar
junto con el men en un mismo archivo llamado header.cshtml ubicado dentro de la
carpeta style:
@{
var mensaje = "Tutorial Microsoft WebMatrix";
}
<head>
<meta charset="utf-8">
<meta name=description
content="tutorial desarrollado para el IX Congreso Internacional de
Ingeniera de Software,
Sistemas de Informacin y Telecomunicaciones
UPAO 2012">
<title >:: IX Congreso Sistemas, Software, Telecomunicaciones UPAO::</title>
<link rel="stylesheet" type="text/css" media="screen"
href="@Href("~/style/StyleSheet.css")" />
<script src="@Href("~/js/sliderman.1.3.6.js")"
type="text/javascript"></script>
</head>
<div id="header">
<div id="login">
@if(WebSecurity.IsAuthenticated)
{
<p>Bienvenido, @WebSecurity.CurrentUserName |

<a href="@Href("~/account/logout.cshtml")">Salir del sistema</a></p>
}
else
{
<form method="post" action="@Href("~/account/login.cshtml")">
Usuario: <input type="text" name="username">
Password: <input type="password" name="password">
<input type="submit" title="Acceder al sistema">
</form>
<div id="help">
<ul>
<li><a href="#">Olvid mi password</a></li>
<li><a href="@Href("~/account/new.cshtml")">| Cuenta
nueva</a></li>
<li> | Exactamente son: @DateTime.Now</li>
</ul>
</div>
}</div>
<div id="titulo">
<a href="@Href("~/index.cshtml")"><h1>@mensaje</h1></a>
<h2><a href="http://www.upao.edu.pe/congreso_sistemas/2012"
target="_blank">
IX Congreso Internacional de Ingeniera de Software,
Sistemas de Informacin y Telecomunicaciones
UPAO 2012
</a>
</h2>
</div>
</div>
<br />
<div id="menu">
<ol>
<li><a href="@Href("~/intro.cshtml")">Introduccion</a></li>
<li><a href="@Href("~/form.cshtml")">Formularios</a></li>
<li><a href="@Href("~/crud/read.cshtml")">Operaciones CRUD</a></li>
<li><a href="@Href("~/reports.cshtml")">Reportes</a></li>
</ol>
</div>
Dando como resultado:

Detalle importante:
La utilizacin de una referencia @Href("~/intro.cshtml") crea una URL del tipo:

http://<server>/intro.cshtml es muy til ya que se convierte simple nuestra
organizacin de archivos.
Footer
<div class="footer">
Tutorial Desarrollo de Aplicaciones Web con Microsoft WebMatrix Todos los
derechos reservados - 2012
</div>
El resultado:
Programacin bsica
[05 minutos]
A continuacin se presenta el archivo intro.cshtml, el cual se crear en la raz del proyecto
intro.cshtml
@{
/*
Response.CacheControl = "no-cache";
if (!WebSecurity.IsAuthenticated) {
var returnUrl = "~/index.cshtml";
Response.Redirect(returnUrl);
}
*/
}
<!DOCTYPE html>
<html lang="es-pe">
@RenderPage("~/style/header.cshtml")
<body>
<h1>Comenzando a programar en la Web!</h1>
<p>Esperamos que el presente tutorial sea de su agrado</p>
@{
// Estructuras condicionales simples
var saldo = 4.99;

if(saldo == 0)
{
<p>Tienes cero nuevos soles de saldo.</p>
}
else if (saldo > 0 && saldo <= 5)
{
<p>Tu saldo @saldo es muy bajo.</p>
}
else
{
<p>Tu saldo es: $@saldo</p>
}
// Estructuras condicionales mltiples
var weekday = "Miercoles";
var greeting = "";
switch(weekday)
{
case "Lunes":
greeting = "Iniciamos la semana con todo el power!";
break;
case "Martes":
greeting = "Segundo da, vamos avanzando!";
break;
case "Miercoles":
greeting = "Da de tutoriales!";
break;
default:
greeting = "Algn otro da debe ser";
break;
}
<p>Veamos, @weekday, el mensaje para hoy es: @greeting</p>
// Estructuras repetitivas
for(var i = 0; i < 4; i++)
{
<p>Linea #: @i</p>
}
var countNum = 0;
while (countNum < 5)
{
countNum += 1;
<p>Line #@countNum: </p>
}
// Arreglos
{
<h3>Team Members</h3>
string[] teamMembers = {"Matt", "Joanne", "Robert", "Nancy"};
foreach (var person in teamMembers)
{
<p>@person</p>
}
}

//Diccionario de datos
{
var myScores = new Dictionary<string, int>();
myScores.Add("test1", 71);
<p>Mi nota en el test 3 es: @myScores["test3"]%</p>
@(myScores["test4"] = 79);
<p>Mi nota corregida en el test 4 es: @myScores["test4"]%</p>
}
// Manejo de excepciones
float numeroa = 5;
float numerob= 0;
float resultado = numeroa/numerob;
try{
<p>@resultado</p>
}catch(Exception ex ){
<b>Errores:</b>
@ex.Message;
<p>@ex.Data</p>
}finally{
}
}
@RenderPage("~/style/footer.cshtml")
</body>
</html>

Formularios
[07 minutos] [Mtodos POST y GET]
En la programacin de aplicaciones web, tenemos que tener en cuenta que son envos de
peticiones http al servidor, por lo que se utilizan POST y GET, ambos envan las variables, a
diferencian de GET que hace uso del paso de las mismas va url, POST no lo hace. Luego de
programar form.cshtml podremos ver con mayor claridad la diferencia mencionada.
form.cshtml
Editamos el archivo form.cshtml con el siguiente cdigo:

@{
/*
}
*/
}
<!DOCTYPE html>
<html>
@RenderPage("/style/header.cshtml")
<body>
<h1>Bienvenido al tutorial</h1>
<div style="float: left; margin-right: 10px;">
<fieldset>
<form action="" method="post">
<div>
Ingrese su nombre:
<input type="text" name="vnombre" value="">
<input type="submit" value="Enviar!" />
</div>
<div>
@if (IsPost){
if (Request["vnombre"].IsEmpty()){
<p style="color: #ff0000">*No olvide ingresar su nombre</p>
}else{
<p> Bienvenido: <b> @Request["vnombre"] ! </b>
Preprate, vamos a programar en la web
</p>
}
}
</div>
</form>
</fieldset>
<br />
</div>
<fieldset>
<form action="" method="get">
Numero A:<input type="text" name="numeroa" size="4" />
Numero B:<input type="text" name="numerob" size="4" />
<input type="submit" value=" La suma es: "/>
@{
float numeroa = Request.QueryString["numeroa"].AsFloat();
float numerob = Request.QueryString["numerob"].AsFloat();
float resultado = numeroa+numerob;
if(Request.QueryString["numeroa"].IsEmpty() ||
Request.QueryString["numerob"].IsEmpty()){
<p style="color: #ff0000">*No olvide ingresar datos numricos</p>
}else{

<b>@resultado</b>
}
}
</form>
</fieldset>
</div>
@RenderPage("/style/footer.cshtml")
</body>
</html>
Haciendo uso de GET
Creacin de Base de datos

[10 minutos] [Haciendo uso de SQL Server CE]
En esta ocasin creamos una base de datos llamada Tutorial haciendo uso de SQL Server
Compact Edition, del siguiente modo:

Primero seleccionamos Base Segundo, seleccionamos base de datos de SQL Server CE,
de Datos en el panel ubicado para que aparezca MySQL, se requiere un conector
en la parte inferior izquierda adicional.
Tercero, colocamos un nombre a nuestra base de datos,

en este caso, Razor como se ve en la imagen de la
derecha.
Ahora que ya disponemos de la base de datos,
procedemos a crear una nueva tabla ya sea utilizando click
derecho y Nueva tabla directamente en el botn
seleccionado Nueva tabla
En la creacin de tablas, debemos tener siempre en cuenta cules sern nuestras llaves
primarias, y si sern autogeneradas (1, 2, 3, 4) por la misma base de datos.

Como vern en las imgenes con ayuda de un zoom, se define el nombre del campo de la
tabla, luego se selecciona el tipo de dato, despus se marcan los checks siguientes, lo que
genera el bloqueo de Permitir valores NULL, finalmente nos queda nuestra tabla productos
con los campos: id, nombre, descripcin, precio, stock.
Ahora a poblar la tabla! Para ello nos dirigimos hacia Datos, y bueno, insertamos datos:

Operaciones CRUD
[10 minutos]
Se denominan operaciones CRUD por el siguiente detalle:

Create Read Update Delete, es decir, operaciones de
insercin, seleccin, actualizacin [ modificacin] y
eliminacin de datos de una tabla en una base de datos, para
ello utilizaremos lenguaje SQL (Structured Query Language).
Anteriormente visualizamos la creacin de una base de datos

junto con una tabla y su respectivo poblamiento en directo.
Veamos cmo trabaja una base de datos y luego crearemos
los formularios!
Para manipular los datos en una base de datos, la lgica es:
1. Abrimos conexin a la base de datos.

2. Establecemos el Query (Consulta SQL).
3. Ejecutamos el Query.
4. Obtenemos resultado de la ejecucin.
5. Cerramos la conexin.

Create
Sintaxis:
INSERT INTO <NombreTabla> (campo1, campo2, ) VALUES (valor1, valor2, )
Ejemplo:
INSERT INTO productos (nombre, descripcion, precio, stock) VALUES ('pilas
duracell','baterias de larga duracion',2.50,40)
Read
Al igual que un Hola mundo que es la primera lnea de cdigo que vemos al iniciar en el
mundo de la programacin, con las consultas en base de datos iniciamos con un SELECT *
FROM <NombreTabla>, esto quiere decir que seleccionar todos los campos que se
encuentren en la tabla definida.
Detalle importante: No es una buena prctica (Referencia: Situaciones de rendimiento), por

lo que se recomienda colocar los campos a seleccionar.
Sintaxis:
SELECT <campo1>, <campo2>,<campo3>,<campoN-1>, <campoN> FROM <NombreTabla>
Ejemplo:
SELECT id, nombre, descripcion, precio, stock FROM productos

Update
Con el comando Update actualizaremos los datos, para ello necesitamos la respuesta a la
pregunta Qu dato? O Qu datos? De esta respuesta establecemos la condicin necesaria.
Sintaxis:
UPDATE <tabla>
SET <campo1> = <nuevo valor>,
<campo2> = <nuevo valor>
WHERE <condicin>
Ejemplo 01:
UPDATE productos
SET nombre='bluetooth', descripcion='sinmark v2',
precio=25.70, stock=20
WHERE id=5
Ejemplo 02:
UPDATE productos
SET stock=100
WHERE id<15

Delete
Borraremos los datos y la pregunta al igual que en el caso de actualizacin: Qu dato? O
Qu datos? Veamos!
Sintaxis:
DELETE FROM <NombreTabla> WHERE <Condicin>
Ejemplo:
DELETE FROM productos WHERE id=6

Creacin de estructura
[03 minutos] [Creamos las carpetas, vamos archivo por archivo]
Esta es la estructura final de nuestro pequeo tutorial:
Login
[10 minutos]
Para tener un login, primero que debemos hacer es tener una tabla llamada usuarios con
las siguientes caractersticas:
Campo Tipo de Valor Es clave Es Permitir

dato predeterminado primaria? identidad? valores
NULL
usuarioid int S S No
email nvarchar(50) NULL No No No
_AppStart.cshtml
Ahora procederemos a crear un archivo llamado _AppStart.cshtml, este archivo se
ejecutar al iniciar nuestra aplicacin, el cdigo que contiene es el siguiente:
@{
WebSecurity.InitializeDatabaseConnection("Razor",
"usuarios", "usuarioid", "email", true);
}
<!DOCTYPE html>
<html lang="es-pe">

<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Estas 3 tablas adicionales fueron generadas gracias al

archivo anterior, contienen una lgica bsica en la seguridad:
Membership, que contiene la contrasea de acceso y otros
detalles, los roles de usuario, y la tabla de mezcla entre
usuarios y roles.
Carpeta account
Archivo para crear nuevas cuenta de usuario, en la raz del proyecto crearemos una carpeta
llamada account con los siguientes archivos
new.cshtml
@{
var username = "";
var password = "";
var confirmPassword = "";
var errorMessage = "";
if(!IsPost)
{
if(WebSecurity.IsAuthenticated){
errorMessage = String.Format("Ests actualmente logeado. (Usuario:
{0})",
WebSecurity.CurrentUserName);
}
}
if(IsPost)
{
WebSecurity.Logout();
username = Request["username"];
password = Request["password"];
confirmPassword = Request["confirmPassword"];
if(username.IsEmpty())
{
ModelState.AddError("username", "Complete el nombre de usuario");
}

if(password.IsEmpty() || confirmPassword.IsEmpty())
{
ModelState.AddError("password","Complete su contrasea");
}
if(password != confirmPassword)
{
ModelState.AddError("password", "*Debe ser la misma contrasea.");
}
if(!username.IsEmpty())
{
if(WebSecurity.UserExists(username))
{
ModelState.AddError("username","el usuario ya existe");
}else
{
if(ModelState.IsValid)
{
WebSecurity.CreateUserAndAccount(username,password,null,false);
WebSecurity.Login(username, password, true);
Response.Redirect("~/intro.cshtml");
}
}
}
}
}
<!DOCTYPE html>
<html lang="es-pe">
<body>
<h1>Nuevo usuario</h1>
<div style="float: left;clear: none">
<form method="post">
<fieldset>
<legend>Registros</legend>
<div style="clear: none;">
<label>Usuario (email):</label>
<input name="username" type="text" size="50" value="" />
</div>
<div>
<label>Password:</label>
<input type="password" name="password" id="password"
size="50" value="" />
</div>
<div>
<label>Confirmacin de Password:</label>
<input type="password" name="confirmPassword"
id="confirmPassword" size="50" value="" />
</div>
<div>
<br />
<input type="submit" value="Registrar nuevo usuario!"

size="50"/>
<a href="@Href("~/index.cshtml")"><input type="button"
value=" Regresar " /></a>
</div>
</fieldset>
</form>
</div>
<p>@Html.ValidationSummary("Mensajes:")</p>
<div style="clear: both;">
<br />
</div>
</body>
</html>
login.cshtml
@{
var username = "";
var password = "";
var errorMessage = "";
if(IsPost){
username = Request["username"];
password = Request["password"];
if(username.IsEmpty() || password.IsEmpty()){
Response.Redirect("~/index.cshtml");
}else{
if(WebSecurity.Login(username,password,true)){
Response.Redirect("~/intro.cshtml");
}else
{
errorMessage = "Login was not successful.";
}
}
}
}
<!DOCTYPE html>
<html lang="es-pe">
<body>
<h1>Login</h1>
<fieldset>
@if(WebSecurity.IsAuthenticated){
<p>You are currently logged in as @WebSecurity.CurrentUserName.
<a href="@Href("~/Logout")">Log out</a>

</p>
}
<p>
<label for="username">Username:</label><br/>
<input type="text" name="username" id="username" value="" />
</p>
<p>
<label for="password">Password:</label><br/>
<input type="password" name="password" id="password" value="" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
<p style="color: #000">No user name? <br />

<a style="color: #000" href="@Href("~/account/new.cshtml")">
>>Register<<</a></p>
<p style="color: #000">
<a style="color: #000" href="@Href("~/index.cshtml")">Regresa al
inicio</a></p>
</form>
</fieldset>
<p>
@if(errorMessage != ""){
<span class="errorMessage">@errorMessage</span>
}
</p>
</body>
</html>
logout.cshtml
@{
WebSecurity.Logout();
Response.Redirect("~/index.cshtml");
}
Carpeta crud
Debemos tener nuestra base de datos creada y con algunos datos ingresos como en el
ejemplo antes mostrado.

read.cshtml
@{
}
var db = Database.Open("Razor");
var selectQueryString = "SELECT * FROM productos ORDER BY id";
db.Close();
}
<!DOCTYPE html>
<html lang="es-pe">
@RenderPage("../style/header.cshtml")
<body>
<div id="contenido">
<h1>Listando Productos</h1>
<form action="create.cshtml">
<button onclick="">Agregar nuevo producto</button>
</form>
<br />
<table>
<thead>
<tr>
<th>Id</th>
<th>Producto</th>
<th>Descripcion</th>
<th>Precio</th>
<th>Stock</th>
<th>Operaciones</th>
</tr>
</thead>
<tbody>
@foreach(var row in db.Query(selectQueryString)){
<tr>
<td>@row.id</td>
<td>@row.nombre</td>
<td>@row.descripcion</td>
<td>@row.precio</td>
<td>@row.stock</td>
<td><a class="enlace"
href="@Href("~/crud/update.cshtml",row.id)">Editar</a> | <a class="enlace"
href="@Href("~/crud/delete.cshtml", row.id)">Eliminar</a></td>
</tr>
}

</tbody>
</table>
</div>
</body>
</html>
create.cshtml
@{
}
// Abrimos conexin a base de datos

var titulo = "Agregando nuevo producto";
// Recibimos las variables

var nombre = Request["nombre"];
var descripcion = Request["descripcion"];
var precio = Request["precio"];
var stock = Request["stock"];
// Si se ha recargado la pgina
if (IsPost) {
// Leemos el nombre del producto

nombre = Request["nombre"];
// Validamos que contenga datos
if (nombre.IsEmpty()) {
ModelState.AddError("nombre", "Se necesita el nombre del producto.");
}
descripcion = Request["descripcion"];
if (descripcion.IsEmpty()) {
ModelState.AddError("descripcion", "Se necesita la descripcion del
producto.");
}
stock = Request["stock"];
if (stock.IsEmpty()) {
ModelState.AddError("stock", "Se necesita el stock del producto.");
}

precio = Request["precio"];
if (precio.IsEmpty()) {
ModelState.AddError("precio", "Se necesita el precio del producto.");
}
if(ModelState.IsValid) {
// Establecemos la consulta de insercin.
var insertQuery = "INSERT INTO Productos (nombre, descripcion, precio,
stock) " +
"VALUES (@0, @1, @2, @3)";
db.Execute(insertQuery, nombre, descripcion, precio.AsFloat(),
stock.AsInt());
// Mostramos la pgina que contiene la lista de productos.
Response.Redirect(@Href("~/crud/read.cshtml"));
db.Close();
}
}
}
<!DOCTYPE html>
<html>
<body>
<h1>@titulo</h1>
<div style="float: left;clear: none">
<form method="post" action="">
<fieldset>
<legend>Registros</legend>
<div style="clear: none;">
<label>Nombre:</label>
<input name="nombre" type="text" size="50" value="@nombre" />
</div>
<div>
<label>Descripcion:</label>
<input name="descripcion" type="text" size="50"
value="@descripcion" />
</div>
<div>
<label>Precio:</label>
<input name="precio" type="text" size="50" value="@precio" />
</div>
<div>
<label>Stock:</label>
<input name="stock" type="text" size="50" value="@stock" />
</div>
<div>
<br />
@if ( Roles.IsUserInRole("master"))
{
<input type="submit" value=" Registrar nuevo producto! "
size="50"/>

}else{
<input type="submit" value=" Registrar nuevo producto! "
disabled="disabled" size="50"/>
}
<a href="@Href("~/crud/read.cshtml")"><input type="button" value="
Regresar " /></a>
</div>
</fieldset>
</form>
</div>
<p>@Html.ValidationSummary("Errors encontrados:")</p>
</div>
<div style="clear: both;">

<br />
</div>
</body>
</html>
update.cshtml
@{
}
var consulta = "SELECT * FROM productos WHERE id=@0";
var productoid = UrlData[0];
if (productoid.IsEmpty()) {
}
var row = db.QuerySingle(consulta, productoid);
var nombre = row.nombre;

var descripcion = row.descripcion;
var precio = row.precio;
var stock = row.stock;
if (IsPost) {

// Leemos el nombre del producto
nombre = Request["nombre"];
if (String.IsNullOrEmpty(nombre)) {
ModelState.AddError("nombre", "Se necesita el nombre del producto.");
}
descripcion = Request["descripcion"];
if (String.IsNullOrEmpty(descripcion)) {
ModelState.AddError("descripcion", "Se necesita la descripcion del
producto.");
}
stock = Request["stock"];
if (String.IsNullOrEmpty(stock)) {
ModelState.AddError("stock", "Se necesita el stock del producto.");
}
precio = Request["precio"];
if (String.IsNullOrEmpty(precio)) {
ModelState.AddError("precio", "Se necesita el precio del producto.");
}
if(ModelState.IsValid) {
var updateQueryString =
"UPDATE productos SET nombre=@0, descripcion=@1, precio=@2, stock=@3
WHERE id=@4" ;
db.Execute(updateQueryString, nombre, descripcion, precio, stock,
productoid);
}
}
}
<!DOCTYPE html>
<html>
<body>
<h1>Editando producto</h1>
<p>@Html.ValidationSummary("Errors encontrados:")</p>

<fieldset>
<legend>Actualizacin de producto</legend>
<div>
<label>Nombre:</label>
<input name="nombre" type="text" size="50" value="@nombre" />
</div>
<div>
<label>Descripcion:</label>
<input name="descripcion" type="text" size="50" value="@descripcion"

/>
</div>
<div>
<label>Precio:</label>
<input name="precio" type="text" size="50" value="@precio" />
</div>
<div>
<label>Stock:</label>
<input name="stock" type="text" size="50" value="@stock" />
</div>
<div>
<br />
{
<input type="submit" value=" Guardar edicin " size="50"/>
}else{
<input type="submit" value=" Guardar edicin "
disabled="disabled" size="50"/>
}
<a href="@Href("~/crud/read.cshtml")"><input type="button" value="
Regresar " /></a>
</div>
</fieldset>
</form>
</body>
</html>
delete.cshtml
@{
}
var productoid = UrlData[0];
if (productoid.IsEmpty()) {
}
var producto = db.QuerySingle("SELECT * FROM productos WHERE ID = @0",

productoid);

if( IsPost && !productoid.IsEmpty()) {
var deleteQueryString = "DELETE FROM productos WHERE Id=@0";
db.Execute(deleteQueryString, productoid);
Response.Redirect("~/crud/read.cshtml");
}
}
<!DOCTYPE html>
<html lang="es-pe">
<body>
<h1>Borrando productos - Confirmacin</h1>
<h3>Ests seguro que deseas borrar el siguiente producto?</h3>
<fieldset>
<p>
Nombre: @producto.nombre <br />
Descripcion: @producto.descripcion <br />
Precio: @producto.precio <br />
Stock: @producto.stock <br />
</p>
{
<input type="submit" value=" SI " />
}else
{
<input type="submit" value=" SI " disabled="disabled" />
}
<a href="@Href("~/crud/read.cshtml")"><input type="button" value=" NO "

/></a>
</fieldset>
</form>
</body>
</html>
Como vern, se encuentran con botones deshabilitados, los

cuales ejecutan los comandos necesarios para interactuar
con la base de datos, lo que se tiene que hacer es crear un
rol llamado master
Se requiere haber creado un usuario antes, el cual ser del
tipo administrador, en este caso lo definimos como master,
ir a la tabla siguiente y actualizarlos datos del UuserId con el
RoleId.

Carpeta reports
pricereport.cshtml
@{
var data = db.Query("SELECT nombre, precio FROM productos");
var myChart = new Chart(width: 600, height: 400, theme:ChartTheme.Green)
.AddTitle("PRECIOS de los productos de la tienda Razor")
.DataBindTable(dataSource: data, xField: "nombre")
.Write();
}
stockreport.cshtml
@{
var data = db.Query("SELECT nombre, stock FROM productos");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("STOCK de los productos de la tienda Razor")
.DataBindTable(dataSource: data, xField: "nombre")
.Write();
}
reports.cshtml
En la raz del proyecto va este archivo con el siguiente cdigo:
<!DOCTYPE html>
<html lang="es-pe">
<body>
<h1>Reportes Grficos</h1>
<fieldset>
<legend>Reportando</legend>
Seleccione tipo de reporte:
<select name="opcionreporte">
<option value="stock">Stock de productos</option>
<option value="precio">Precio de productos</option>
</select>
<input type="submit" onclick="" value="Obtener Reporte" >
</fieldset>
</form>
@{
if(IsPost)
{
var or = Request["opcionreporte"];
if(or=="stock")

{
<p>El reporte es:</p>
<img src="/reports/stockreport.cshtml" alt="grafico" />
}
if(or=="precio")
{
<p>El reporte es:</p>
<img src="/reports/pricereport.cshtml" alt="grafico" />
}
}
}
</body>
</html>
error.cshtml
Este archivo, tambin va dentro de la raz del proyecto.
<!DOCTYPE html>
<html lang="es-pe">
<body>
<h1>Error 404</h1>
<fieldset>
<legend>Not Found</legend>
<p>Lo sentimos, la pgina solicitada no existe</p>
</fieldset>
</body>
</html>
web.config
Al igual que el anterior archivo, tambin va dentro de la raz.
<?xml version="1.0" encoding="utf-8"?>

<configuration>
<system.web>
<compilation debug="false" targetFramework="4.0" />
<customErrors mode="On" defaultRedirect="error.cshtml" />
</system.web>
</configuration>

Finalizando el tutorial
Para publicar el sitio creado en internet necesitamos tener un hosting, creamos una cuenta
trial de 30 das gratis (teniendo en cuenta que luego dicha cuenta deber ser eliminada
manualmente antes que los 30 das terminen, para evitar cobros por parte del servidor
hacia ustedes). En el siguiente enlace: http://hosting.parking.ru/webmatrix.aspx

En la seccin de Services, nos dirigimos hacia Web, desplegando los sub-items que hay
dentro, en la seccin derecha clickeamos en Get XML for WeMatrix

Ahora, en nuestra
herramienta, vamos a la
opcin de publicar, ubicada
en la parte superior del
men principal:
Aparecern las siguientes opciones:
Luego de haber seleccionado el archivo que descargamos con anterioridad, se mostrar la

siguiente ventana:

Continuamos con la tarea de publicacin:

En la parte inferior de WebMatrix, encontramos el avance de la publicacin.
Al final de la publicacin, la herramienta nos dar un Log (archivo que guarda todo tipo de
movimiento, indicando fechas/horas, y tareas efectuadas principalmente, puede ser va
texto plano o mediante algn tipo de formato especial como HTML. NO confundir con meta-
dato)
Recursos Extras
Microsoft Virtual Academy http://www.microsoftvirtualacademy.com
Elementos HTML https://developer.mozilla.org/es/docs/HTML/Elemento
Comunidad Acadmica en Tecnologas Microsoft UPAO.net
http://www.facebook.com/UPAO.net
IEEE Computer Society UPAO http://www.facebook.com/IEEEComputerSocietyUPAO
Comunidades Microsoft Per http://www.facebook.com/CMSPeru
Microsoft Geeks http://geeks.ms
Blog de Rodrgo Daz Concha, Microsoft MVP ASP.net/Silverlight
http://rdiazconcha.com
Blog de Gonzalo Chalalo Prez Correa, Microsoft MVP ASP/ASP.NET http://chalalo.cl
Blog de Peter Concha MSP de Ecuador http://ptrconcha.wordpress.com/
W3Schools http://www.w3schools.com/aspnet/razor_intro.asp
Mike's web log
http://www.mikepope.com/blog/displayblog.aspx?category=webmatrix
Tutorial Inicial de ASP.net http://www.asp.net/web-pages/content-guide

Palabras Finales
Gracias por su paciencia, dedicacin y esfuerzo, espero que hayan aprendido cmo se
trabaja una aplicacin en la web, ahora es su turno de compartir el conocimiento en su
grupo de amigos.
Internet es mucho ms que ratos de juego y ocio en las redes sociales, stas mismas tienen
gran material de cientos, miles y millones de cibernautas que tambin van compartiendo
conocimiento, el punto clave es buscar y de preferencia en ingls, si desconoces el ingls, no
hay problema, en internet tambin se aprende idiomas.
Siempre busquen, investiguen ms all de lo que las clases pueden llegar, no veamos la
competencia entre nuestros entornos, la verdadera competencia radica en superarse a uno
mismo da a da.
En Facebook existen grupos de programacin bastante buenos tanto en ingls como en

espaol, en Youtube hay gran cantidad de tutoriales desde muy bsicos hasta niveles
increbles, en Twitter, por medio de #hastags encuentras informacin en directo y las
personas responden con bastante respeto.
Y bueno, ya estando en el final de la redaccin del tutorial, los invito a participar de la

comunidad en tecnologas Microsoft UPAO.net y/o formar parte de la IEEE Computer Society
UPAO, del mismo modo los invito visitar un proyecto blogero: www.codesinapsys.com y sin
nada ms que agregar me despido hasta una prxima ocasin.
Saludos!
Atte. Fredy Rubn Guibert Daz.

Fundador de la Comunidad en Tecnologas Microsoft UPAO.net | Presidente IEEE Computer
Society UPAO
PD: Si quedaron dudas pendientes, un correo a: Fredy.Guibert@studentpartner.com

Fredy.Guibert@ieee.org y desean elegir una opcin ms simple: enven un tweet @fredyfx

Tutorial Web Matrix PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial Web Matrix PDF

Cargado por

Copyright:

Formatos disponibles

Correo: Fredy.Guibert@studentpartner.com | Fredy.Guibert@ieee.

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 1

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 2

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 3

Para el presente tutorial no se requiere experiencia alguna en desarrollo web pero s

Configuran el apache para que utilice otro puerto.

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 4

Para quienes no dispongan de Microsoft WebMatrix en sus ordenadores, podrn descargarlo

Una vez descargado, procedemos a ejecutar:

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 5

Una vez aceptado los requisitos, proceder a descargarlos.

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 6

Ahora tenemos instalado Microsoft WebMatrix, podemos agregar componentes adicionales:

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 7

De manera automtica, se agregarn las dependencias

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 8

Ahora procedemos a verificar los elementos aadidos

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 9

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 10

Esperamos mientras se ejecuta la descarga de los componentes antes mencionados

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 11

Introduccin a Microsoft WebMatrix

WebMatrix es un software gratuito que trae consigo un conjunto de herramientas para

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 12

Esta herramienta se divide prcticamente en 4 bloques:

Men [Seccin verde]

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 13

Nos encontramos con las solicitudes, es decir, lo que pasa a

Archivos, portapapeles, edicin, vistas, iniciar visual studio,

Aqu podemos crear nuevas bases de datos tanto en SQL

Se detallan informes de Rendimiento del sitio web, tanto de

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 14

El presente tutorial busca dar un panorama general sobre la programacin de aplicaciones

1. [10 minutos] Conociendo HTML

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 15

Comenzamos creando la carpeta

Luego de ello procedemos a definir

*El cdigo de nuestro CSS se encuentra lneas

Otra caracterstica de Microsoft WebMatrix en la edicin de hojas de estilo es su sencillez

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 16

/*Con esto definimos valores generales*/

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 17

h1, h2, h3, h4, h5, h6 {

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 18

/* Para resaltar los errores de validacion*/

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 19

/* el rectangulo con las imagenes */

/* las flecha para ir hacia atras (son imagenes de 24x24 */

/* la flecha para ir hacia atras */

/* la flecha para ir hacia adelante*/

/* el rectangulo con los textos */

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 20

/* Publicidad de las comunidades */

La sintaxis Razor ofrece todo el poder de

Para conocer esta sintaxis, debemos tener en cuenta que:

Las declaraciones comienzan con el caracter arroba @

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 21

<p>El valor de su cuenta es: @numero </p>

Creando una Interfaz consistente

Se imaginan estar programando los bloques o secciones por

Comunidad Acadmica Microsoft UPAO.net | IEEE Computer Society UPAO Pgina 22

/Con esto definimos valores generales/