前言

有时候我们希望在不离开主页或者索引页的情况下显示所有需要的用户信息，换句话说，就是让form表单显示在一个新层layer上，在一个弹出的模态窗口modal window里。

要在一个模态窗口渲染表单非常容易，只需要使用ajax请求并且将返回结果显示在你的模态窗口上即可。但是有的时候如果我们想继续操作这个表单就比较棘手了，尤其是出错的时候。通常情况下，django会重定向用户到一个显示出错的表单，但是如果表单本身并没有自己的页(自己的完整模板)，只是存在于一个模态窗口中，我们怎么来处理这种情况呢？

这儿，我们将介绍一种方法来解决这个问题，它会用到django, bootstrap和modal，jquery和jquery form plugin

场景

我们有一些列表条目带有编辑按钮，当点击这些编辑按钮时，表单将会渲染到一个模态窗口中，让你在这个窗口中完成内容更新。

视图

我们使用django类的ListView和UpdateView，第一个用来管理条目列表，第二个用于条目更新。

from django.views.generic import UpdateView, ListView

from django.http import HttpResponse

from django.template.loader import render_to_string

from myapp.models import Item

from myapp.forms import ItemForm

"""

items list

"""

class ItemListView(ListView):

model = Item

template_name = 'myapp/item_list.html'

def get_queryset(self):

return Item.objects.all()

"""

Edit item

"""

class ItemUpdateView(UpdateView):

model = Item

form_class = ItemForm

template_name = 'myapp/item_edit_form.html'

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

self.item_id = kwargs['pk']

return super(ItemUpdateView, self).dispatch(*args, **kwargs)

def form_valid(self, form):

form.save()

item = Item.objects.get(id=self.item_id)

return HttpResponse(render_to_string('myapp/item_edit_form_success.html', {'item': item}))

ItemListView类很简单，不做特别解释。

在ItemUpdateView 类里，我重写了dispatch 方法，它会从url里读取item id，这样我就能在form_valid函数里将这个item对象传递给模板item_edit_form_success template。模板item_edit_form仅仅包含modal的内容，没有其他内容。

在urls.py里，你必须调用ItemUpdateView并在url里获取 pk参数，它是即将编辑条目的id。

ItemForm也没什么特别的，就不在这儿贴出它的内容了。

模板

接下来开始处理列表模板item_list.html。

{% extends 'base_site.html' %}

{% block extra_js%}

{% endblock %}

{% block content %}

Items list

{% for loan in object_list %}

{{ item.name }}

|

{% endfor %}

{% endblock %}

有三件事情需要注意一下：

在页面包含js plugin: jquery.form.js

添加modal container 的markup标记 (参考bootstrap modals)

使用链接去加载href属性里url的响应内容，加载的内容显示在modal内(ajax请求)。

学习bootstrap modals来理解这三点，重点关注的是：

如果remote url已经提供，内容会通过jquery load方法一次获取并注入到.modal-content div中。如果使用的是data-api，你需要使用href属性去指定远端数据源。

上面这些响应内容从哪儿来的？这里会用到模板item_edit_form.html。