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".
Subscribe