ASP.NET Core 6 MVC编辑时Image字段为何传值为Null？

表单中<input type="file" asp-for="Image">生成的name为Image，与隐藏域@Html.HiddenFor(model => model.Image)的name重复。当用户不选择新图片时，file控件会提交空值，覆盖隐藏域中的原有文件名，导致后台customerMaster.Image接收为null；控制器直接将该空值赋值给数据库实体，最终保存为null。

1. 修改Edit视图的表单控件 #

将file控件的asp-for移除，手动设置name为ImageFile，避免与模型的Image字段冲突，确保隐藏域单独传递原有文件名：

<!-- 原file控件 -->
<input type="file" asp-for="Image" id="fuCustomerImage" class="fu form-control" accept=".jpg,.jpeg,.png" />
<!-- 修改后 -->
<input type="file" id="fuCustomerImage" name="ImageFile" class="fu form-control" accept=".jpg,.jpeg,.png" />

保留原有隐藏域，确保其name为Image：

@Html.HiddenFor(model => model.Image, new { id = "image" })

2. 调整Edit POST控制器方法 #

添加IFormFile ImageFile参数，同时完善异常处理逻辑，确保仅在有新文件上传（或隐藏域已更新新文件名）时才修改Image字段：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Edit(int id, CustomerMaster customerMaster, IFormFile ImageFile)
{
    if (ModelState.IsValid)
    {
        try
        {
            if (!_context.CustomerMasters.Any(x => x.MobileNo == customerMaster.MobileNo && x.CustomerId != id))
            {
                CustomerMaster customer = await _context.CustomerMasters.FindAsync(id);
                customer.CustomerName = customerMaster.CustomerName;
                customer.MobileNo = customerMaster.MobileNo;
                customer.Email = customerMaster.Email;
                customer.Address = customerMaster.Address;
                
                // 隐藏域已传递原有文件名，若AJAX上传新图则已更新该值，直接赋值即可
                customer.Image = customerMaster.Image;
                
                customer.WhenEntered = DateTime.UtcNow;

                _context.Update(customer);
                await _context.SaveChangesAsync();

                return RedirectToAction(nameof(Index));
            }
            else
            {
                ModelState.AddModelError("", "Name with same mobile no. already exists.");
            }
        }
        catch (Exception ex)
        {
            ModelState.AddModelError("", $"Update failed: {ex.Message}");
        }
    }

    return View(customerMaster);
}

3. 确认AJAX上传逻辑正确更新隐藏域 #

确保AJAX上传新图片后，将生成的随机文件名赋值给隐藏域#image，保证提交表单时传递正确的文件名：

// 示例AJAX上传回调逻辑
$.ajax({
    url: $("#btnUploadImage").data("URL"),
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        // 将新文件名赋值给隐藏域
        $("#image").val(response.fileName);
        // 更新预览图片地址
        $("#ImgUploadedImage").attr("src", `${$("#btnUploadImage").data("path")}/${response.fileName}`);
    }
});

额外检查 #

• 若CustomerMaster模型的Image字段添加了[Required]验证，需移除或调整，避免编辑时未上传新图导致模型验证失败。
• 确认隐藏域位于表单内部，未被其他控件覆盖name属性。

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