ASP.NET Core文档上传页面刷新丢失ID问题求助

问题描述 #

基于ASP.NET Core Web App开发的文档上传站点，流程为：先创建“文件”并显示在列表中；点击“上传附件”时传递对应文件ID，确保附件关联到正确文件。但存在bug：未选择文件就点击上传按钮，页面刷新显示错误时，之前传递的ID丢失，导致后端myInv变量为空。

后端代码（原代码） #

using FarmersPortal.Data;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using File = FarmersPortal.Data.File;

namespace FarmersPortal.Pages.Admin
{
    [Authorize(Roles = "Admin")]
    public class UploadModel : PageModel
    {
        private readonly filedbContext _context;

        public UploadModel(filedbContext context)
        {
            _context = context;
        }
        public int? myID { get; set; }

        [BindProperty]
        public IFormFile file { get; set; }

        [BindProperty]
        public int? ID { get; set; }
        public void OnGet(int? id)
        {
            myID = id;
        }

        [BindProperty]
        public File File { get; set; }
        public async Task<IActionResult> OnPostAsync()
        {
            if (file != null)
            {
                if (file.Length > 0 && file.Length < 300000)
                {
                    var myInv = _context.Files.FirstOrDefault(x => x.Id == ID);
                    var date = DateTime.Today;

                    using (var target = new MemoryStream())
                    {
                        file.CopyTo(target);
                        myInv.UploadDate = date;
                        myInv.Attachment = target.ToArray();
                    }
                    if (myInv == null)
                    {
                        return NotFound();
                    }
                    else
                    {
                        File = myInv;
                    }
                    _context.Files.Update(myInv);
                    await _context.SaveChangesAsync();
                }

            }

            if (File.FileType == "Purchase Order")
            {
                return RedirectToPage("./PurchaseOrders");
            }
            else if (File.FileType == "Remittance")
            {
                return RedirectToPage("./Remittance");
            }
            else if (File.FileType == "Haulage Self Bill")
            {
                return RedirectToPage("./HaulageSelfBill");
            }
            else if (File.FileType == "Growers Return")
            {
                return RedirectToPage("./GrowersReturn");
            }
            return Page();
        }
    }
}

前端代码（原代码） #

@page
@model FarmersPortal.Pages.Admin.UploadModel
@{}

<h1 style="color:white">Upload File</h1>

<style>
    body {
        background-image: url("http://10.48.1.215/PORTAL/hero-range-1.jpg");
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post" enctype="multipart/form-data">
            <div class="form-group">
                <div class="col-md-10">
                    <p style="color:white">Upload file</p>
                    <input type="hidden" asp-for="@Model.ID" value="@Model.myID" />
                    <input asp-for="file" class="form-control" accept=".pdf" type="file" />
                    <span asp-validation-for="file" class="text-white"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-10">
                    <input class="btn btn-success" type="submit" value="Upload" />
                </div>
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

解决方案 #

1. 后端逻辑修正：保留ID值与数据上下文 #

修改OnPostAsync方法，确保无论文件是否上传成功，都先验证并保留ID对应的文件记录，避免回发时ID丢失：

public async Task<IActionResult> OnPostAsync()
{
    // 先验证ID有效性
    if (!ID.HasValue)
    {
        return NotFound();
    }

    // 获取对应文件记录，确保回发时数据不丢失
    var myInv = _context.Files.FirstOrDefault(x => x.Id == ID);
    if (myInv == null)
    {
        return NotFound();
    }
    // 将数据绑定到模型属性，确保页面回发时能获取到
    File = myInv;
    myID = ID;

    // 文件上传逻辑
    if (file != null)
    {
        if (file.Length > 0 && file.Length < 300000)
        {
            var date = DateTime.Today;
            using (var target = new MemoryStream())
            {
                file.CopyTo(target);
                myInv.UploadDate = date;
                myInv.Attachment = target.ToArray();
            }
            _context.Files.Update(myInv);
            await _context.SaveChangesAsync();

            // 上传成功后跳转对应页面
            return File.FileType switch
            {
                "Purchase Order" => RedirectToPage("./PurchaseOrders"),
                "Remittance" => RedirectToPage("./Remittance"),
                "Haulage Self Bill" => RedirectToPage("./HaulageSelfBill"),
                "Growers Return" => RedirectToPage("./GrowersReturn"),
                _ => Page()
            };
        }
        else
        {
            ModelState.AddModelError(nameof(file), "文件大小需在0-300KB之间");
        }
    }
    else
    {
        ModelState.AddModelError(nameof(file), "请选择要上传的PDF文件");
    }

    // 验证失败时返回页面，此时ID已保留
    return Page();
}

2. 前端优化：简化Hidden字段绑定 #

将前端的hidden字段修改为自动绑定，无需手动设置value，确保回发时ID能正确传递：

<input type="hidden" asp-for="ID" />

3. 可选：添加客户端验证 #

在前端添加JavaScript，阻止未选文件时的表单提交，从根源避免ID丢失问题：

<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        const fileInput = document.querySelector('input[type="file"]');
        const errorSpan = document.querySelector('span[asp-validation-for="file"]');
        
        if (!fileInput.files || fileInput.files.length === 0) {
            e.preventDefault();
            errorSpan.textContent = '请选择要上传的PDF文件';
            errorSpan.style.display = 'block';
        } else {
            errorSpan.textContent = '';
            errorSpan.style.display = 'none';
        }
    });
</script>

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