Web Pages Razor Manual 2

Tabla de contenido
INTRODUCCION A Web Pages ......................................................................................................... 5

Paginas CSHTML ................................................................................................................................... 7
Conociendo ms a CSHTML ............................................................................................................. 8
Razor: Conocindolo ms ............................................................................................................... 10
Instalando un Helper ......................................................................................................................... 11
Mostrando un Gravatar ................................................................................................................ 11
Usando un Helper en una pgina. ............................................................................................ 13
Mostrando Data ................................................................................................................................... 14
Creando una Base de datos ....................................................................................................... 14
Creando una tabla .......................................................................................................................... 14
Insertar Datos en la Tabla ........................................................................................................... 15
Mostrar datos en una WebGrid.................................................................................................. 16
Escribiendo el cdigo Razor ...................................................................................................... 16
Modificando la vista del Grid ..................................................................................................... 16
Cambiando las columnas a mostrar ........................................................................................ 16
Cambiando el look del grid ......................................................................................................... 16
Agregando paginacin ................................................................................................................. 17
Formularios Bsicos de HTML ...................................................................................................... 18
Los Verbos ....................................................................................................................................... 18
GET. Usado para recuperar algo del servidor. Se ve cuando se escribe una url,
cuando se muestran las imgenes de una pgina web. ..................................................... 18
POST. Permite enviar una peticin con el fin de presentar los datos para agregarlos o
cambiarlos en el servidor. Se usa para manejo de base de datos. .................................. 18
Creando un Formulario ................................................................................................................ 19
Leyendo los Valores del Formulario........................................................................................ 19
El Objeto Request .......................................................................................................................... 19
Pasando un trmino de bsqueda como parmetro ......................................................... 20
Ingresando Datos a una tabla usando Formularios ............................................................... 25
Qu Construirs? ........................................................................................................................ 25
Creando el Formulario Bsico de Entrada ............................................................................ 25
Obteniendo Valores del Formulario ......................................................................................... 26
2
Agregando Datos a la Base de Datos ..................................................................................... 26
Validando las Entradas de Usuario .......................................................................................... 27
Validando con un Helper ............................................................................................................. 27
Agregando un Link ............................................................................................................................ 29
3
4
INTRODUCCION A Web Pages
6
Paginas CSHTML
7
Conociendo ms a CSHTML
8
9
Razor: Conocindolo ms
10
Instalando un Helper
Mostrando un Gravatar
Ir a la pgina http://es.gravatar.com/ y registrarse
Ir a NuGet
En el cuadro de bsqueda poner "asp.net helpers" y seleccionar ASP.NET Web

Helpers Library
11
Clic en instalar, en s y aceptar la licencia
12
Para desinstalarlo clic en el paquete instalado y desinstalar.
NuGet nos sirve para instalar libreras o componentes adicionales que pueden ser
requeridos para simplificar tareas.
ASP.NET Web Helpers Library es una librera que simplifica muchas tareas comunes,
incluye el Gravatar.
Usando un Helper en una pgina.
Para usar un helper se debe poner el @ seguido del helper a usar.
Vamos a usar el helper gravatar poniendo @Gravatar.
Seguido de eso ponemos el punto (.) esto nos mostrara los mtodos del helper.
El intelliSense nos ayuda a proveer el apropiado contexto de las llamadas, trabajando en
varios lenguajes de .Net.
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
13
Mostrando Data
Creando una Base de datos
Ir a bases de datos, en mi caso se encuentra en la parte inferior izquierda del programa-
Agregar una base de datos al sitio- Colocarle nombre a la base de datos.
Veras la base de datos creada en la parte superior izquierda del programa.
Se creara una base de datos con extensin .sdf

Creando una tabla
Clic derecho en la base de datos donde sale tablas y agregar nueva tabla.
Especificar nombre de tabla y crear las filas.
Guardar la Tabla
14
Ejercicio
Se creara la siguiente tabla con las siguientes filas.
peliculas
ID int Primary Key e Identity
Titulo nvarchar(100)
Genero nvarchar(40)
Ao nchar(5)
Insertar Datos en la Tabla

