Django弹窗编辑产品提交后修改内容未保存如何解决

编辑后数据不更新是前后端逻辑同时存在缺失导致，核心问题有3个：

• 后端编辑分支仅查询到了对应零件对象，直接调用save()没有把用户提交的新值赋值给对象属性，相当于重复存储了一遍原数据，不会产生任何变更
• 前端编辑表单除brand字段外，其余number/name/description等输入框均未设置name属性，后端无法接收这些字段的提交值
• 前端表单未传递编辑操作标识和待编辑零件ID，后端无法正确匹配编辑请求、定位待修改的数据行
  另外前端代码还存在标签写法错误：误将textarea写成input的type属性，多行文本输入无法正常传值。

1. 修正后端视图逻辑 #

编辑逻辑需要复用ModelForm的实例绑定能力，将用户提交的数据绑定到待修改的现有数据行上，校验通过后再保存，不要手动查对象空存：

from django.shortcuts import get_object_or_404

def parts(request):
    added = ''
    error = ''
    PartAllView = Part.objects.order_by('-id')

    if request.method == 'POST' and 'parts_add' in request.POST:
        form = PartForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            added = 'Добавлено'
        else:
            error = 'Данная запчасть уже добавлена'

    if request.method == 'POST' and 'parts_edit' in request.POST:
        edit_id = int(request.POST['parts_edit'])
        # 用get_object_or_404避免非法ID触发服务器500错误
        part_instance = get_object_or_404(Part, id=edit_id)
        # 提交数据绑定到现有实例，而非新建数据
        form = PartForm(request.POST, request.FILES, instance=part_instance)
        if form.is_valid():
            form.save()
            added = 'Запчасть успешно отредактирована'
        else:
            error = 'Ошибка редактирования'


    form = PartForm()

    data = {
        'added': added,
        'error': error,
        'form': form,
        'PartAllView': PartAllView,
    }

    return render(request, 'kross/parts.html', data)

2. 修正前端表单代码 #

给所有输入字段补全和模型字段名一致的name属性，新增隐藏字段传递编辑操作标识和待编辑ID，修正错误的文本域标签，补全提交按钮：

{% if PartAllView %}
{% for el in PartAllView %}
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<!-- 隐藏字段：标记编辑请求，传递待编辑零件ID -->
<input type="hidden" name="parts_edit" value="{{ el.id }}">
<div class="modal fade" id="partEdit{{ el.id }}">
  <div class="modal-dialog modal-dialog-centered text-center" role="document">
    <div class="modal-content modal-content-demo">
      <div class="modal-header">
        <h6 class="modal-title">Редактирование запчасти</h6>
        <button aria-label="Close" class="btn-close" data-bs-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="row row-sm">
          <div class="col-lg-6">
            <div class="form-group">
              <input type="text" class="form-control" name="brand" value="{{ el.brand }}">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="form-group">
              <!-- 补全name属性 -->
              <input type="text" class="form-control" name="number" value="{{ el.number }}">
            </div>
          </div>
          <div class="col-lg-12">
            <div class="form-group">
              <!-- 补全name属性 -->
              <input type="text" class="form-control" name="name" value="{{ el.name }}"><br>
              <!-- 修正textarea标签写法，文本内容放在标签内部 -->
              <textarea class="form-control" name="description" rows="2">{{ el.description }}</textarea>
            </div>
          </div>
        </div>
        <!-- 其余字段比如analog同理补全name属性 -->
        <div class="form-group">
          <input type="text" class="form-control" name="analog" value="{{ el.analog }}">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Сохранить</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
      </div>
    </div>
  </div>
</div>
</form>
{% endfor %}
{% endif %}

• 所有输入字段的name属性值必须和Part模型、PartForm中定义的字段名完全一致，否则后端无法正常接收字段值
• form标签必须完整包裹弹窗内的所有输入项和提交按钮，不能被弹窗的div结构截断，否则提交时会丢失表单数据
• 若Part模型存在必填字段，编辑表单中必须包含对应字段的输入项，否则会触发表单校验失败

内容的提问来源于stack exchange，提问作者Капуста