Django UpdateView 使用疑问：如何显示原始字段值、优化页面布局及管理输入历史记录

Let's break down each of your problems and fix them step by step—these are all common pitfalls when working with Django's class-based views and form rendering!

1. Showing Original Field Values in the Update Page #

The issue here is that your template isn't actually rendering the form fields that UpdateView generates for you. The view already creates a form pre-populated with the existing instance data, but you're only displaying the submit button.

To fix this, you need to render the form fields in your template. You have two options:

Quick Fix: Use Automatic Form Rendering #

Add {{ form.as_p }} (or {{ form.as_table }}/{{ form.as_ul }}) to render all fields with their original values:

<form action="{% url 'myApp:editCase' case.id %}" method="post">
    {% csrf_token %}
    <!-- This will render all fields with pre-filled values -->
    {{ form.as_p }}
    <input type="submit" value="Edit">
</form>

More Control: Manual Field Rendering #

If you want finer control over each field's layout, render them individually:

<form action="{% url 'myApp:editCase' case.id %}" method="post">
    {% csrf_token %}
    <div>
        <label for="{{ form.name.id_for_label }}">Name:</label>
        {{ form.name }}
    </div>
    <div>
        <label for="{{ form.executable.id_for_label }}">Executable:</label>
        {{ form.executable }}
    </div>
    <div>
        <label for="{{ form.parameter_value_list.id_for_label }}">Parameters:</label>
        {{ form.parameter_value_list }}
    </div>
    <div>
        <label for="{{ form.test_type.id_for_label }}">Test Type:</label>
        {{ form.test_type }}
    </div>
    <input type="submit" value="Edit">
</form>

This will automatically populate each field with the existing data from your TestCase instance.

2. Customizing the Update Page Layout/Styling #

You have full control over the form's appearance—here are two common approaches:

Option 1: Add CSS to Automatic Form Rendering #

If you're using {{ form.as_p }}, target the generated HTML elements with CSS. Add a style block (or link an external CSS file) to your template:

<form action="{% url 'myApp:editCase' case.id %}" method="post" class="testcase-update-form">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Edit">
</form>

<style>
.testcase-update-form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
}

.testcase-update-form p {
    margin-bottom: 1.2rem;
}

.testcase-update-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.testcase-update-form input,
.testcase-update-form textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}
</style>

Option 2: Use a Custom Form Class with Widget Attributes #

For more structured styling, create a custom ModelForm and add CSS classes to each field's widget:

Step 1: Create the Custom Form

from django import forms
from .models import TestCase

class TestCaseUpdateForm(forms.ModelForm):
    class Meta:
        model = TestCase
        fields = ['name', 'executable', 'parameter_value_list', 'test_type']
        widgets = {
            'name': forms.TextInput(attrs={'class': 'form-control'}),
            'executable': forms.TextInput(attrs={'class': 'form-control'}),
            'parameter_value_list': forms.Textarea(attrs={'class': 'form-control', 'rows': 4}),
            'test_type': forms.TextInput(attrs={'class': 'form-control'}),
        }

Step 2: Update Your View to Use the Form

class MyEditCaseView(UpdateView):
    model = TestCase
    form_class = TestCaseUpdateForm  # Replace fields with form_class
    template_name_suffix = '_update_form'
    
    def get_success_url(self):
        return reverse("myApp:testCase")

Step 3: Render Fields with Custom Classes in the Template

<form action="{% url 'myApp:editCase' case.id %}" method="post" class="testcase-update-form">
    {% csrf_token %}
    <div class="form-group">
        {{ form.name.label_tag }}
        {{ form.name }}
    </div>
    <div class="form-group">
        {{ form.executable.label_tag }}
        {{ form.executable }}
    </div>
    <!-- Repeat for other fields -->
    <button type="submit" class="btn btn-primary">Save Changes</button>
</form>

<style>
.form-group {
    margin-bottom: 1.5rem;
}
.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
.btn-primary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
}
</style>

3. Disabling Browser Autocomplete for Input Fields #

The dropdown with historical values is browser-autocomplete behavior. You can disable it using the autocomplete attribute:

Global Disable for the Entire Form #

Add autocomplete="off" to your form tag:

<form action="{% url 'myApp:editCase' case.id %}" method="post" autocomplete="off">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Edit">
</form>

Disable for Specific Fields #

If you only want to turn it off for certain fields, set the attribute in your custom form's widget:

class TestCaseUpdateForm(forms.ModelForm):
    class Meta:
        model = TestCase
        fields = ['name', 'executable', 'parameter_value_list', 'test_type']
        widgets = {
            'name': forms.TextInput(attrs={'autocomplete': 'off'}),
            'executable': forms.TextInput(attrs={'autocomplete': 'new-password'}),  # Some browsers respect this better
        }

Note: For some field types (like username/password), browsers might ignore autocomplete="off"—using autocomplete="new-password" often works as a workaround.

内容的提问来源于stack exchange，提问作者Wason