Dar clic derecho sobre la tabla y seleccionar Datos.
Proceder a escribir los datos en las filas para ser usados.
Si ingresas un dato mal y este no es nulo mostrara un error.
15
Una vez finalizado cerrar la pestaa de la tabla.
Para regresar a donde estn nuestros archivos, dar clic en Archivos que se
encuentra en la parte inferior del programa.
Mostrar datos en una WebGrid
Parar mostrar los datos usaremos un webgrid para verlos en una tabla, por lo tanto
genera el html de una etiqueta <table>.
Para eso debemos crear un archivo cshtml siguiendo los pasos que se encuentran
anteriormente.
Escribiendo el cdigo Razor
var db = Database.Open("nombredelabd");
var selectedData = db.Query("SELECT * FROM nombretabla");
var grid = new WebGrid(source: selectedData);
Modificando la vista del Grid
Con esto se pretende generar una vista profesional de los datos en el webgrid, o una vista
donde se vean los datos de forma ms intuitiva.
Cambiando las columnas a mostrar
Puedo quitarle las columnas para mostrar mejores resultados.
columns: grid.Columns(
grid.Column("Columna1"),
grid.Column("Columna2"),
grid.Column("Columna 3")
)
Dichas columnas son los valores que le damos a las filas de la tabla a mostrar.
Cambiando el look del grid
Primero podemos cambiar los estilos, recordemos que tratamos con una tabla.
Por eso usare este ejemplo:
<style type="text/css">
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.alt { background-color: #E8E8E8; color: #000; }
</style>
Seguido de eso aadimos los estilos
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
grid.Column("Titulo"),
grid.Column("Genero"),
grid.Column("Ao")
)
)
16
Agregando paginacin
Si tenemos muchos datos esto nos ayuda a que se muestre pocos datos pero las pginas
que se ven en la parte inferior nos dar un orden, el objetivo es que no se vean tantos
datos si no pocos para mostrar lo que se necesita.
var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
Veremos lo aprendido a travs de un ejemplo y una vista, de acuerdo a la tabla que
hemos creado.
webgrid.cshtm
@{
//Abrimos la base de datos y armamos la consulta
var db=Database.Open("nombredelabd");
var seleccionardatos=db.Query("SELECT * FROM peliculas");
//Cargamos los datos en la Grid
var grid = new WebGrid(source: seleccionardatos, defaultSort: "Genero",
rowsPerPage:6);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

h1 {
font-family: 'Times New Roman', serif;
font-size: 16px;
font-weight: bold;
}
.grid { margin: 4px; border-collapse: collapse;
width: 600px; }
.grid th, .grid td { border: 1px solid #C0C0C0;
padding: 5px; }
.head { background-color: #E8E8E8; font-weight: bold;
color: #FFF; }
</style>
<title>Peliculas</title>
</head>
<body>

<h1>Resultados</h1>
@grid.GetHtml(
tableStyle: "grid",
17
grid.Column("Ao")
));
</body>
</html>
Su resultado en el navegador seria:
Formularios Bsicos de HTML

Los formularios permiten a nuestros usuarios interactuar con nuestros clientes, es de
importancia que sean intuitivos y hagan lo que se les ha pedido.
Acerca de formularios HTML
Un formulario contiene elementos de entrada, entre esos estn: cajas de texto, botones,
radio buttons, check boxes, drop-down lists entre otros.
El usuario llena los campos o hace sus selecciones y los enva a travs de un botn, de
ese proceso obtendr una respuesta.
<form method="post">
<input type="text" name="name" value="" />
<br/>
<input type="submit" name="submit" value="Submit" />
</form>
La etiqueta <form> y su cierre </form> contienen los inputs con los cuales interactuara
nuestro usuario.
Los Verbos
Son usados por el navegador para enviarle peticiones al servidor, se usan
mayoritariamente dos verbos para dichas peticiones permitiendo al servidor darle una
respuesta al usuario de acuerdo a una accin.
GET. Usado para recuperar algo del servidor. Se ve cuando se escribe una url, cuando se
muestran las imgenes de una pgina web.
Si se envan datos desde un formulario, se envan al servidor como parte de la URL.
POST. Permite enviar una peticin con el fin de presentar los datos para agregarlos o
cambiarlos en el servidor. Se usa para manejo de base de datos.
Los datos son pasados al servidor segn los que se encuentren en el cuerpo de la pgina.
En los formularios el usuario usa distintas entradas conocidas como inputs.
Estas entradas(inputs) permiten al usuario interactuar con nuestro sitio web.
La etiqueta es <input type="tipo" name="nombre" id="nombre">
Los tipos son:
18
Cajas de Texto text
Caja de Contrasea password
Cajas de Verificacin check
Botn de Radio radio
Botn button
Botn de Envio submit
rea de Texto <textarea>
Creando un Formulario
<form method="get">
<div>
<label for="txtgenero">Genero para ver:</label>
<input type="text" name="txtgenero" value="" />
<input type="Submit" value="Buscar Genero" /><br/>
(Dejar vacio para ver todas las peliculas.)<br/>
</div>
</form>
Leyendo los Valores del Formulario
Request: es una solicitud o peticin que da un formulario.
Para eso Razor nos da un cdigo para obtener el valor que se da en el request.
var variablerequest = Request.QueryString["nameinput"];
El nameinput es el nombre que le dimos a la etiqueta input de texto, password, checkbox,
etc.
QueryString obtiene el valor de dicho input el cual fue transmitido al enviarse el
formulario. Por lo tanto, sera terrible que el usuario en dicho input no tome un valor, para
evitar eso podemos identificar si dicho elemento est vaco usando el mtodo IsEmpty, tal
y como se muestra a continuacin.
Request.QueryString["nameinput"].IsEmpty()
Por lo tanto podra hacer una condicional if para identificar si el elemento esta vaco o si
tiene un valor.
if(!Request.QueryString["nameinput"].IsEmpty() ) {
// Acciones si no est vaco
}
else{
//Acciones si esta vaco
}
Notese que usamos en la condicional, esto representa una negacin, es decir no, segn
el lgebra booleana si tengo la proposicin no p y esta es igual a true, esta ser falsa, y
pasara lo mismo en caso contrario, es decir un false se volver true.
El Objeto Request
Este objeto contiene toda la informacin que el navegador enva a su aplicacin cuando
esta es enviada o solicitada. Esta informacin es la que el usuario provee al realizar una
accin.
El objeto request es una coleccin de valores, t obtienes un valor individual fuera de la
coleccin especificando su nombre: var algunvalor=Request["inputname"];
19
Request.Form da los valores de los elementos enviados de el formulario si es una
solicitud POST.
Request.QueryString da el valor en la URL de la solicitud.
http://mysite/myapp/page?request=valorinput&request2=valor
?request=valorinput&request2=valor es la seccion de la url que es enviada.
Request.Cookies da la colecion para aceder a la cookies que el navegador ha enviado.
Por lo tanto para su uso, puedo usarlas de la siguiente manera:
Request.Form["elementoform"]
Request.Cookie["elementocookie"]
Creando una Consulta para usar un trmino de busqueda
Ahora que ya comprendemos bases de datos y formularios vamos a crear una consulta a
una base de datos SQL con un trmino de bsqueda.
Comprendemos exactamente que para consultar datos usamos un SELECT.
SELECT * FROM nombre_tabla
SELECT campo FROM nombre_tabla
SELECT campo1,...,campon FROM nombre_tabla
Donde campo es el nombre de la fila de la tabla.
Pero necesitamos encontrar dentro de nuestra tabla sea cual sea a travs de un trmino
de bsqueda, por lo tanto debo usar las condicionales que ofrece SQL.
Esta condicional es el WHERE, cuya sintaxis es la siguiente.
SELECT ... FROM nombre_tabla WHERE campocondicion=valorcampo
Puedes usar distintos operadores como:
= Igual a
<> Diferente de
>= Mayor o igual
<= Menor o igual
> Mayor que
< Menor que
LIKE es usado en el WHERE para bsqueda por patrones.
Pasando un trmino de bsqueda como parmetro
Como siempre lo he dicho los lenguajes de programacin nos ofrecen siempre muchos
mtodos para realizar lo mismo, uno es fcil y el otro puede ser ms complejo, hablare de
ambos mtodos de cmo obtener la cadena de seleccin para hacer la solicitud de los
datos.
El primero consiste en concatenar dentro de la cadena select el parmetro de bsqueda.
C# me permite hacer una concatenacin usando el signo +, de esa forma creo la
concatenacin de la siguiente manera:
Si el campo es numerico.
"SELECT ... FROM nombre_tabla WHERE campocondicion="+valordelcampo
Si el campo es una cadena.
"SELECT ... FROM nombre_tabla WHERE campocondicion='"+valordelcampo+"'"
Es un mtodo sencillo para generar la cadena de la consulta con condiciones para ser
enviado y se muestren nuestros datos.
20
Otro mtodo es usando placeholder. Un placeholders es un comodn que usamos en la
cadena de consulta select para hacerlo ms seguro pero a su vez un poco ms
complicado si no entiendes lo que se hace.
El placeholder es el carcter @ seguido por el numero 0 (@0). Si quieres poner ms
placeholders puedes llamarlos as @0, @1, @2, etc.
Para poder hacer la consulta y actualizar el valor pasado, t debes usar el siguiente
cdigo:
selectcommand="SELECT ... FROM nombre_tabla WHERE campo=@0";
selectdata=db.Query(selectcommand, Request.QueryString["nameinput"]);
La consulta contiene un placeholder @0
La consulta esta introducida en la variable selectcommand antes tu pasa la
consulta directamente al metodo db.Query.
Cuando t llamas al metodo db.Query, t pasas la consulta select y el valor para
usar en el placeholder. Si la consulta tiene mltiples placeholders t debes separar
todos los valores para el mtodo.
El placeholder se usa por seguridad, ya que si envas una cadena concatenada se puede
exponer a un ataque tu base de datos y eso sera algo que perjudicara nuestra
aplicacin.
Ahora ya con todos estos conocimientos es bueno hacer una pgina para afianzar ms
los conocimientos y ver cmo funciona.
El primer paso es crear una pgina cshtml, la cual llamaremos datos.cshtml
Este ser el cdigo de nuestra pgina:
@{
//Abrimos la base de datos y hacemos la consulta
var db=Database.Open("peliculasadfo");
var termino = "";
//Preguntamos si se envian los datos por el formulario
if(!Request.QueryString["txtgenero"].IsEmpty() ) {
//termino es lo que enva el usuario
termino = Request.QueryString["txtgenero"];
seleccionardatos = db.Query("SELECT * FROM peliculas WHERE Genero = @0",
termino);
}
rowsPerPage:4);
}
<!DOCTYPE html>
<html lang="en">
<head>
21
h1 {
font-size: 16px;
font-weight: bold;
}
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
</style>
</head>
<body>

