En esta serie de posts podrán aprender cómo hacer una aplicación web sencilla que se usa para gestionar una lista de películas favoritas.

Si quieren verlo directamente en inglés pueden hacerlo acá, pero para los que prefieren tener el contenido en nuestro idioma, esta es la lista de posts al respecto:

Parte 1: Proceso de instalación

Parte 2: Creando nuestra primera página

Parte 3: Demos un poco de estilo

Parte 4: Utilizando layout

Parte 5: Utilizando datos

Parte 6: Creando un formulario para agregar datos

Parte 7: Creando una página de edición de datos

Parte 8: Creando una página de borrado de datos

Parte 9: Publicando nuestro sitio

Esperamos que les sirva y cualquier pregunta que tengan, no duden en consultar.

Hasta el momento hemos creado una aplicación guiada por los datos que lista nuestras películas favoritas, le dimos un estilo, y le agregamos la funcionalidad para agregar películas y modificar las existentes en la base de datos. El próximo paso en la creación de esta aplicación es darle al usuario la posibilidad de borrar registros de la base de datos.

Deben haber escuchado el término ABM (CRUD en inglés) usado para referirse a aplicaciones web y los datos. ABM es la sigla para Alta, Baja y Modificación (CRUD: Create, Retrieve, Update, Delete), y es precisamente eso lo que estamos construyendo con WebMatrix.

Agregar la página de borrado

Para empezar, agregaremos una nueva página CSHTML y la llamaremos DeleteMovie.cshtml.

Reemplazaremos el código HTML en ella por el siguiente:

<h1>Delete a movie</h1>

<p>Are you sure you want to delete the movie <strong>@Movie.Name ?</strong></p>

<form action="" method="post">

    <input type="submit" value="Yes"/>

    <input type="button" value="No" onclick="window.location = 'dataMovies.cshtml'" />

</form>

Esto crea un formulario básico con 2 botones, un botón de tipo "submit" que dispara un HTTP POST (al igual que el de la página de edición del post anterior), y otro botón que nos redirecciona de vuelta a la lista de películas.

Al igual que la página EditMovies.cshtml, esta página será llamada con un parámetro que es el ID de la película a borrar. Así que, como se puede ver en el código anterior en "Are you sure you want to delete the movie @Movie.Name?" ("¿Está seguro que desea borrar la película @Movie.Name?") donde el valor de Movie.Name será insertado por el servidor. Por esto debemos decirle al servidor cómo obtener este valor:

Para hacer esto, como antes, ponemos código Razor al comienzo de la página para capturar el parámetro de entrada.

   1:  @{

   2:   

   3:  var id=Request["id"];

   4:   

   5:  var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   6:   

   7:  var db = Database.Open("Movies");

   8:   

   9:  var Movie = db.QuerySingle(SQLSELECT,id);

  10:   

  11:  var MovieName=Movie.Name;

  12:   

  13:  }

  14:   

Here you can see that the parameter was passed to the page as 'id' (using DeleteMovie.cshtml?id=<whatever>), and this is used to find the specific movie. A query is run against the database, and the record for that movie is retrieved. Now you can derive the name of that movie, and render it when the page is rendered.

Aquí se puede ver que el parámetro se pasó a la página como "id" (usando DeleteMovie.cshtml?id=<algo>), y esto se utiliza para encontrar la película en particular. Se lanza una consulta a la base de datos y se trae el registro para esa película. Ahora podemos derivar el nombre de la película y renderizarlo cuando se renderiza la página.

Probémoslo, corramos la página DeleteMovie.cshtml?id=<algo>, y veremos la siguiente pantalla, siempre teniendo en cuenta que <algo> sea un ID válido en la base de datos:

Si presionamos el botón "No", seremos redireccionados de vuelta a la página dataMovies.cshtml. Si presionamos "Yes", no sucede nada, porque todavía no hemos escrito el código para manejar el borrado.

Para borrar un registro de la base de datos se usa el comando SQL DELETE. Tiene la siguiente sintaxis:

