Django Rest Framework ViewSet 渲染序列化器表单不显示？

如何解决Django Rest Framework ViewSet 渲染序列化器表单不显示？

我正在尝试加载一个表单以在模态窗口中创建一个对象，然后当用户按下提交并将它们重定向到它刚刚创建的对象时，该窗口提交数据（通过 AJAX）。

我的模型是这样的：

class Game(models.Model):
    end_year = models.IntegerField()
    lead_dev = models.ForeignKey(
        User,on_delete=models.PROTECT,related_name="%(class)s_lead_dev"
    )
    created = models.DateTimeField(auto_Now=False,auto_Now_add=True)
    created_by = models.ForeignKey(
        User,related_name="%(class)s_created_by"
    )
    updated = models.DateTimeField(auto_Now=True,auto_Now_add=False)
    updated_by = models.ForeignKey(
        User,related_name="%(class)s_updated_by"
    )
    admin_locked_on = models.DateTimeField(
        auto_Now=False,auto_Now_add=False,blank=True,null=True
    )
    report_url = models.CharField(max_length=350,blank=True)

    objects = models.Manager()
    managers = GameManager()

class Level(models.Model):
    game = models.ForeignKey(Game,on_delete=models.PROTECT)
    level_type = models.ForeignKey(
        LevelType,on_delete=models.PROTECT
    )
    level_difficulty = models.ForeignKey(
        LevelDifficulty,on_delete=models.PROTECT
    )
    publish = models.BooleanField(default=False)
    lead_dev_locked = models.BooleanField(default=False)
    admin_locked = models.BooleanField(default=False)
    created = models.DateTimeField(auto_Now=False,related_name="%(class)s_updated_by"
    )

当用户进入游戏详细信息屏幕（仅通过通用 Django DetailView 处理）时，我会显示该游戏的“关卡”列表。

我希望用户能够点击“添加关卡”并弹出一个模式框，确认这是他们想要添加的关卡。当他们点击“确认”（提交）时，AJAX 会完成剩下的工作。

模板的重要部分（模态和按钮）如下所示：

{% for level_type in level_types %}
    <button type="button" class="btn btn-primary float-right" data-target="#createLevelModal" data-toggle="modal" data-game="{{ game }}" data-user="{{ game.lead_dev.full_name }}" data-level-type="{{ level_type }}" data-api-url="{% url 'level-list' %}">Create {{ level_type }}</button>
{% endfor %}

...other HTML...

<!-- Modal -->
<div class="modal fade" id="createLevelModal" tabindex="-1" role="dialog" aria-labelledby="createLevelModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleLevelLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="form-body">
            </div>
        </div>
    </div>
</div>

我有一个模板：level_create_form.html，看起来像这样：

<form class="form-horizontal" action="{% url 'level-list' %}" method="post" novalidate>
    {% csrf_token %}
    <div class="modal-body">
        {% render_form serializer %}
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <input class="btn btn-primary modal-submit-button" type="submit" value="Create DRF">
    </div>
</form>

我在 DetailView 页面上的 JS 如下所示：

<script type="text/javascript">

    $('#createLevelModal').on('show.bs.modal',function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var api_url = button.data('api-url') // Extract info from data-* attributes
        var lead_dev = button.data('user') // Extract info from data-* attributes
        var level_type = button.data('level-type') // Extract info from data-* attributes
        var game = button.data('game') // Extract info from data-* attributes
        // If necessary,you Could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here,but you Could use a data binding library or other methods instead.
        var modal = $(this)
        // Set the title of the modal
        modal.find('.modal-title').text( game + ' for ' + lead_dev)
        // Set the action of the form to the URL (where it will POST to)
        modal.find('.level-create').attr("action",api_url)
        // Set the words on the Submit button
        modal.find('.modal-submit-button').attr("value",'Create ' + level_type)
        // Load the HTML for the form into the modal
        modal.find('.form-body').load(api_url)
    })
    $('.level-create').on('submit',function(e) {
        var form = $('.level-create') // Button that triggered the modal
        var errorlist = $('.level-create').find('.errorlist') // Get the errorlist (if any)
        var url = form.attr('action')
        // POST to the URL
        $.ajax({
            method: $(this).attr('method'),url: url,data: $(this).serialize(),context: this,success: function(data,status,jqxhr) {
                console.log('success!')
                // redirect user here
            },error: function(data,status) {
                console.log('there was an error')
                $("#form-modal").html(data)
            }
        })
        return false
    })
</script>

我的关卡序列化器如下所示：

class LevelSerializer(serializers.ModelSerializer):
    renderer_classes = [TemplateHTMLRenderer]
    template_name = "level_create_form.html"
    created_by = serializers.HiddenField(
        default=serializers.CurrentUserDefault()
    )
    updated_by = serializers.HiddenField(
        default=serializers.CurrentUserDefault()
    )

    class Meta:
        model = Level
        fields = [
            "url","game","level_type","level_level","created_by","updated_by",]

    def create(self,validated_data):
        level = Level.objects.create(**validated_data)
        return level  

我使用的视图集是这样的：

class LevelViewSet(viewsets.ModelViewSet):
    serializer_class = LevelSerializer

    def get_queryset(self):
        queryset = Level.objects.all()
        return queryset      

ViewSet 的 URL 也设置正确：

router.register(
    r"levels",LevelViewSet,basename="level",)

模态开始打开，立即消失，页面看起来相同，但具有模板，就像我在浏览器中查看 DRF API 一样。

如何最好地将此表单 HTML 放入模态窗口！？