<form method="get">
<div>
<label for="txtgenero">Gnero para ver:</label>
<input type="text" name="txtgenero" value="@Request.QueryString["txtgenero"]" />
<input type="Submit" value="Buscar Genero" /><br/>
</div>
</form>
<h1>Resultados</h1>
@grid.GetHtml(
tableStyle: "grid",
grid.Column("Ao")
))
</body>
</html>
Notaran que en el formulario esta la siguiente etiqueta con los siguientes atributos:
<input type="text" name="txtgenero" value="@Request.QueryString["txtgenero"]" />.
De esta forma permito que cuando el usuario teclee el gnero de la pelcula se pueda ver
en el input de texto despus de ser enviado.
Aumentare la complejidad del ejercicio, para eso aumentare los inputs de bsqueda y
donde se pondrn dos placeholders para buscar gracias a esos patrones, estos patrones
son el gnero y el ttulo de la pelcula, donde el ttulo es un indicio.
Este sera el cdigo HTML y Razor de la pgina, me permitir hacer lo que he sugerido
anteriormente dando a conocer mejor lo que hace Razor en las bases de datos.
22
@{
var db=Database.Open("peliculasadfo");
var termino = "";
var termino1="";
if(!Request.QueryString["txttitulo"].IsEmpty() &&
!Request.QueryString["txtgenero"].IsEmpty() ) {
termino1= "%" + Request.QueryString["txttitulo"] + "%";
seleccionardatos = db.Query("SELECT * FROM peliculas WHERE Genero=@0 AND
Titulo LIKE @1", termino,termino1);
}
else if(Request.QueryString["txttitulo"].IsEmpty() &&
//termino es lo que envia el usuario
seleccionardatos = db.Query("SELECT * FROM peliculas WHERE Genero = @0",
termino);
}
else if(!Request.QueryString["txttitulo"].IsEmpty() &&
Request.QueryString["txtgenero"].IsEmpty() ) {
termino ="%" + Request.QueryString["txttitulo"]+"%";
seleccionardatos = db.Query("SELECT * FROM peliculas WHERE Titulo LIKE
@0", termino);
}
else{
seleccionardatos=db.Query("SELECT * FROM peliculas");
}
rowsPerPage:4);
}
<!DOCTYPE html>
<html lang="en">
<head>
h1 {
font-size: 16px;
font-weight: bold;
}
width: 600px; }
padding: 5px; }
color: #FFF; }
</style>
23
</head>
<body>
<form method="get">
<div>

<input type="text" name="txtgenero"
value="@Request.QueryString["txtgenero"]" /> <input type="Submit" value="Buscar
Genero" /><br/>
<br>
<label for="txtgenero">Titulo de la Pelicula:</label>
<input type="text" name="txttitulo"
value="@Request.QueryString["txttitulo"]" />
<input type="Submit" value="Buscar por Titulo" /><br/>
</div>
</form>
<h1>Resultados</h1>
@grid.GetHtml(
tableStyle: "grid",
grid.Column("Ao")
))
</body>
</html>
As sera el resultado de la pgina, de esta forma habris conocido a hacer una seleccin
de datos.
Se pueden ver los datos de otra manera pero se ver eso ms adelante, por ahora
dejmoslo en datagrid y pasemos a ver los temas que nos faltan.
24
Ingresando Datos a una tabla usando Formularios
Qu Construirs?
En los tutoriales hemos conocido un poco acerca de Razor con c#, ya manejamos el
select manejando placeholders para hacer nuestras selecciones, ya con esos
conocimientos empezamos a insertar datos a nuestra base con un formulario HTML.
En esta ocasin crearas una pgina CSHTM donde el usuario ingresara nuevas pelculas,
esta pgina tendr un formulario con textboxes donde se deber entrar el ttulo, gnero y
ao de una pelcula.
Creando el Formulario Bsico de Entrada
Crea una pgina CSHTM llamada agregarpelicula.cshtml
Aadirs el siguiente texto a tu archivo modificando solo la parte del html sin tocar el @{}.
<!DOCTYPE html>
<html>
<head>
<title>Agregar Pelicula</title>
</head>
<body>
<h1>Agregar Pelicula</h1>
<fieldset>
<legend>Informacin de la Pelicula</legend>
<p><label for="txttitulo">Titulo:</label>
<input type="text" name="txttitulo" value="@Request.Form["txttitulo"]" />
</p>
<p><label for="txtgenero">Genero:</label>
<input type="text" name="txtgenero" value="@Request.Form["txtgenero"]" />
</p>
<p><label for="txtyear">Ao:</label>
<input type="text" name="txtyear" value="@Request.Form["txtyear"]" />
</p>
<p><input type="submit" name="btnsubmit" value="Agregar Pelicula" /></p>
</fieldset>
</form>
</body>
</html>
Como podemos ver usamos las etiquetas fieldset y legend las cuales me permiten ponerle
el nombre a un conjunto de inputs en un formulario, y no solo eso pueden notar adems
que no uso el verbo GET, si no que uso el verbo POST debido a lo que se explic en
captulos anteriores.
Cada formulario como pueden ver recibe los valores que son enviados, aunque despus
se modificara debido a que me gusta que existan buenas practicas, por ende quiero decir
que siempre a los nombres de cada input les agrego una preposicin como txt para
25
textbox, btn para botones, psw para password, etc. Esto lo hago y quizs t lo hagas para
buscar rpidamente los elementos del input y poderlos diferenciar.
Obteniendo Valores del Formulario
Ahora, tendrs que agregar cdigo para procesar el formulario, debers hacer lo
siguiente:
1. Chequear que la pagina ha sido enviada. T quieres que ese cdigo corra cuando los
usuarios dan clic en el botn y no antes cuando la pgina carga en el navegador.
2. Obtendrs los valores que el usuario pone en los inputs. En este caso, porque el
formulario est siendo enviado a travs de un post, tu obtendrs los valores desde la
coleccin request.Form.
3. Insertar los valores como un nuevo registro en la tabla de la base de datos.
En la parte superior del archivo escribir el siguiente cdigo:
@{
//inicializamos variables
var titulo = "";
var genero = "";
var year = "";
//comprobamos si el usuario dio clic en agregar pelcula
//comprobando el evento post
if(IsPost){
//Obtiene los valores de los inputs de texto
titulo = Request.Form["txttitulo"];
genero = Request.Form["txtgenero"];
year = Request.Form["txtyear"];
}
}
Los comentarios nos muestran un poco de lo que se hace, por lo tanto ya hemos hecho el
cdigo necesario para que se pueda hacer una insercin de datos a nuestra tabla.
Agregando Datos a la Base de Datos
Suena redundante el ttulo, pero vamos a ver como insertar datos a la tabla, ya
anteriormente en el mostrar datos hablamos de los comodines, pues esta vez no ser la
excepcin. Para eso debemos comprender el SQL de un INSERT, este INSERT me
permite agregar datos a la tabla de una base de datos, la sintaxis es:
INSERT INTO tabla (columna1, columna2, columna3, ...) VALUES (valor1, valor2, valor3,
...)
Donde se debe poner el nombre de la tabla, las columnas a las cuales se les dar los
valores y los valores que estas deben contener, si es de tipo fecha o texto se debe poner
la comilla sencilla rodeando el valor a poner, la comilla sencilla es esta ', me explico para
darme a entender, si tengo por ejemplo el nombre del gnero, debo ponerlo como se
muestra a continuacin 'Accin'. Ya conociendo la sentencia INSERT de SQL
procedemos ahora a hacer el cdigo para insertar nuestros valores a nuestra tabla.
//Abro mi base de datos
//Genero mi cadena INSERT de SQL
26
var comandoinsertar = "INSERT INTO peliculas (Titulo, Genero, Ao) VALUES(@0, @1,
@2)";
//Ejecuta el comando INSERT a la base de datos
db.Execute(comandoinsertar, titulo, genero, year);
Notamos algo, y es que los campos de la tabla a los cuales das valores es a Titulo,
Genero y Ao ya que el Id es auto numrico, por lo tanto no me intereso mucho por este
campo ya que el motor de base de datos le asigna valor automticamente.
Seguido de eso el usuario necesita saber si la base de datos ha registrado lo que l ha
escrito, para eso debemos direccionarlo a nuestra pgina donde tenemos el select, para
eso usamos lo siguiente:
Response.Redirect("~/carpeta/paginaselect.cshtml");
Response.Redirect("~/paginaselect.cshtml");
Response.Redirect("~/paginaselect");
De esa forma sabremos que lo que escribe el usuario est siendo escrito en nuestra base
de datos.
Validando las Entradas de Usuario
Resulta que a veces nuestro usuario se les olvida u omiten algunos valores que se solicita
en la tabla para hacer la fila. En mi caso yo no quiero que el usuario tenga un valor vaco,
ya que nulo en la mayora de veces no puede ser, me explico para aquellos que quizs no
entendieron acerca del valor nulo, supongamos lo siguiente:
Escribo una variable y la inicializo, por ejemplo que var nombre="";.
Una vez hecho eso mi variable tiene como valor "" el cual podramos definir como un
carcter que no tiene espacio, pero que para SQL no es nulo y por lo tanto es un valor
valido, es decir el vaco en programacin existe y por lo tanto no es un valor nulo.
Ahora bien si a esa variable nombre no la inicializo, la variable obtiene un valor nulo ya
que no existe, ya que no tiene ningn valor, recordemos que nulo es algo que no existe o
que no se le ha dado un valor.
Los datos que enva nuestro usuario no son nulos si no vacos, ya que la caja de texto
textbox tiene como valor por defecto un "", es decir un string o cadena que tiene un valor
vaco, entonces el input de texto que enva nuestro usuario es vaco, por lo tanto SQL
puede registrar elementos vacos.
Validando con un Helper
Anteriormente vimos cmo se instala un helper y lo usamos para un gravatar, ahora
usaremos estos helpers para hacer las respectivas validaciones de los datos solicitados al
usuario.
Para eso usamos el helper Validation, este me permite validar que los datos estn
correctos, para validar estos datos t hars lo siguiente:
Usar cdigo para especificar qu valores requieres en las cajas de texto de la
pgina.
Haz una prueba en el cdigo as que la informacin de la pelcula es agregada a la
base de datos solo si cada campo ha sido validado.
Agrega un cdigo para mostrar mensajes de error.
27
Validation nos ofrece un mtodo que nos permite hacer identificar si el campo tiene algn
valor, y para eso usaremos la siguiente
sintaxis:
Validation.RequireField("nameinput","Mensaje de error");
Es fcil de entenderlo, nos pide el nombre del input y el mensaje que mostraremos si
nuestro usuario no escribe nada en dicho campo.
Ahora queremos saber si las validaciones se hicieron correctamente para que se pueda
hacer la insercin en la tabla de la base de datos, para eso usamos lo siguiente:
Validation.IsValid()
Esta validacin devuelve un True o un False si se cumple o no las validaciones.
Por lo tanto con el ejercicio que estamos haciendo debe quedar el siguiente cdigo:
Validation.RequireField("txttitulo","Debes ponerle el ttulo");