DELETE FROM <tabla> WHERE <campo>=<valor>

Así, si quisiéramos borrar la película con ID=2 podríamos escribir:

DELETE FROM Favorites WHERE ID=2

Cuando el usuario presiona el botón "Yes", el formulario será enviado y ocurrirá el borrado, así que fácilmente podemos hacer lo siguiente en el postback:

   1:  if(IsPost){

   2:   

   3:  var SQLDELETE = "DELETE FROM Favorites WHERE ID=@0";

   4:   

   5:  db.Execute(SQLDELETE,id);

   6:   

   7:  Response.Redirect("dataMovies.cshtml");

   8:   

   9:  }

  10:   

This will delete the movie, and redirect us back to the listing page so that we can see it's gone.

Esto borrará la película y nos redireccionará nuevamente a la página con el listado de películas en donde podemos ver que ya no existe.

Aquí está el código completo para la página DeleteMovie.cshtml:

   1:  @{

   2:   

   3:  var id=Request["id"];

   4:   

   5:  var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   6:   

   7:  var db = Database.Open("Movies");

   8:   

   9:  var Movie = db.QuerySingle(SQLSELECT,id);

  10:   

  11:  var MovieName=Movie.Name;

  12:   

  13:  if(IsPost){

  14:   

  15:  var SQLDELETE = "DELETE FROM Favorites WHERE ID=@0";

  16:   

  17:  db.Execute(SQLDELETE,id);

  18:   

  19:  Response.Redirect("dataMovies.cshtml");

  20:   

  21:  }

  22:   

  23:  }

  24:   

  25:  <h1>Delete a movie</h1>

  26:   

  27:  <p>Are you sure you want to delete the movie <strong>@Movie.Name ?</strong></p>

  28:   

  29:  <form action="" method="post">

  30:   

  31:  <p><input type="submit" value="Yes"/>

  32:   

  33:  <input type="button" value="No" onclick="window.location = 'dataMovies.cshtml'" /></p>

  34:   

  35:  <br/>

  36:   

  37:  </form>

  38:   

Llamando a la página de borrado desde la lista de películas

Ahora que tenemos nuestra página de borrado funcionando, conectémosla con la página con el listado de películas para que el usuario pueda seleccionar un ítem de la lista y solicitar su borrado.

En la página del listado de películas simplemente tenemos que agregar un hipervínculo a cada entrada de la lista, donde el vínculo es a la página DeleteMovie.cshtml, pasándole el ID de la película seleccionada.

Aquí está en código completo para dataMovies.cshtml:

   1:  @{

   2:   

   3:  var db= Database.Open("Movies");

   4:   

   5:  var sqlQ = "SELECT * FROM Favorites";

   6:   

   7:  var data = db.Query(sqlQ);

   8:   

   9:  }

  10:   

  11:  <div id="movieslist">

  12:   

  13:  <ol>

  14:   

  15:  @foreach(var row in data){

  16:   

  17:  <li>

  18:   

  19:  <a href="EditMovie.cshtml?id=@row.id">@row.Name, @row.Genre, @row.ReleaseYear

  20:   

  21:  </a>

  22:   

  23:  <a href="DeleteMovie.cshtml?id=@row.id">Delete</a>

  24:   

  25:  </li>

  26:   

  27:  }

  28:   

  29:  </ol>

  30:   

  31:  <a href="AddMovie.cshtml">Add a new movie</a>

  32:   

  33:  </div>

  34:   

Ejecutamos la página para ver el flujo del borrado. Primero, aquií vemos la nueva página dataMovies.cshtml:

Si ahora seleccionamos el hipervínculo de borrado (delete) en cualquiera de las películas, seremos llevados a la página de "Borrar película", donde se nos preguntará si realmente queremos borrar la película de la lista:

Si presionamos "No", retornaremos al listado con la película todavía allí. Si decimos que sí, entonces retornaremos al listado, pero la película ya no se encontrará allí. Aquí está el resultado de decir "Si".

