Django添加项目不匹配答案

【问题标题】：Django Adding Item MismatchingDjango添加项目不匹配
【发布时间】：2021-03-05 15:23:26
【问题描述】：

我目前正在使用 Django 开发待办事项应用程序。

我有两个模型 Todo 和 Task。我想创建一个 Todo 并且在 todo 项下我想创建一个任务项。

因为我能够添加待办事项和任务项。

但是问题是如果我想默认为数学添加任务项，所有任务项都会被添加到第一个待办事项中。我认为这是因为在任务模式（弹出）表单中，我已链接函数 url 以在单击添加按钮时检索待办事项对象 ID，并将引导模式（弹出）表单添加到 html 中的 a-tag。它不是检索相应的待办事项 id 而是取第一个待办事项 id。（请参阅下图）

models.py

class Todo(models.Model):

    date_created = models.DateTimeField(auto_now_add=True)
    completed = models.BooleanField(default=False)
    title = models.CharField(max_length=200)
    user_id = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)

    def __str__(self):
        return self.title

class Task(models.Model):

    heading = models.CharField(max_length=100)
    todo = models.ForeignKey(Todo, on_delete=models.CASCADE, related_name='tasks')
    date_created = models.DateTimeField(auto_now_add=True)
    completed = models.BooleanField(default=False)
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)

    def __str__(self):
        return self.heading

views.py

from django.shortcuts import render, redirect, get_object_or_404
from django.http import HttpResponse, Http404, HttpResponseNotFound, JsonResponse, HttpResponseRedirect
from .models import Todo, Task
from .forms import *
from django.utils import timezone
from django.contrib.auth.forms import UserCreationForm
from django.views.decorators.csrf import csrf_protect
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required
from django.views.generic import View
from django.contrib.auth.models import User
from django.core.paginator import Paginator


def register(request):
    form = userRegisterForm()

    if request.method == 'POST':
        form = userRegisterForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            password = form.cleaned_data.get('password2')

            return redirect('login')
    else:
        form = userRegisterForm()

    context = {'form': form}
    return render(request, 'todo/register.html', context)


def logoutUser(request):
    logout(request)
    return redirect('login')


@login_required(login_url='login')
def home(request):

    todo_form = TodoForm()
    task_form = TaskForm()
    current = timezone.now()

    todo_items_upcoming = Todo.objects.filter(user_id=request.user, completed=False).order_by('-date_created')
    todo_items_completed = Todo.objects.filter(user_id=request.user, completed=True).order_by('-date_created')

    pagi1 = Paginator(todo_items_upcoming, 4)
    pagi2 = Paginator(todo_items_completed, 4)

    page_num = request.GET.get('upcoming', 1)
    page_num2 = request.GET.get('completed', 1)

    page_obj = pagi1.get_page(page_num)
    page_obj2 = pagi2.get_page(page_num2)

    if request.method == "POST":
        todo_form1 = TodoForm(request.POST)
        if todo_form1.is_valid():
            data = todo_form1.cleaned_data.get('title')
            obj = Todo.objects.create(
                date_created=current, title=data, user_id=request.user)

    context = {'todo_form': todo_form, 'page_obj': page_obj, 'page_obj2': page_obj2,
               'pagi1': pagi1, 'pagi2': pagi2, 'page_num2': int(page_num2), 'page_num': int(page_num), 'task_form': task_form}

    return render(request, 'todo/main.html', context)


@login_required(login_url='login')
def update_todo(request, pk):

    try:
        obj = Todo.objects.get(id=pk, user_id=request.user)
        print(obj)
    except Exception as err:
        raise Http404(err)

    if request.method == 'POST':
        upform = TodoForm(request.POST, instance=obj)
        if upform.is_valid():
            upform.save()
    return redirect('/')


@login_required(login_url='login')
def add_task(request, pk):

    try:
        obj = Todo.objects.get(id=pk, user_id=request.user)
        print(obj)
    except Exception as err:
        raise Http404(err)

    if request.method == 'POST':
        Task.objects.create(heading=request.POST.get('heading'), date_created=timezone.now(), 
            todo=obj, user=request.user)

    return HttpResponseRedirect(request.META.get('HTTP_REFERER'))

@login_required(login_url='login')
def delete_todo(request, pk):

    try:
        obj = Todo.objects.get(id=pk, user_id=request.user)
    except Exception as err:
        try:
            obj = Task.objects.get(id=pk, user=request.user)
        except Exception as err:
            raise Http404(err)

    obj.delete()
    return HttpResponseRedirect(request.META.get('HTTP_REFERER'))


@login_required(login_url='login')
def completed_todo(request, pk):

    try:
        obj = Todo.objects.get(id=pk, user_id=request.user)
    except Exception as err:
        try:
            obj = Task.objects.get(id=pk, user=request.user)
        except Exception as err:
            raise Http404(err)

    obj.completed = True
    obj.save()

    # return redirect('/')
    return HttpResponseRedirect(request.META.get('HTTP_REFERER'))

