如何在通过Ajax发布而不是通过提交发布时使用表单输入

问题似乎很简单:我需要一个 CaseId 将文件上载到服务器并将其信息存储在名为FilePath的表中时作为输入。

我用一个表单创建了一个视图(索引),该表单将其输入发送到视图 UplaodDnD ,其中可以通过DragnDrop上载文件。DragnDrop通过Jquery/Ajaxscript进行管理。该脚本调用UploadDnD POST操作,但由于某些原因,它不存储传递的CaseID字段。

控制器确保文件的实际上载,并将值分配给FilePath模型的某些字段。我认为将CaseID字段添加到UploadDnD表单应该可以做到这一点,但显然不行。我应该如何将caseId上的pass分配给FilePath?

索引页上的我的代码将触发所需的caseId:

<form method="post" action="UploadDnD/UploadDnD">
    <div>Please provide CaseId</div>
    <input type="number" name="caseId" />    
    <input type="submit" value="" />
</form>

这个 UploadDnd 页面具有以下代码:

@model BeagleNose.Models.FilePath
@{ViewData["Title"] = "Index";}

<form method="post" enctype="multipart/form-data">
   <div id="fileBasket" class="filebasket">
       Drag-n-Drop files here.
       <br /><br /><br />
       End of Dropzone
   </div>
   <div class="form-group">
       <input asp-for="CaseID" value="@ViewBag.selectedCase"class="form-control" />
   </div>
   <img id="progress" src="~/Images/progress.gif" />
</form>

Get和Post的上传dnd操作方法

public IActionResult UploadDnD(int? caseId)
    {
        if(caseId != null)
        {
            ViewBag.selectedCase = caseId;
        }
        return View();
    }

[HttpPost]
public IActionResult UploadFiles([Bind("CaseID,CandidateID,ArchiveSet")] FilePath filePath)
        {
        long size = 0;
        var files = Request.Form.Files;  

        foreach (var file in files)
        {
            string filename = hostingEnv.WebRootPath + $@"\bcontent\{file.FileName}";
            size += file.Length;
            using (FileStream fs = System.IO.File.Create(filename))
            {
                file.CopyTo(fs);
                fs.Flush();
            }

            filePath.FileName = file.FileName;
            filePath.FileType = FileType.ContractFile;
            filePath.ContentType = file.ContentType;
            filePath.DocPath = filename;
            _context.Add(filePath);
        }
        _context.SaveChangesAsync();

        string message = $"{files.Count} files(s) / {size} bytes uploaded successfully!";
        return Json(message);
    }

最后是Jquery/Ajax脚本

$(document).ready(function () {

$("#progress").hide();

$("#fileBasket").on("dragenter", function (evt) {
    evt.preventDefault();
    evt.stopPropagation();
});

$("#fileBasket").on("dragover", function (evt) {
    evt.preventDefault();
    evt.stopPropagation();
});

$("#fileBasket").on("drop", function (evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var files = evt.originalEvent.dataTransfer.files;
    var fileNames = "";

    if (files.length > 0) {
        fileNames += "Uploading <br />"
        for (var i = 0; i < files.length; i++) {
            fileNames += files[i].name + "<br />"
        }
    }
    $("#fileBasket").html(fileNames)

    var data = new FormData();
    for (var i = 0; i < files.length; i++) {
        data.append(files[i].name, files[i]);
    }

    $.ajax({
        type: "POST",
        url: "/UploadDnD/UploadFiles",
        contentType: false,
        processData: false,
        data: data,
        success: function (message) {
            $("#fileBasket").html(message);
        },
        error: function () {
            $("#fileBasket").html
                ("There was error uploading files!");
        },
        beforeSend: function () {
            $("#progress").show();
        },
        complete: function () {
            $("#progress").hide();
        }
    });
});
});