Hasta ahora hemos creado nuestra página de películas, le dimos estilo, la hicimos guiada por los datos, y luego creamos un formulario que se puede usar para agregar películas a la base de datos. El próximo paso será crear un formulario muy similar que usaremos para editar nuestra lista de películas existente.

Veamos entonces cómo se ve la aplicación hasta el momento:

Como se puede ver, tiene una lista de películas, con la posibilidad de agregar una nueva película a través del vínculo en la parte de abajo. Para obtener un efecto cuando se pasa por encima con el mouse hicimos que cada ítem de la lista de películas sea un hipervínculo, usando el tag <a>. Tiene sentido entonces que si quisiéramos editar una película usáramos este hipervínculo, así que vamos a seguir este proceso a continuación.

Crear la página de edición

Primero, crearemos una nueva página CSHTML en WebMatrix, y la llamaremos EditMovie.cshtml. Esta página eventualmente tendrá el formulario que se cargará con el detalle de la película seleccionada, y cuando se cambie este detalle, los cambios serán enviados de vuelta a la base de datos.

Por lo tanto, debemos reemplazar el contenido por defecto en EditMovie.cshtml por este formulario. Se va a ver muy similar al que se creó en el post anterior.

<h1>Edit a Movie</h1>

<form action="" method="post">

    <p>Name:<input type="text" name="formName" /></p>

    <p>Genre:<input type="text" name="formGenre" /></p>

    <p>Year:<input type="text" name="formYear" /></p>

    <p><input type="submit" value="Edit Movie" /></p>

</form>

Llamar a la página de edición desde el listado de películas

Bien, ya tenemos la base de nuestro formulario de edición. Pero, ¿cómo inicializamos el formulario con el contenido de la base de datos para la película seleccionada? Bien, primero tratemos de entender cómo hacer que esta página sepa qué película queremos editar, y para esto debemos volver a nuestra página dataMovies.cshtml.

Como podrán recordar, teníamos la lista de ítems escritos de la siguiente manera:

<li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

El hipervínculo no nos llevaba a ningún lado porque el href era solamente “#”. Así que hagamos que el hipervínculo nos lleve a EditMovie.cshtml, de la siguiente manera:

<li><a href="EditMovie.cshtml ">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

Fantástico, pero no importa cuál película seleccionemos, siempre va a llamar a EditMovie.cshtml, y esta página no va a tener idea de qué película estamos editando. Pero dataMovies.cshtml ya sabe qué película – porque la hemos seleccionado, así que podemos usar esto para pasar el ID de la película que hemos seleccionado a EditMovie.cshtml de esta manera:

EditMovie.cshtml?id=<algo>

Y como ya sabemos cuál es el ID de la fila actual (@row.id), podemos usar Razor para escribir el ID mientras escribimos la lista, por lo que cambiamos nuestro <li> para que se vea de la siguiente manera:

<li><a href="EditMovie.cshtml?id=@row.id">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

Ahora si miramos a dataMovies.cshtml vamos a obtener lo siguiente:

No se ve para nada diferente, pero miren qué sucede cuando miramos el código HTML de la página. Esta no es la página .cshtml que vemos en WebMatrix, sino el HTML que es generado por el servidor (a partir de las instrucciones en el cshtml), y enviado al navegador.

