Django CBV ModelForm hx-post 不适用于 HTMX

Question

我的页面中有一个使用 HTMX 呈现的部分表单 upload.html:

{% extends 'base.html' %}
<p>Veuillez choisir ci-dessous entre l'upload d'un fichier de commandes ou l'upload d'un fichier fournisseur :</p>
<h2>Upload fichier <u>transporteur</u></h2>

    <button hx-get="{% url 'tool:upload-form' %}" hx-swap="afterend" hxtarget="#transporterforms">Add transporter</button>
    <div class="transporterforms">


    </div>

{% block content %}

还有我的 upload-form.html:

<div hx-target="this" hx-swap="outerHTML">
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form }}
        <button type="submit" hx-post=".">Submit</button>
    </form>
</form>
</div>

以下是我在 views.py 中管理表单的方式：

class TransporterFileFormPartialView(FormView):
    form_class = TransporterFileForm
    template_name = 'tool/upload-form.html'
    success_url = '.'


    def form_valid(self, form):
        transporter_file = TransporterFile.objects.create(
            file=form.cleaned_data['file'],
            transporter=form.cleaned_data['transporter']
        )
        transporter_file_pk = transporter_file.pk

        return super().form_valid(form)


class CompareFormView(CustomLoginRequiredMixin, RequestFormMixin, TemplateView):
    """ View to show results of comparison between two files. """

    template_name = 'tool/upload.html'
    # success_url = '.'


    def post(self, *args, **kwargs):

        form = TransporterFileForm(self.request.POST)

        if form.is_valid():
            obj = form.save(commit=False)
            # transporter_file = get_object_or_404(TransporterFile, pk=form.pk)
            obj.save()
            transporter_file = TransporterFile.objects.get(pk=obj.pk)
            transporter_file_pk = transporter_file.pk

            return redirect(reverse_lazy('tool:upload'))

在我的 forms.py:

class TransporterFileForm(forms.ModelForm):
    class Meta:
        model = TransporterFile
        fields = ('file', 'transporter')

我的urls.py如下：

urlpatterns = [
    path('', TemplateView.as_view(template_name="tool/home.html"), name="home"),
    path('upload-form/', TransporterFileFormPartialView.as_view(), name="upload-form"),
    path('upload-detail/<int:pk>', TransporterFileFormDetailView.as_view(), name="upload-detail"),
    path('upload-detail/<int:pk>/delete/', TransporterFileFormDeleteView.as_view(), name="upload-delete"),
    path('report/add-report', UserAddReportView.as_view(), name='add-report'),
    path('report/add-report/2', CompareFormView.as_view(), name='upload'),
    path('reports/', UserReportsView.as_view(), name='reports'),
]

我的主要问题是 upload-form.html。当我尝试

<button type="submit" hx-post=".">Submit</button>

它不起作用。我收到以下消息：

[19/May/2022 15:00:05] "GET /upload-form/ HTTP/1.1" 200 896
Not Found: /report/add-report/

但是当我尝试不使用 hx-post 时，它起作用了

<button type="submit">Submit</button>

我不明白为什么？

Answer 1

如错误消息所示，带尾部斜杠的 /report/add-report/ 路径不存在，因为您定义它时没有尾部斜杠：path('report/add-report', UserAddReportView.as_view(), name='add-report'),。所以你可以只添加缺少的斜杠，或者使用模板中的 url 函数来获取端点的正确路径：

<button type="submit" hx-post="{% url 'tool:add-report' %}">Submit</button>

Django CBV ModelForm hx-post 不适用于 HTMX

Django CBV ModelForm hx-post not working with HTMX

python

django

htmx