main.html

{% extends 'todo/index.html' %}
{% load crispy_forms_tags %}
{% block content %}

    <div class="center-column">
        <h5 class="card-title">Create your List</h5>

        <form action="" method="POST" id="addTodo">
            {% csrf_token %}
            <div class="input-group-append">
                {{ todo_form.title }}
                <button type="submit" class="form-control btn btn-primary mb-3 mr-sm-2" id="addItem">
                    Add Items
                </button>
            </div>
        </form>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Upcoming Items</h4>
                    <hr/>
                    {% for i in page_obj %}

                        <ul class="list-group" id="upcomingItems">

                            <li class="list-group-item list-group-item-primary mb-1" id="upcomingItem">
                                {{ i.title }}

                                <div class="float-right">

                                    <button type="submit" class="btn btn-sm btn-dark ml-1 mt-1 mr-1 mb-1" id="completed_btn">
                                        <a href="{% url 'completed_todo' i.id %}">Completed</a>
                                    </button>

                                    <button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
                                        <a href="{% url 'delete_todo' i.id %}">❌</a>
                                    </button>

                                </div>

                                <div class="float-right">
                                    <!-- Button trigger modal for Update Todo Modal-->
                                    <button type="submit" class="btn btn-sm btn-success ml-1 mt-1 mr-1 mb-1" id="update_btn">
                                        <a href="{% url 'update_todo' i.id %}" data-toggle="modal" data-target="#updateTodoModal_{{i.id}}">Update
                                        </a>
                                    </button>
                                </div>

                                <div class="float-right">
                                    <!-- Button trigger modal for Adding TaskModal-->
                                    <button type="submit" class="btn btn-sm btn-primary ml-1 mt-1 mr-1 mb-1" id="addBtn">
                                        <a href="{% url 'addTask' i.id %}" data-toggle="modal" data-target="#taskModal_{{i.id}}" name="todoObj">
                                            Add
                                        </a>                
                                    </button>
                                </div>
                                      
                               <!-- Task Modal for adding tasks under todo items -->
                                <div class="modal fade" id="taskModal_{{ i.id }}" data-backdrop="static" tabindex="-1" role="dialog" 
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="staticBackdropLabel">Add New Task</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form action="{% url 'addTask' i.id %}" method="POST" id="addTask">
                                                    {% csrf_token %}
                                                    <div class="card card-body">

                                                        {{ task_form.heading }}

                                                    </div>
                                                    <div class="modal-footer">
                                                        <button class="btn btn-success" type="submit">Submit</button>
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Update Todo Modal for updating Todo Items -->
                                <div class="modal fade" id="updateTodoModal_{{i.id}}" data-backdrop="static" tabindex="-1" role="dialog"          aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="staticBackdropLabel">Update ToDo</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>

                                            <div class="modal-body">
                                                <form action="{% url 'update_todo' i.id %}" method="POST">
                                                    {% csrf_token %}
                                                    <div class="card card-body">

                                                        {{ todo_form|crispy }}

                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn btn-success" type="submit">Submit</button>
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {% for j in i.tasks.all %}
                                    {% if j.completed == False %}
                                        <div class="card mt-4">
                                            <ul class="list-group">
                                                <li class="list-group-item list-group-item-danger" id="upcomingItem">
                                                    {{ j.heading }}
                                                    <div class="float-right">
                                                        <button type="submit" class="btn btn-sm btn-dark ml-1 mt-1 mr-1 mb-1" id="completed_btn">
                                                            <a href="{% url 'completed_todo' j.id %}">Completed</a>
                                                        </button>

                                                        <button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
                                                            <a href="{% url 'delete_todo' j.id %}">❌</a>
                                                        </button>
                                                    </div>

                                                </li>
                                            </ul>
                                        </div>
                                    {% endif %}                                   
                                {% endfor %}
                            </li>
                        </ul>
                    {% endfor %}
                    <hr/>

                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item {% if page_obj.page_number == page_num %} active {% endif %}">
                                <a class="page-link" href="?upcoming={{ page_obj.previous_page_number }}&completed={{ page_num2 }}">&laquo</a>
                            </li>
                        {% endif %}
                        {% for i in pagi1.page_range %}
                            <li class="page-item {% if i == page_num %} active {% endif %}">
                                <a class="page-link" href="?upcoming={{ i }}&completed={{ page_num2 }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                        {% if page_obj.has_next %}
                            <li class="page-item {% if page_obj.page_number == page_num %} active {% endif %}">
                                <a class="page-link" href="?upcoming={{ page_obj.next_page_number }}&completed={{ page_num2 }}">&raquo</a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Completed Items</h4>
                    <hr/>
                 
                    <ul class="list-group" id="upcomingItems">
                        {% for i in page_obj2 %}
                            <li class="list-group-item list-group-item-primary mb-1" id="upcomingItem">
                                {{ i.title }}

                                <div class="float-right">
                                    <button type="submit" class="btn btn-sm btn-success ml-1 mt-1 mr-1 mb-1" id="update_btn">
                                        <a href="{% url 'update_todo' i.id %}" data-toggle="modal" data-target="#updateTodoModal">Update</a>
                                    </button>

                                    <button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
                                        <a href="{% url 'delete_todo' i.id %}">❌</a>
                                    </button>
                                </div>

                                {% for j in i.tasks.all %}

                                    <div class="card mt-4">
                                        <ul class="list-group">
                                            <li class="list-group-item list-group-item-danger" id="upcomingItem">
                                                {{ j.heading }}
                                                <div class="float-right">
                                                    <button type="submit" class="btn btn-sm btn-dark ml-1 mt-1 mr-1 mb-1" id="completed_btn">
                                                        <a href="{% url 'completed_todo' j.id %}">Completed</a>
                                                    </button>

                                                    <button type="submit" class="btn btn-sm btn-danger ml-1 mt-1 mr-1 mb-1">
                                                        <a href="{% url 'delete_todo' j.id %}">❌</a>
                                                    </button>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                {% endfor %}
                            </li>
                        {% endfor %}
                    </ul>
                    <hr/>

                    <ul class="pagination justify-content-center">
                        {% if page_obj2.has_previous %}

                            <li class="page-item {% if page_obj2.page_number == page_num %} active {% endif %}">
                                <a class="page-link" href="?completed={{ page_obj2.previous_page_number }}&upcoming={{ page_num }}">&laquo</a>
                            </li>

                        {% endif %}
                        {% for i in pagi2.page_range %}

                            <li class="page-item {% if i == page_num2 %} active {% endif %}">
                                <a class="page-link" href="?completed={{ i }}&upcoming={{ page_num }}">{{ i }}</a>
                            </li>

                        {% endfor %}
                        {% if page_obj2.has_next %}

                            <li class="page-item {% if page_obj2.page_number == page_num %} active {% endif %}">
                                <a class="page-link" href="?completed={{ page_obj2.next_page_number }}&upcoming={{ page_num }}">&raquo</a>
                            </li>

                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