En Internet Explorer 9 se puede ver esto haciendo click derecho en cualquier lugar de la página y seleccionando “Ver código fuente”

   1:  <!DOCTYPE html>

   2:  <html lang="en">

   3:    <head>

   4:      <meta charset="utf-8" />

   5:      <title>My Favorite Movies</title>

   6:      <link rel="stylesheet" type="text/css" href="movies-html5.css" />

   7:    </head>

   8:   

   9:  <body>

  10:    <header>

  11:      <h1>A list of my Favorite Movies</h1>

  12:    </header>

  13:   

  14:    <div id="movieslist">

  15:    <ol>

  16:      <li><a href="EditMovie.cshtml?id=1">It&#39;s a wonderful life, Comedy, 1946</a></li>

  17:      <li><a href="EditMovie.cshtml?id=2">Lord of the Rings, Drama, 2001</a></li>

  18:      <li><a href="EditMovie.cshtml?id=3">The Fourth World, Anime, 2012</a></li>

  19:      <li><a href="EditMovie.cshtml?id=4">The Lion King, Family, 1994</a></li>

  20:      <li><a href="EditMovie.cshtml?id=5">Forrest Gump, Comedy, 1994</a></li>

  21:      <li><a href="EditMovie.cshtml?id=6">The Million Year Journey, Anime, 2014</a></li>

  22:    </ol>

  23:   

  24:    <a href="AddMovie.cshtml">Add a new movie</a>

  25:  </div>

  26:   

  27:    <footer>

  28:   

  29:      This site was built using Microsoft WebMatrix. 

  30:   

  31:      <a href="http://web.ms/webmatrix">Download it now.</a>

  32:   

  33:    </footer>

  34:   

  35:  </html>

  36:   

¿Ven cómo, cuando se creó la vista, el valor del ID para cada fila en particular fue escrito en el HTML? Ahora, cuando se carga EditMovie.cshtml, podemos tomar este ID y usarlo para encontrar el registro en el que estamos interesados.

Terminando la página de edición

Bien, volvamos a EditMovie.cshtml.

¿Se acuerdan que antes vimos que si ponemos una @{ al comienzo de la página, y escribíamos código adentro, entonces ese código se ejecutaría cuando la página se está cargando? Bien, ese es el lugar perfecto para poner el código para leer el ID que está en la URL de la página, y luego usarlo para traer el nombre, género y año de lanzamiento de esta película.

Cuando se llama a una página con la sintaxis que estamos utilizando (o sea NombreDeLaPagina.cshtml?<Parametro>=<Valor>), se puede averiguar el valor del parámetro usando el objeto Request. Así, por ejemplo, para EditMovie.cshtml?id=6, podemos usar el siguiente código:

var id=Request["id"];

Este código crea una variable local, llamada “id” y utiliza el valor del parámetro (también llamado “id”) para inicializarla. WebMatrix es suficientemente inteligente para darse cuenta que ambos IDs son diferentes basándose en el contexto en el que se los utiliza.

Ahora que tenemos el ID, podemos usarlo en una consulta SELECT de SQL para encontrar el registro de esa película.

   1:  var id=Request["id"];

   2:  var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   3:  var db = Database.Open("Movies");

   4:  var Movie = db.QuerySingle(SQLSELECT,id);

   5:  var MovieName=Movie.Name;

   6:  var MovieGenre=Movie.Genre;

   7:  var MovieYear=Movie.ReleaseYear;

Bastante directo, ¿no? Decimos “Select * from Favorites where el campo ID sea igual al ID que pasamos como parámetro” y luego ejecutamos eso contra la base de datos. Como sólo queremos 1 registro, decimos db.QuerySingle para obtener un sólo registro.

Luego se ejecuta la consulta, y el Nombre (Name), Género (Genre) y Año de Lanzamiento (ReleaseYear) son cargados en variables locales.

Esto está todo bien, pero el problema es que los valores todavía están en las variables y no en el formulario. Así que ¿cómo hace el usuario para editarlos? Bien – la respuesta es simple – recuerden que este código se ejecuta antes que la página sea renderizada, así que tenemos las variables antes de que se escriba el código HTML. Y debido a esto, podemos inicializar el formulario con estos valores. El formulario usa campos <input> para mostrarnos campos de texto, y éstos soportan una propiedad “value”. Podemos ahora usar esto directamente con las variables para inicializarlas.

Éste es el código hasta ahora:

   1:  @{

   2:    var id=Request["id"];

   3:    var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   4:    var db = Database.Open("Movies");

   5:    var Movie = db.QuerySingle(SQLSELECT,id);

   6:    var MovieName=Movie.Name;

   7:    var MovieGenre=Movie.Genre;

   8:    var MovieYear=Movie.ReleaseYear;

   9:  }

  10:   

  11:  <h1>Edit a Movie</h1>

  12:  <form action="" method="post">

  13:    <p>Name:<input type="text" name="formName" value="@MovieName" /></p>

  14:    <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>

  15:    <p>Year:<input type="text" name="formYear" value="@MovieYear" /></p>

  16:    <p><input type="submit" value="Edit Movie" /></p>

  17:  </form>

  18:   

Ahora cuando la página se ejecute, van a ver que se inicializa con los valores de la película. Prueben ejecutando dataMovies.cshtml primero, de esta manera:

Luego seleccionen una película. Se puede ver en la imagen de arriba que se está seleccionando la tercera fila, y se está llamando a EditMovie.cshtml con un id de 3.

La página luego se carga y se ve como se muestra a continuación:

Pueden escribir en cualquiera de los campos de texto para cambiar cualquiera de los valores, pero cuando presionen “Edit Movie”, no pasa nada. Podrán recordar, de la página de Agregar Película del post anterior, que el botón desencadena un submit en el formulario, el cual es un HTTP POST (en oposición al HTTP GET que ocurrió cuando la página se llamó desde el hipervínculo), el cual debe ser procesado.

La forma de hacer esto anteriormente fue usar un bloque de código if(IsPost), así que vamos a hacer lo mismo aquí:

   1:  if(IsPost){

   2:    MovieName=Request["formName"];

   3:    MovieGenre=Request["formGenre"];

   4:    MovieYear=Request["formYear"];

   5:  }

   6:   

El formulario utiliza los valores formName, formGenre y formYear para los valores del Nombre, Género y Año de lanzamiento. Estos se pasan en el objeto Request. Si el usuario ha editado los mismos de alguna manera, los nuevos valores van a estar allí, así que podemos actualizar la base de datos con ellos.

Para actualizar la base de datos usamos el comando SQL “UPDATE” que tiene la siguiente sintaxis:

UPDATE tabla SET columna = valor, columna = valor, columna = valor… WHERE clave=valor

Así que, en nuestro caso, tenemos 3 columnas que estamos actualizando para el Id que ya conocemos, así que aquí está el código para crear la consulta y ejecutarla:

   1:  var SQLUPDATE = "UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3";

   2:  db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id);

