Anterior

Siguientes

Ejercicio: Implementación de vistas genéricas para mostrar datos

Completado

Queremos crear una nueva página de detalles para perros. Vamos a usar la vista genérica DetailView para simplificar la cantidad de código que necesitamos crear.

Importante

En este ejercicio se da por hecho que se han completado los pasos de configuración descritos anteriormente en este módulo.

Creación de la vista DogDetail

Comenzaremos por crear la clase del vista de detalles.

1. En Visual Studio Code, abra dog_shelters/views.py.

2. Debajo de la línea que lee # TODO: Import generic views, agregue el código siguiente para importar el módulo de vistas genéricas.

   # TODO: Import generic views
   from django.views import generic
   

3. Agregue el código siguiente a la parte inferior de views.py a fin de crear la vista genérica para DogDetail y establecer el modelo, la plantilla y el objeto de contexto.

   class DogDetailView(generic.DetailView):
       model = models.Dog
       template_name = 'dog_detail.html'
       context_object_name = 'dog'
   

Registro de la vista de detalles

Con la vista creada, podemos registrar la ruta.

1. Abra dog_shelters/urls.py.

2. Debajo de la línea que lee # TODO: Register detail view, agregue el código siguiente para registrar la ruta de nuestro elemento DogDetailView.

   # TODO: Register detail view
   path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
   

   Importante

   Recuerde la coma que hay al final de la línea.

Creación de la plantilla HTML

Ahora creará la plantilla HTML para mostrar los detalles del perro. El nombre del objeto será dog, que lo establecimos al crear el formulario.

1. En Visual Studio Code, cree un archivo dentro de dog_shelters/templates denominado dog_detail.html.

2. Agregue el código siguiente a dog_detail.html para crear la plantilla para mostrar los detalles del perro.

   {% extends 'base.html' %}
   
   {% block title %}
   {{ dog.name }}
   {% endblock %}
   
   {% block content %}
   <h2>{{ dog.name }}</h2>
   <div>About {{ dog.name }} - {{ dog.description }}</div>
   {% endblock %}
   

Actualización de la página de detalles del refugio para incluir nuestro vínculo

Con nuestra ruta de acceso registrada y una plantilla creada, podemos actualizar la plantilla de detalles del refugio para incluir vínculos a nuestra página de detalles del perro.

1. Abra dog_shelters/templates/shelter_detail.html.

2. Debajo de la línea que lee {# TODO: Add link to dogs #}, agregue el código siguiente para crear un vínculo de cada perro a la vista de detalles.

   {# TODO: Add link to dogs #}
   <a href="{% url 'dog_detail' dog.id %}">
       {{dog.name}}
   </a>
   
   

Prueba de la página

Con todo lo creado, vamos a ver nuestra página en acción.

1. Guarde todos los archivos seleccionando Archivo>Guardar todo.

2. En el explorador, vaya a http://localhost:8000.

3. En la lista de refugios, seleccione Contoso.

4. En la lista de perros, seleccione Roscoe.

   Aparece la página de detalles.

   

Ahora hemos creado una vista mediante el sistema de vistas genérico en Django.

Continuar