forms.py

class TodoForm(forms.ModelForm):
    
    class Meta:
        model = Todo
        fields = ['title', 'completed']

class TaskForm(forms.ModelForm):

    class Meta:
        model = Task
        fields = ['heading', 'todo', 'completed']

class userRegisterForm(UserCreationForm):
    email = forms.EmailField()

    class Meta:
        model = User
        fields = ['username','email','password1','password2']

urls.py

urlpatterns = [

    path('', views.home, name='home'),
    
    path('update_todo/<int:pk>/', views.update_todo, name='update_todo'),
    path('completed/<int:pk>/', views.completed_todo, name="completed_todo"),
    path('delete_todo/<int:pk>/', views.delete_todo, name='delete_todo'),
    path('add_task/<int:pk>/', views.add_task, name='addTask'),

    path('register/', views.register, name='register'),
    path('login/', auth_views.LoginView.as_view(template_name='todo/login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(template_name='todo/logout.html'), name='logout'),

]

Image-1

使用引导程序在待办事项下添加任务项的任务表单弹出模式。

Image-2

每当我为其他待办事项添加任务项时，这些任务项都会存储到第一个待办事项而不是其对应的待办事项。我在 Maths Todo 项上添加了两个任务项，但 Maths-1 和 Maths-2 是在第一个 todo 项下创建的。

【问题讨论】：

标签： django django-models django-views django-forms django-templates

【解决方案1】：

您正在创建 n 个具有相同 id 的 taskModal 模态，这是错误的，并导致为所有添加操作仅打开第一个具有 id taskModal 的模态的错误。您需要为 html 中的每个元素设置唯一的 id。我想对您的代码进行大量更改，但现在让我们让您的代码正常工作。

将添加按钮的数据目标从 data-target="#taskModal" 更改为 data-target="#taskModal_{{ i.id }}" ，同样将 taskModal 的 id 从 taskModal 更改为 taskModal_{{ i .id }}

您需要对更新待办事项进行类似的更改。

【讨论】：

在 updateTodo 模式中为什么实例不工作？
你还没有定义你的 todoModal，我在你的 main.html 中看不到它
我在 main.html 中添加了 UpdatetodoModal
不，它不起作用。显示的是空表单而不是实例值。
让我们continue this discussion in chat。

【解决方案2】：

<button 
    id={{i.id}} 
    type="button" 
    class="btn btn-primary" 
    data-toggle="modal" 
    data-target="#taskModal">
    Add
</button>
<script>
    // This event is fired when the modal has been made visible to the user
    $('#taskModal').on('shown.bs.modal', function (e) { 
        let id = e.relatedTarget.id // get the id from the button 
        $('#addTask').attr('action',  `/add_todo/${id}/`); // update the action with the id
    });
</script>

您还必须改进变量和函数名称，我们为其他开发人员编写代码！

【讨论】：