Esto usa parámetros en SQL (@0, @1, etc., que no hay que confundir con la “@” que marca el comienzxo de un bloque Razor) para que el SQL sea más fácil de leer. Sólo recuerden que los valores @ son reemplazados, en orden, con los valores dentro del código db.Execute(), por lo que, en este caso, MovieName es @0, MovieGenre es @1, etc.

Finalmente, una vez que la película fue editada, es una buena idea redireccionar nuevamente a la página de la lista para que podamos ver los resultados de la edición, actualizados dinámicamente. Hicimos lo mismo en la página de agregar película. Aquí está el código:

Response.Redirect("dataMovies.cshtml");

Y para su conveniencia, aquí está el código completo para la página EditMovies.cshtml:

   1:  @{

   2:      var id=Request["id"];

   3:      var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

   4:      var db = Database.Open("Movies");

   5:      var Movie = db.QuerySingle(SQLSELECT,id);

   6:      var MovieName=Movie.Name;

   7:      var MovieGenre=Movie.Genre;

   8:      var MovieYear=Movie.ReleaseYear;

   9:   

  10:      if(IsPost){

  11:        MovieName=Request["formName"];

  12:        MovieGenre=Request["formGenre"];

  13:        MovieYear=Request["formYear"];

  14:        var SQLUPDATE = "UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3";

  15:        db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id);

  16:        Response.Redirect("dataMovies.cshtml");

  17:      }

  18:  }

  19:   

  20:  <h1>Edit a Movie</h1>

  21:    <form action="" method="post">

  22:      <p>Name:<input type="text" name="formName" value="@MovieName" /></p>

  23:      <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>

  24:      <p>Year:<input type="text" name="formYear" value="@MovieYear" /></p>

  25:      <p><input type="submit" value="Edit Movie" /></p>

  26:    </form>