Validation.RequireField("txtgenero","Debes poner un gnero");
Validation.RequireField("txtyear","El ao no debe estar vaco");
var titulo = "";
var genero = "";
var year = "";
if(IsPost && Validation.IsValid()){
var comandoinsertar = "INSERT INTO peliculas (Titulo, Genero, Ao) VALUES(@0,
@1, @2)";
Response.Redirect("~/webgrid");
}
Pero ahora tenemos que hacer algo, tenemos que mostrar los errores de los campos no
validados y que por ende tienen un valor vaco, esta parte ya corresponde a nuestro html,
como mostraremos ese error y advertiremos a nuestro usuario que ese campo debe estar
completo.
Como podrn notar en este manual se muestra dos formas para hacerlo.
La primera es mostrar los mensajes a traves de una lista, para eso usaremos el siguiente
comando:
@Html.ValidationSummary()
El segundo metodo es poner el mensaje de error en los inputs, ya sea debajo, al lado, etc.
Se usa para eso el siguiente comando:
@Html.ValidationMessage("nameinput")
Cabe recordar que nameinput es el nombre del input.
Dando estilos para los Mensajes de Error
Los mensajes de errores que usa Validation, son mensajes de texto, por lo tanto puedo
crear los estilos y poner las clases creadas en una etiqueta de texto.
Primero creemos los estilos, los estilos irn en el <head>, los estilos sern:
28
.field-validation-error {
font-weight:bold;
color:red;
}
.validation-summary-errors{
border:2px dashed red;
color:red;
font-weight:bold;
margin:12px;
}
</style>
Donde el primero es para los errores al lado del input y el otro es para la lista de errores.
Tu puedes poner los css en un archivo .css, pero para simplificar los ejemplos lo haremos
en el archivo cshtml.
Estilos para el error en el input.
<span class="field-validation-error">@Html.ValidationMessage("nameinput")</span>
Estilos para la lista de errores.
<span class="validation-summary-errors"> @Html.ValidationSummary()</span>
Agregando un Link
Creo que en una tutora anterior, hablamos de como redireccionar con razn, ahora
veremos un breve ejemplo de cmo hacerlo con un vnculo.
<p>
<a href="~/nombrepagina">Add a movie</a>
</p>
No siendo ms y para terminar mostrare el cdigo y los pantallazos de lo que sera
nuestro producto final.
Este sera nuestro cdigo:
@{
var titulo = "";
var genero = "";
var year = "";
var comandoinsertar = "INSERT INTO peliculas (Titulo, Genero, Ao) VALUES(@0,
@1, @2)";
}
29
}
<!DOCTYPE html>
<html>
<head>
<title>Agregar Pelicula</title>
font-weight:bold;
color:red;
}
color:red;
font-weight:bold;
margin:12px;
}
</style>
</head>
<body>
<fieldset>
<input type="text" name="txttitulo" value="@Request.Form["txttitulo"]"
/>
<br>
<span class="field-validation-
error">@Html.ValidationMessage("txttitulo")</span>
</p>
<input type="text" name="txtgenero" value="@Request.Form["txtgenero"]"
/>
<br>
error">@Html.ValidationMessage("txtgenero")</span>
</p>
<input type="text" name="txtyear" value="@Request.Form["txtyear"]" />
<br>
error">@Html.ValidationMessage("txtyear")</span>
</p>
<p><input type="submit" name="btnsubmit" value="Agregar Pelicula" /></p>
</fieldset>
<span class="validation-summary-errors"> @Html.ValidationSummary()</span>
</form>
</body>
</html>
30
Esto sera lo que se ver en nuestro navegador:
Con un campo vaco se vera asi:
Ahora veremos lo que es actualizar nuestra base de datos.
31
Actualizando Data de una Base de Datos
Qu haremos?
En el anterior tutorial aprendiste acerca de cmo guardar registros en la base de datos?,
ahora aprenders como se editan los datos, en caso de que nuestro usuario escriba una
informacin o dato mal, y este desee corregirlo. Empecemos.
Adicionar un vnculo para Editar
Para empezar crearemos una pgina llamada editarpelicula.cshtml.
Seguido de eso iremos a la pgina donde mostramos nuestras pelculas en un
gridview.
El gridview llevara un link que nos llevara a la pgina editarpelicula, llevando consigo en la
URL el id de la pelcula. Se usara el siguiente cdigo para aadir la columna:
grid.Column(format: @<a href="~/editarpelicula?id=@item.ID">Editar</a>)
En este cdigo agregamos una nueva columna llamada editar y tomamos el ID de nuestra
pelcula, el cual ser pasado a otro archivo CSHTML para ser modificado los datos. Una
vez puesto ese cdigo en nuestra grilla debemos empezar con nuestra pgina de
modificacin de datos.
Nuestra grilla quedara as:
@grid.GetHtml(
tableStyle: "grid",
grid.Column(format: @<a href="~/editarpelicula?id=@item.ID">Editar</a>),
grid.Column("Ao")
));
Creando una columna personalizada en una Grid
Veremos algo para complementar la grid de la vista de nuestros datos, como es un cdigo
HTML que se nos forma para que lo visualice nuestro usuario yo como su desarrollador
puedo personalizarlo y poner en la grilla etiquetas HTML.
En la pgina vern que pusimos como cdigo grid.Column("nombredecolumna"), pero
ahora razor me ofrece la oportunidad de que yo pueda ponerle etiqueta HTML a esa
columna, es decir, que esa columna se vea distinta a
las demas, entonces puedo poner lo siguiente:
grid.Column(format:@<etiquetahtml>@item.columnatabla</etiquetahtml>)
Este cdigo que puse al final indica que format me permite aadir HTML al cdigo del
grid, por ende una vez haces eso t debes poner el item a mostrar, en este caso
pretendemos mostrar datos, pero como los mostramos, usamos la clase item, que
almacena los datos que se obtienen en la consulta, entonces determinamos que
columnatabla es el nombre de la columna de nuestra tabla que est en la base de datos.
La pgina de actualizacin
Hace mucho creamos nuestra pgina editarpelicula.cshtml.
32
Que nos falta en ella, solo el contenido para mandar nuestros datos, para eso aadiremos
en el html el siguiente cdigo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Editar una Pelcula</title>
<style>
color:red;
font-weight:bold;
margin:12px;
}
</style>
</head>
</head>
<body>
<h1>Editar Pelcula</h1>
<fieldset>
<legend>Informacin de Pelcula</legend>
<p><label for="txttitulo">Ttulo:</label>
<input type="text" name="txttitulo" value="@titulo" /></p>
<p><label for="txtgenero">Gnero:</label>
<input type="text" name="txtgenero" value="@genero" /></p>
<input type="text" name="txtyear" value="@year" /></p>
<input type="hidden" name="idpelicula" value="@peliculaID" />
<p><input type="submit" name="btnguardarcambios" value="Guardar Cambios"
/></p>
</fieldset>
</form>
</body>
</html>
Si notan esta pgina es igual a la que usamos para ingresar nuestras pelculas, en esta
ocasin la usaremos para editar y si miran los inputs cada uno tiene un value que tiene la
forma @variable, donde cada uno de esos valores corresponde a un valor de nuestra
pelcula, como lo son el ID, titulo, gnero y el ao.
En esta ocasin nuestra pgina deber tomar los valores del ID de la pelcula a la cual
editaremos y deber mostrar los datos, siendo estos guardados en una variable, para eso
debemos agregar un cdigo Razor para leer el ID de la pelcula seleccionada y que se
nos muestre los datos a cambiar, el cdigo es:
var titulo = "";

