Oefening: algemene weergaven implementeren om gegevens weer te geven

2 minuten

We willen een nieuwe detailpagina voor honden maken. We gaan de algemene weergave DetailView gebruiken om de hoeveelheid code te stroomlijnen die we moeten maken.

Belangrijk

In deze oefening wordt ervan uitgegaan dat u de installatiestappen eerder in deze module hebt voltooid.

De DogDetail-weergave maken

We beginnen met het maken van de detailweergaveklasse.

Open in Visual Studio Code dog_shelters/views.py.
Voeg onder de regel die wordt gelezen # TODO: Import generic viewsde volgende code toe om de algemene weergavemodule te importeren.
```
# TODO: Import generic views
from django.views import generic
```
Voeg de volgende code toe aan de onderkant van views.py om de algemene weergave te DogDetail maken en het model, de sjabloon en het contextobject in te stellen.
```
class DogDetailView(generic.DetailView):
    model = models.Dog
    template_name = 'dog_detail.html'
    context_object_name = 'dog'
```

De detailweergave registreren

Nu de weergave is gemaakt, kunnen we het pad registreren.

Open dog_shelters/urls.py.
Voeg onder de regel die wordt gelezen # TODO: Register detail view, de volgende code toe om het pad voor ons DogDetailViewte registreren.
```
# TODO: Register detail view
path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
```
Belangrijk

Onthoud de volgkomma aan het einde van de regel.

De HTML-sjabloon maken

U gaat nu de HTML-sjabloon maken om de details van de hond weer te geven. De objectnaam wordt dog zoals we instellen bij het maken van het formulier.

Maak in Visual Studio Code een nieuw bestand in dog_shelters/sjablonen met de naam dog_detail.html.

Voeg de volgende code toe aan dog_detail.html om de sjabloon te maken om de details voor de hond weer te geven.

{% extends 'base.html' %}

{% block title %}
{{ dog.name }}
{% endblock %}

{% block content %}
<h2>{{ dog.name }}</h2>
<div>About {{ dog.name }} - {{ dog.description }}</div>
{% endblock %}

Werk de detailpagina van de shelter bij om onze koppeling op te nemen

Nu ons pad is geregistreerd en de sjabloon is gemaakt, kunnen we de sjabloon voor de details van de schuilplaats bijwerken om koppelingen naar de detailpagina van onze hond op te nemen.

Open dog_shelters/templates/shelter_detail.html.
Voeg onder de regel die wordt gelezen {# TODO: Add link to dogs #}, de volgende code toe om een koppeling te maken voor elke hond naar de detailweergave.
```
{# TODO: Add link to dogs #}
<a href="{% url 'dog_detail' dog.id %}">
    {{dog.name}}
</a>
```

Uw pagina testen

Nu alles is gemaakt, zien we onze pagina in actie.

Sla alle bestanden op door Alles> opslaan te selecteren.
Ga in uw browser naar http://localhost:8000.
Selecteer Contoso in de lijst met schuilplaatsen.
Selecteer Roscoe in de lijst met honden.

De detailpagina wordt weergegeven.