Así que ahora podemos ver qué pasa cuando la ejecutamos. Asumiendo que comenzaron con la página dataMovies.cshtml, y seleccionaron para editar alguna de las películas, deberían ver esto:

Si ahora editan el valor de “Year” de 2012 a 2011, y presionan el botón “Edit Movie”, la base de datos se actualizará, y serán redireccionados a la página de la lista, donde ahora podrán ver que el año de lanzamiento es 2011.

Con esto habrán editado exitosamente un registro de la base de datos!!

Hasta ahora hemos visto cómo crear un sitio web en WebMatrix, y cómo utilizar el estilo y el diseño para hacer las páginas más livianas y fáciles de mantener, así como más rápidas de cargar para el navegador. Estas páginas están creadas para mostrar datos, y ahora aprenderemos como hacer páginas para insertar información en la base de datos.

Crear y vincular una página de carga de datos

Usando WebMatrix, en el área de archivos, crear una nueva página y llamarla 'AddData.cshtml. (Mantendremos la nomenclatura en inglés para el nombre de archivos y variables en este tutorial.)

Borrar el contenido predeterminado de la página que se creó para usted por WebMatrix, y sustituirlo por

<h1>Add a New Movie to the database</h1>

Ahora regresar a 'dataMovies.cshtml'. Abrirlo, y deberá verse algo como esto:

@{

    var db= Database.Open("Movies");

    var sqlQ = "SELECT * FROM Favorites";

    var data = db.Query(sqlQ);   

}

<div id="movieslist">

  <ol>

    @foreach(var row in data){

      <li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

    }

  </ol>

</div>

Antes de la </ div> de cierre, añadimos la siguiente línea de código HTML (Para crear un hipervínculo)

<a href="AddMovie.cshtml">Add a new movie</a>

Ejecute el sitio y vea la página en el navegador. Veremos algo como esto:

Click en "Añadir una nueva película” y veremos la página que se creó anteriormente.

No hay mucho que ver todavía. Vamos a añadir algo en el próximo paso.

Como ejercicio adicional, quizá hayas notado que el texto "Añadir una nueva película a la base de datos” tiene un estilo diferente del resto. Es un <h1>, pero no se ha mostrado la misma manera que la cabecera h1. A ver si podemos arreglar eso! (Una pista, la cabecera h1 pareciera ser un hijo de la etiqueta <header>, pero esto no es así. ¿Qué le agregarías al archivo CSS para el estilo de esta misma manera?)

Creación de un formulario “Añadir Película”

Normalmente a través de HTTP el navegador hace solicitudes al servidor usando el verbo GET del protocolo HTTP, que, como su nombre indica, obtiene información del servidor. Hemos estado haciendo esto todo el tiempo, porque el uso de GET está implícito en las páginas en forma de peticiones de servidor. El protocolo HTTP también es compatible con una variable llamada POST, que le permite enviar información al servidor.

Es bueno tener una aplicación dinámica que muestre información de una base de datos, pero el siguiente paso lógico sería enviar datos al servidor, que el servidor haga algo con los datos, y luego devolver el resultado. Como cuando vemos sitios donde se escribe algo de información y pulse el botón Enviar para enviar esa información al servidor.

Para esto se utilizan formularios HTML. Al hacer clic en Enviar, el navegador envía la información en los campos del formulario al servidor mediante el POST. Una vez más, todo esto sucede “por detrás” y por defecto, no necesitamos hacer nada especial para usarlo, pero es útil para el código en el servidor saber qué tipo de acción una solicitud está utilizando, para responder en consecuencia. Veamos cómo hacerlo para añadir películas a tu base de datos.