var genero = "";
var year = "";
var peliculaID = "";
if(!IsPost){
if(!Request.QueryString["id"].IsEmpty()){
peliculaID = Request.QueryString["id"];
33
var dbCommand = "SELECT * FROM peliculas WHERE ID = @0";
var row = db.QuerySingle(dbCommand, peliculaID);
titulo = row.Titulo;
genero = row.Genero;
year = row.Ao;
}
else{
Validation.AddFormError("No tienes seleccionada una pelicula.");
}
}
Recuerda que este cdigo debe ir en el @{}.
Con este cdigo tomamos nuestro ID de pelcula para mostrar los valores que tenemos en
la tabla de acuerdo a una pelcula, veremos algunos cdigos nuevos para poder
entenderlos y saber para que nos sirven.
Request.QueryString["variable"] me permite leer una variable que pasamos a travs de
la URL. En nuestro ejemplo vemos que nos permite leer la id de nuestra pelcula.
var row = db.QuerySingle(cadenaselect, placeholder) este cdigo me permite
almacenar una consulta donde se tiene una sola fila la cual contiene los valores que
usaremos para su respectiva modificacin. Notamos en el cdigo que row adquiere los
valores de los nombres de las columnas de nuestra tabla como si fuesen variables de una
clase las cuales podemos usar despus.
row.nombrecolumna esto permite obtener el valor que necesitamos de acuerdo a la fila y
columna que se est necesitando, podemos determinar que row es una variable que
puede obtener otros nombres convirtindose con el mtodo QuerySingle en una clase que
adquiere como propiedades los nombres de las columnas de la tabla.
Para no enredar ni complicar el tutorial, con ese cdigo y con estos mtodos podemos
obtener los valores para mostrar en nuestra pgina web razor a travs de un valor pasado
por una URL.
Actualizando los Datos
Ahora ya debemos poner a funcionar nuestro botn submit, una vez hecho eso podremos
hacer que nuestro usuario pueda modificar las pelculas ingresadas si ha cometido un
error, para eso usaremos un cdigo que es parecido al de registrar una pelcula, solo que
en esta ocasin nos servir para actualizar. Pero antes conoceremos la sentencia sql que
nos sirve para actualizar a travs del siguiente cdigo:
UDAPTE nombretabla SET columna1='valor',columna2='valor',...columnan='valor'
WHERE columnacondicion=valor
Udapte en lenguaje SQL me permite actualizar el valor de un campo o varios campos a
travs de una condicin, sin esa condicin puedo actualizar los valores de todas las
pelculas generando un error. Actualizar significa modificar o cambiar dichos valores por
otro que al final usaremos.
Finalmente este es el cdigo que usaremos para que se actualice nuestra pgina y
nuestro usuario corrija los errores que cometi al ingresar su pelcula.
34
if(IsPost){
Validation.RequireField("idpelicula", "No existe la pelicula!");
peliculaID = Request.Form["idpelicula"];
if(Validation.IsValid()){
var updateCommand = "UPDATE peliculas SET Titulo=@0, Genero=@1,
Ao=@2 WHERE ID=@3";
db.Execute(updateCommand, titulo, genero, year, peliculaID);
}
}
}
Comprobando que el ID es numrico

