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'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:
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!!
Subscribe