Empezaremos con una forma muy sencilla. No es muy bonito, pero hace el trabajo (Ya vamos a ver cómo hacerlo bien “Pro” usando CSS).

   1:  <h1>Add a New Movie to the Database</h1>

   2:    <form action="" method="post">

   3:      <p>Name:<input type="text" name="formName" /></p>

   4:      <p>Genre:<input type="text" name="formGenre" /></p>

   5:      <p>Year:<input type="text" name="formYear" /></p>

   6:      <p><input type="submit" value="Add Movie" /></p>

   7:  </form>

Así es como se verá. Como dijimos, no es muy bonito, pero más tarde vamos a crear un CSS para que se vea genial.

Ahora echemos un vistazo al HTML que acabamos de escribir para crear este form.

<form action="" method="post">

Lo primero es la nueva etiqueta <form>. Esto define el form, y le dice al servidor que cuando el usuario presiona el botón <Enviar>, que debe estar presente en dicho form, la acción será un HTTP POST. En virtud del hecho de que el parámetro de acción está vacía, esta misma página (es decir, AddMove.cshtml) procesará el mensaje del form.

<p>Name:<input type="text" name="formName" /></p>

<p>Genre:<input type="text" name="formGenre" /></p>

<p>Year:<input type="text" name="formYear" /></p>

Dentro de la etiqueta <form> verás que hay tres controles <input>. Estos utilizan la <input> control de HTML, que puede tener un número de ajustes de tipo, y en este caso el tipo es "texto", que muestra un cuadro de texto básico donde el usuario puede introducir texto. Cada una recibe un nombre que será la variable que utiliza el servidor para almacenar el valor que el usuario entra en el cuadro de texto antes de enviarlo.

<p><input type="submit" value="Add Movie" /></p>

Por último, tenemos un control <input> con el tipo 'submit' que define el botón de enviar. Cuando el usuario pulsa este botón, la acción HTTP POST será llamada y los datos que el usuario haya introducido se envían al servidor.

En este momento si pulsa el botón, no pasará nada porque aún no hemos escrito el código para controlar la devolución de datos desde el servido. Ahora nos encargaremos de este punto.

Manipulación de los datos del formulario

Cuando creamos el formulario, el parámetro de acción quedó intencionalmente vacío, lo que significa que está especificando que es esta misma la página que recibirá la información del formulario y hará “algo” con esta información.

Vamos a agregar un bloque de código que se ejecute cuando cargamos la página. Para ello, escribimos el siguiente código al principio de la página:

   1:  @{

   2:    // Code to execute

   3:  }

   4:   

   5:  <h1>Add a New Movie to the Database</h1>

   6:  <form action="" method="post">

   7:    <p>Name:<input type="text" name="formName" /></p>

   8:    <p>Genre:<input type="text" name="formGenre" /></p>

   9:    <p>Year:<input type="text" name="formYear" /></p>

  10:    <p><input type="submit" value="Add Movie" /></p>

  11:  </form>

  12:   

Anteriormente, vimos que la primera vez que se llamó a la página, escribiendo su dirección en su navegador (o haciendo clic en Ejecutar para iniciar la web), el navegador solicitó las páginas utilizando el verbo HTTP GET. Más tarde, cuando se pulsa el botón Enviar, como la propiedad de “action” estaba en blanco, la operación HTTP POST llamó a su misma página.

Así, en el código, tendrá que saber una manera de entender es la página que se recupera mediante un GET o está siendo ejecutado mediante un POST. Afortunadamente, el propio Framework permite comprobar el verbo sin entrar en la complejidad de romper los encabezados HTTP para inspeccionar qué tipo de mensaje que está recibiendo, sólo hay que utilizar if(IsPost), cuando devuelve true, significa que el usuario ha utilizado un formulario para enviar la información.

   1:  @{

   2:    If(IsPost)

   3:    {

   4:      // Do something on the POST

   5:    }

   6:  }

   7:   

Cuando el navegador haga un request, se estará enviando un mensaje que contiene "FormName = algo ',' formGenre = algo ',' formYear = algo" y así sucesivamente.