Siempre para que un usuario no quede viendo errores en nuestra pgina, debemos tratar
de conocerlos y darles una solucin, un error comn es que a veces con la URL es que el
usuario puede poner una a o un valor no numrico mostrando un error, y eso es lo
queremos evitar, para eso debemos decirle que si en realidad el valor dado es un numero
entero y decirle al usuario que no hay ningn error en eso, para determinar que un valor
es entero usamos el mtodo isInt(), que nos devolver true o false segn el caso, veamos
cmo usarlo al solicitar el valor del ID de la pelcula a nuestro cliente:
Request.QueryString["ID"].IsInt()
Usaremos este cdigo en una condicional if, y en caso de ser errneo le mostraremos al
usuario el error.
Comprobando que las filas no estn vacas
Una de las cosas que ms preocupa a un programador son los errores en tiempo de
ejecucin, pero aun as algo que nos da miedo es que el usuario vea esos errores o que
un hacker pueda acceder a nuestras tablas, para evitar esos errores debemos comprobar
cada sentencia y la que actualmente me preocupa es saber si la fila tiene algn valor.
Para eso usaremos la variable que usamos para guardar los valores de nuestra consulta a
la base de datos, en este ejercicio la llamamos row, comprobaremos que no est vaca a
travs del siguiente cdigo:
if(row!=null){
//sentencias si esta correcta
}
En esta condicin estamos diciendo que row no tenga un valor nulo o que no exista, as
evitamos que cuando nuestro usuario escriba o modifique la URL un valor que no existe,
supongamos que tenemos cincuenta registros y nuestro usuario escriba 100, es un valor
que no existe y por lo tanto enviara un error en la sentencia.
35
Agregando un Vnculo para regresar a ver nuestras pelculas
Ahora para finalizar queremos que en caso de que nuestro usuario no quiera modificar la
pelcula pueda regresar a ver las pelculas que tenga almacenadas, como siempre
hacemos un link simple que dice as:
<p><a href="~/webgrid">Regresar a la Lista de Pelculas</a></p>
Con esto hemos terminado la parte de este tutorial, ahora solo nos queda algo por hacer
en nuestra base de datos la cual veremos a continuacin. Ahora dejare cual es el cdigo
de la pgina que hemos realizado.
@{
var titulo = "";
var genero = "";
var year = "";
if(!IsPost){
if(!Request.QueryString["id"].IsEmpty() &&
Request.QueryString["ID"].IsInt()){
if(row!=null){
year = row.Ao;
}
else{
titulo = "No Data";
genero = "No Data";
year = "No Data";
}
}
else{
Validation.AddFormError("No tienes seleccionada una pelicula.");
}
}
if(IsPost){
Validation.RequireField("idpelicula", "No existe la pelicula!");
var updateCommand = "UPDATE peliculas SET Titulo=@0, Genero=@1,
Ao=@2 WHERE ID=@3";
db.Execute(updateCommand, titulo, genero, year, peliculaID);
36
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Editar una Pelcula</title>
<style>
color:red;
font-weight:bold;
margin:12px;
}
</style>
</head>
</head>
<body>
<fieldset>
<input type="text" name="txttitulo" value="@titulo" /></p>
<input type="text" name="txtgenero" value="@genero" /></p>
<input type="hidden" name="idpelicula" value="@peliculaID" />
<p><input type="submit" name="btnguardarcambios" value="Guardar Cambios"
/></p>
</fieldset>
</form>
</body>
</html>
37
Eliminando Datos
Qu construirs?
Hemos aprendido mucho acerca de usar Razor y la manipulacin de una base de datos,
hemos aprendido acerca de registrar, seleccionar y actualizar datos en una tabla, ahora
veremos algo que es importante, eliminar dicho registro para no volver a verlo o
simplemente que a nuestro usuario no le gusto la pelcula.
Agregando un Vnculo para Eliminar la Pelcula
Esto es muy parecido al que hicimos en modificar, en esta ocasin vamos a eliminar los
datos, as que usaremos el siguiente valor:
grid.Column(format: @<a href="~/eliminarpelicula?id=@item.ID">Eliminar</a>)
De esta forma aseguramos los valores que vamos a eliminar y que el usuario si se
arrepiente de eliminar regrese a la vista de los datos.
Creando la pgina para eliminar
Ahora crearemos la pgina eliminarpelicula.cshtml.
Esta pgina nos permitir eliminar la pelcula que nuestro usuario selecciono para que ya
no aparezca ms en nuestra tabla, empecemos a crear esta pgina la cual tendr el
siguiente cdigo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eliminar Pelcula</title>
</head>
<body>
<h1>Eliminar Pelcula</h1>
<fieldset>
<p><span>Titulo:</span>
<span>@titulo</span></p>
<p><span>Genero:</span>
<span>@genero</span></p>
<p><span>Ao:</span>
<span>@year</span></p>
<input type="hidden" name="peliculaid" value="@peliculaId" />
<p><input type="submit" name="btneliminar" value="Eliminar
Pelcula" /></p>
</fieldset>
</form>
</body>
</html>
Anteriormente vimos este cdigo a travs de la pgina editar, el cual tomara los valores
de la tabla pelculas de nuestra base de datos para verlos ms adelante y as el usuario
sabr que est eliminando:
@{
38
var titulo = "";
var genero = "";
var year = "";
var peliculaId = "";
if(!IsPost){
Request.QueryString["id"].IsInt()){
peliculaId = Request.QueryString["id"];
var row = db.QuerySingle(dbCommand, peliculaId);
if(row != null) {
year = row.Ao;
}
else{
Validation.AddFormError("La pelcula no fue encontrada,
ID incorrecto.");
}
}
else{
Validation.AddFormError("Pelcula no fue encontrada por el
ID.");
}
}
}
Agregando el cdigo para eliminar
Finalmente agregaremos el cdigo para eliminar un registro, pero para eso vamos a
conocer lo que es su sentencia SQL, la sentencia SQL para eliminar un registro de una
tabla es:
DELETE FROM tabla WHERE columnacondicion = valor
Estamos diciendo que elimine desde la tabla el registro donde se cumple la condicin,
algo que siempre le digo a muchos y te dir a ti, no olvides de poner el WHERE en un
DELETE FROM, ya que podra generar un problema y recuperar esos datos seria difcil o
muy poco sencillo.
Para no alargar este tutorial se enseara como se hace un DELETE de un registro usando
Razor, debes saber que es parecido a UPDATE, solo que cambia lo que se hace, veamos
el cdigo para desglosarlo y entenderlo mejor.
if(IsPost && !Request["btneliminar"].IsEmpty()){

peliculaId = Request.Form["peliculaId"];
var deleteCommand = "DELETE FROM peliculas WHERE ID = @0";
db.Execute(deleteCommand, peliculaId);
}
39
Lo nico que podemos ver qu cambio es el hecho de que debemos saber cul es el
botn que enva el formulario, en este caso lo vemos a travs del cdigo
!Request["btneliminar"].IsEmpty(), de lo dems es muy parecido a lo que hemos visto, en
conclusin esto es lo relacionado con eliminar y con el propsito de la primera parte del
manual de Pginas Web con Razor.
Este sera el cdigo para nuestra pgina de eliminar.
@{
var titulo = "";
var genero = "";
var year = "";
if(!IsPost){
if(row != null) {
year = row.Ao;
}
else{
Validation.AddFormError("La pelcula no fue encontrada,
ID incorrecto.");
}
}
else{
Validation.AddFormError("Pelcula no fue encontrada por el
ID.");
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eliminar Pelcula</title>
</head>
<body>
40
<fieldset>
<p><span>Ao:</span>
<input type="hidden" name="peliculaid" value="@peliculaId" />
Pelcula" /></p>
</fieldset>
</form>
</body>
</html>
Ahora solo nos queda ponerle aspecto para que se vea mejor nuestra pgina ante los ojos
del usuario.
Este sera el aspecto de nuestra pgina donde se visualizan las pelculas.
41
Esta sera la pgina cuando damos clic en editar, as sera su aspecto en estos
momentos.
42
Crear un Diseo Consistente
En este tutorial vamos a crear una vista para nuestros datos y para nuestro sitio web, que
sea visible y amigable con el usuario.
Acerca de los Diseos (Layouts)
Estamos viendo una pgina que pues ser sincero, es muy simple y poco atractiva, un
diseo de una pgina web siempre est dividido en tres partes, las cuales son:
Header: en esta se tiene el nombre del sistema, sitio web, etc. Es decir nuestro
encabezado.
Content: En esta parte tenemos nuestro contenido, es decir, textos, formularios,
imgenes, etc.
Footer: en esta parte siempre se pone el creador del sitio, aunque otros diseadores lo
usan para otros fines.
Podemos ver un ejemplo desde la pgina de youtube, este ejemplo define una pgina
organizada y a la cual nosotros queremos llegar a crear.
Microsoft nos dice que crear paginas por separado es muy molesto y nos sugiere que
creemos una sola pgina utilizando lo que conocemos como layouts, estos layouts nos
ahorra el trabajo de crear la misma pgina una y otra vez, y solo generar una sola pgina
la cual muchos llamamos como pgina maestra que contendr nuestro header, nuestro
footer pero lo que si permitir que es distinto es el content.
Si queremos comprenderlo, hagamos y entendamos lo sencillo que es crear estos layouts
para usarlos en un futuro. Dejare un ejemplo el cual nos mostrara como se usan los
layouts.
Agregando una Pagina Layout
T empezaras creando una pgina de diseo que define una tpica pgina con un header,
un footer y un rea para nuestro contenido. En el sitio web que creamos, agregaremos
una pgina llamada _layout.cshtml. El subrayado es de carcter significativo. Si una
pgina con nombre empezado con un guion al piso, ASP.NET no enviara esa pgina en el
navegador. Esta convencin permite definir pginas que son requeridas para su sitio pero
que los usuarios no debern ser capaces para dirigirse a ellas.
Remplazando el contenido en la pgina con el siguiente cdigo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mi Sitio de Pelculas</title>
<link href="~/estilos/estilos.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<header>
<h1>Mi Sitio de Pelculas</h1>
</header>
<div id="contenido">
@RenderBody()
</div>
43
<footer>
Creado por nombredeempresa © @DateTime.Now.Year
</footer>
</body>
</html>
Hemos dividido en tres secciones nuestro layout, si ven est dividido en el header, footer
y content, usando en gran parte HTML5. Notamos en el footer algo que dice
@DateTime.Now.Year, el cual es un cdigo razor para obtener el ao actual. Vemos el
&copy el cual genera el smbolo de derechos de copia, y finalmente Creado por
nombreempresa, donde nombreempresa puede ser el nombre de la empresa creadora o
el autor.
@RenderBody() va a ser el que me permitir el cambio entre los contenidos de las
paginas, de esa forma veremos el cambio de la pgina a travs del diseo que tenemos
en cada uno.
Finalmente hemos aadidos estilos usando la etiqueta del head <link> apuntando a la
carpeta estilos y el nombre del archivo estilos.css, no entrare en detalles pero debes
saber que es importante para tener un mejor aspecto.
Agregando un Archivo .css
La forma preferida para darle aspecto a un sitio es a travs de estilos css(cascading style
sheet), para crear un estilo y tener un orden, generalmente lo guardamos en una carpeta,
esa carpeta seria estilos, tambin podras llamarla css, style, etc. Pero recuerda que la
carpeta que crees guardara todos tus estilos, algo que tambin deberas saber es que
siempre debemos ponerles orden a tus sitios web, en una carpeta guardaras tus
imgenes, en otras tus estilos, y en otra carpeta lo que desees, esto te facilitara buscar
las cosas y adems crear una pgina web compleja y fcil de entender.
Ahora lo primero que haremos ser crear una carpeta la cual llamaremos estilos.
44
Seguido de eso creamos nuestro archivo de estilos llamado estilos.css.
45
Ahora crearemos nuestro css para mejorar el aspecto de nuestro sitio web, estos seran
nuestros estilos:
/*Etiqueta HEADER*/
header{
font-weight: bold;
color: #000000;
width: 100%;
text-align: center;
border-bottom: 4px ridge #303030;
margin-bottom: 4px;
}
/*h1 header*/
header h1 {
font-size: 24px;
font-family: Tahoma,serif;
}
/* estilos del contenido*/
#contenido{
width: 100%;
height: auto;
margin-bottom: 4px;
margin-top: 8px;
}
#contenido h1,h2,h3,h4,h5{
font-weight: bold;
font-size: 16px;
font-family: Georgia,serif;
}
/*Formularios*/
46
label{
font-family: Verdana,sans-serif;
font-size: 12px;
font-weight: bold;
}
input[type="submit"] {
padding: 4px;
font-weight: bold;
font-size: 14px;
}
input[type="text"] {
padding: 4px;
font-size: 14px;
width: 300px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
fieldset{-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px;
}
legend{font-weight: bold;
font-size: 14px;
font-family: Georgia,serif;}
/*Vinculos*/
a.botonlink{
font-size: 14px;
padding: 10px;
text-decoration: none;
background: #000000;
color: #ffffff;
}
a.botonlink:hover{background: #303030;}
a.botonlink:active{padding-bottom: 6px; padding-top: 6px;}
.grid tfoot{
font-weight: bold;
font-size: 14px;
padding: 10px;
height: auto !important;
padding-top: 5px;
47
padding-bottom: 5px;
}
.grid tfoot tr td a{
font-size: 14px;
padding: 10px;
color: #ffffff;
font-weight: normal;
}
.grid tfoot tr td a:hover{background: #303030;}
.grid tfoot tr td a:active{padding-bottom: 6px; padding-top: 6px;}
/*Estilos Footer*/
footer{
font-weight: bold;
font-size: 14px;
width: 100%;
text-align: center;
border-top: 4px solid #000000;
}
Estos estilos sern comunes en toda la pgina y sern de mucha ayuda para modificar el
aspecto de las paginas, aqu solo juego con los estilos, pero dejo esos cambios a criterio
de ti, tu puedes generar los estilos que desees e incluso hacer un aspecto mejor del
propuesto ac, puedes usar incluso bootstrap pero eso sera hablar de otro tema.
Actualizando el Diseo(Layout)
Para eso usamos el siguiente cdigo:
Layout = "~/_layout.cshtml";
Este cdigo me permite ingresar la plantilla a mi pgina tomando los estilos css que he
creado para mi pgina, adems si la implementas te ahorras de escribir el cdigo de tu
header y el cdigo del footer, que por ende no cambian mucho.
Pero algo que tampoco cambia es el ttulo as que para eso existe una solucin, ponemos
el siguiente cdigo en cada pgina:
Page.Title = "Ttulo de la pgina";
Esto pondr el ttulo de la pgina reemplazando a la etiqueta <title>.
Una vez hecho esto queda un paso por hacer, as es debemos eliminar el cdigo
innecesario para que nuestras pginas tomen el diseo y como llegar a decirlo, no sea tan
pesada en el tamao de cada archivo.
Para tener una idea mostrare ahora las pginas del proyecto con su respectivo cdigo y
ese sera nuestro resultado final, nuestro sitio web para agregar pginas, an no hemos
terminado de recorrer asp.net web pages razor, esto es solo el inicio para irlo
comprendiendo, porque lo que vendr a continuacin ayudara a que entres en este
mundo y puedas crear buenas aplicaciones usando la plataforma .NET.
Estas sern las pginas de nuestro proyecto:
48
estilos.css
/*Etiqueta HEADER*/
header{
font-weight: bold;
color: #000000;
width: 100%;
text-align: center;
border-bottom: 4px ridge #303030;
margin-bottom: 4px;
}
/*h1 header*/
header h1 {
font-size: 24px;
font-family: Tahoma,serif;
}
/* estilos del contenido*/
#contenido{
width: 100%;
height: auto;
margin-bottom: 4px;
margin-top: 8px;
}
#contenido h1,h2,h3,h4,h5{
font-weight: bold;
font-size: 16px;
font-family: Georgia,serif;
}
/*Formularios*/
label{
font-size: 12px;
font-weight: bold;
}
input[type="submit"] {
padding: 4px;
font-weight: bold;
font-size: 14px;
}
input[type="text"] {
padding: 4px;
font-size: 14px;
width: 300px;
-webkit-border-radius: 4px;
49
border-radius: 4px;
}
fieldset{-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px;
}
legend{font-weight: bold;
font-size: 14px;
font-family: Georgia,serif;}
/*Vinculos*/
a.botonlink{
font-size: 14px;
padding: 10px;
color: #ffffff;
}
a.botonlink:hover{background: #303030;}
a.botonlink:active{padding-bottom: 6px; padding-top: 6px;}
.grid tfoot{
font-weight: bold;
font-size: 14px;
padding: 10px;
height: auto !important;
padding-top: 5px;
padding-bottom: 5px;
}
.grid tfoot tr td a{
font-size: 14px;
padding: 10px;
color: #ffffff;
font-weight: normal;
}
.grid tfoot tr td a:hover{background: #303030;}
.grid tfoot tr td a:active{padding-bottom: 6px; padding-top: 6px;}
/*Estilos Footer*/
footer{
font-weight: bold;
50
font-size: 14px;
width: 100%;
text-align: center;
border-top: 4px solid #000000;
}
/*WEBGRID*/
width: 600px; }
padding: 5px; }
color: #FFF; }
.head a{
}
/*Errores*/
font-weight:bold;
color:red;
}
color:red;
font-weight:bold;
margin:12px;
}
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<title>@Page.Title</title>
<link href="~/estilos/estilos.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<header>
<h1>Mi Sitio de Pelculas</h1>
</header>
<div id="contenido">
@RenderBody()
</div>
<footer>
Creado por nombredeempresa © @DateTime.Now.Year
</footer>
</body>
51
</html>
gravatar.cshtml
@{
Page.Title="Gravatar";
}
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
webgrid.cshtml
@{
Page.Title="Peliculas";
var termino = "";
var termino1="";
if(!Request.QueryString["txttitulo"].IsEmpty() &&
termino1= "%" + Request.QueryString["txttitulo"] + "%";
seleccionardatos = db.Query("SELECT * FROM peliculas WHERE
Genero=@0 AND Titulo LIKE @1", termino,termino1);
}
else if(Request.QueryString["txttitulo"].IsEmpty() &&
Genero = @0", termino);
}
else if(!Request.QueryString["txttitulo"].IsEmpty() &&
Request.QueryString["txtgenero"].IsEmpty() ) {
termino ="%" + Request.QueryString["txttitulo"]+"%";
Titulo LIKE @0", termino);
}
else{
seleccionardatos=db.Query("SELECT * FROM peliculas");
}
var grid = new WebGrid(source: seleccionardatos, defaultSort:
"Genero", rowsPerPage:10);
52
}

<form method="get">
<div>

value="@Request.QueryString["txtgenero"]" /> <input type="Submit"
value="Buscar Gnero" /><br/>
(Dejar vacio para ver todas las pelculas.)<br/>
<br>
<label for="txtgenero">Ttulo de la Pelcula:</label>
value="@Request.QueryString["txttitulo"]" />
<input type="Submit" value="Buscar por Ttulo" /><br/>
(Dejar vacio para ver todas las pelculas.)<br/>
</div>
</form>
<h1>Resultados</h1>
@grid.GetHtml(
tableStyle: "grid",
grid.Column(format: @<a
href="~/editarpelicula?id=@item.ID">Editar</a>),
grid.Column("Ao"),
grid.Column(format: @<a
href="~/eliminarpelicula?id=@item.ID">Eliminar</a>)
))
<p><a href="~/agregarpelicula" class="botonlink">Agregar
Pelcula</a></p>
agregarpelicula.cshtml
@{
Page.Title="Agregar Pelcula";
Validation.RequireField("txtyear","El ao no debe estar
vaco");
53
var titulo = "";
var genero = "";
var year = "";
var comandoinsertar = "INSERT INTO peliculas (Titulo, Genero, Ao)
VALUES(@0, @1, @2)";
}
}
<fieldset>
value="@Request.Form["txttitulo"]" />
<br>
error">@Html.ValidationMessage("txttitulo")</span>
</p>
value="@Request.Form["txtgenero"]" />
<br>
error">@Html.ValidationMessage("txtgenero")</span>
</p>
<input type="text" name="txtyear"
value="@Request.Form["txtyear"]" />
<br>
error">@Html.ValidationMessage("txtyear")</span>
</p>
<p><input type="submit" name="btnsubmit" value="Agregar
Pelicula" /></p>
54
</fieldset>
<span class="validation-summary-errors">
@Html.ValidationSummary()</span>
</form>
<p><a href="~/webgrid" class="botonlink">Ver
Pelculas</a></p>
editarpelicula.cshtml
@{
Page.Title="Editar Pelcula";
var titulo = "";
var genero = "";
var year = "";
if(!IsPost){
var dbCommand = "SELECT * FROM peliculas WHERE ID =
@0";
if(row!=null){
year = row.Ao;
}
else{
titulo = "No Data";
genero = "No Data";
year = "No Data";
}
}
else{
Validation.AddFormError("No tienes seleccionada una
pelicula.");
}
}
if(IsPost){
Validation.RequireField("txttitulo","Debes ponerle el
ttulo");
55
Validation.RequireField("txtyear","El ao no debe estar
vaco");
Validation.RequireField("idpelicula", "No existe la
pelicula!");
var updateCommand = "UPDATE peliculas SET Titulo=@0,
Genero=@1, Ao=@2 WHERE ID=@3";
db.Execute(updateCommand, titulo, genero, year,
peliculaID);
}
}
}
<fieldset>
<input type="text" name="txttitulo" value="@titulo"
/></p>
<input type="text" name="txtgenero" value="@genero"
/></p>
<input type="hidden" name="idpelicula" value="@peliculaID"
/>
<p><input type="submit" name="btnguardarcambios"
value="Guardar Cambios" /></p>
</fieldset>
</form>
<p><a href="~/webgrid" class="botonlink">Regresar a la Lista
de Pelculas</a></p>
eliminarpelicula.cshtml
@{
Page.Title="Eliminar Pelcula";
var titulo = "";
var genero = "";
56
var year = "";
if(!IsPost){
var dbCommand = "SELECT * FROM peliculas WHERE ID =
@0";
if(row != null) {
year = row.Ao;
}
else{
Validation.AddFormError("La pelcula no fue
encontrada, ID incorrecto.");
}
}
else{
Validation.AddFormError("Pelcula no fue encontrada
por el ID.");
}
}
}
}
<fieldset>
<p><span>Ao:</span>
<input type="hidden" name="peliculaid" value="@peliculaId"
/>
57
Pelcula" /></p>
</fieldset>
</form>
<p><a href="~/webgrid" class="botonlink">Regresar a la
Lista de Pelculas</a></p>
Taller 1. Entendiendo el manejo de Datos en Webpages
Preguntas:
Preguntas de seleccin multiple:
Ejercicio
58

Web Pages Razor Manual 2

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Web Pages Razor Manual 2

Caricato da

Copyright:

Formati disponibili

Tabla de contenido

INTRODUCCION A Web Pages ......................................................................................................... 5

En el cuadro de bsqueda poner "asp.net helpers" y seleccionar ASP.NET Web

Veras la base de datos creada en la parte superior izquierda del programa.

Se creara una base de datos con extensin .sdf

Especificar nombre de tabla y crear las filas.

Insertar Datos en la Tabla

Proceder a escribir los datos en las filas para ser usados.

Si ingresas un dato mal y este no es nulo mostrara un error.

Formularios Bsicos de HTML

<label for="txtgenero">Gnero para ver:</label>

Validation.RequireField("txttitulo","Debes ponerle el ttulo");

Con un campo vaco se vera asi:

Ahora veremos lo que es actualizar nuestra base de datos.

var titulo = "";

Comprobando que el ID es numrico

if(IsPost && !Request["btneliminar"].IsEmpty()){

Este sera el aspecto de nuestra pgina donde se visualizan las pelculas.

<label for="txtgenero">Gnero para ver:</label>

Potrebbero piacerti anche