Así, primero tendrá que establecer algunas variables de servidor para guardar estos datos y entonces podremos leer el mensaje HTTP. Esto es mucho más fácil de lo que parece :)

   1:  @{

   2:    var MovieName="";

   3:    var MovieGenre="";

   4:    var MovieYear="";

   5:    if(IsPost){

   6:      MovieName=Request["formName"];

   7:      MovieGenre=Request["formGenre"];

   8:      MovieYear=Request["formYear"];

   9:    }

  10:  }

Aquí se puede ver que se han creado tres variables (MovieName, MovieGenre y MovieYear) y se inicializan con los valores que el usuario envía. En el siguiente paso vamos a añadir el código para abrir la base de datos y agregar esta información.

Agregando a la base de datos

En el artículo anterior, cuando se tomaron los datos de la base de datos, se utilizó 'SELECT' en la consulta SQL que selecciona los datos de la base de datos para poder leerlos. Ahora vamos a usar ‘INSERT’ para insertarlos

El comando INSERT de SQL utiliza la sintaxis siguiente

INSERT INTO tabla (columna 1, Columna2, ... ColumnaN) VALUES (valor1, valor2, ... valorN)

Veamos cómo utilizar INSERT en nuestro código:

   1:  @{

   2:  var MovieName="";

   3:  var MovieGenre="";

   4:  var MovieYear="";

   5:    if(IsPost){

   6:      MovieName=Request["formName"];

   7:      MovieGenre=Request["formGenre"];

   8:      MovieYear=Request["formYear"];

   9:      var SQLINSERT = "INSERT INTO Favorites (Name, Genre, ReleaseYear) VALUES (@1, @2, @3)";

  10:      var db = Database.Open("Movies");

  11:      db.Execute(SQLINSERT, MovieName, MovieGenre, MovieYear);

  12:    }

  13:  }

Se puede ver que creamos una cadena SQLINSERT para mantener el orden. Usando ‘Razor’ podemos especificar los valores de parámetros de esta cadena, así que en vez de tratar de sumar los valores de 'moviename', 'MovieGenre' y 'MovieYear', a la cadena, simplemente usamos @ 1, @ 2 y 3 @. Cuando se ejecuta la consulta, el framework se encarga de “limpiar” los datos de caracteres no admitidos. Esto evita que la gente pase código SQL como un parámetro, en un ataque llamado "inyección de SQL”.

A continuación se abre la base de datos, y luego se llama al método de ejecución en la base de datos para decirle que para ejecutar esta consulta de inserción. Los valores se sustituyen en @1, @2…, y se agregan a la base de datos.

Vamos a añadir una línea más después de la DB.Execute (), que redirige al usuario a la página donde pueden ver las películas favoritas, y pueden ver los resultados de lo que acaba de agregar.

Response.Redirect ("dataMovies.cshtml");

Ahora que podemos ejecutar la página y vemos el form agreguemos algunos datos:

Pulsamos el botón "Añadir película”. El servidor agrega los datos a la base de datos y a continuación nos re direccionará de nuevo a la lista para ver los resultados, y se puede ver que nuestra película favorita se ha agregado!

Importante: En este artículo hemos visto cómo tomar la entrada del usuario y añadirlo directamente a la base de datos lo cual ya está bastante bien, pero antes de implementar un esto en “el mundo real”, hay que acordarse de hacer lo siguiente

- Comprobar los parámetros de entrada de datos válidos, y proporcionar al usuario información precisa sobre lo que han introducido de forma incorrecta. Por ejemplo, si no se introduce un 'Año' que parezca válido, debe informarse, en lugar de permitir que la información llegue al a base de datos.

- Comprobar los parámetros de entrada para valores que puedan ser utilizados por un pirata infame para dañar su base de datos. Un ataque común se llama inyección SQL donde el usuario envía un comando SQL en un formulario, y el código en el servidor lo ejecuta, lo que podría dañar o exponer datos privados.

Pueden aprender más detalles sobre el uso de bases de datos en WebMatrix en el post anterior.