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

Question

这个问题看似简单：我需要一个 CaseId 作为输入，同时将文件上传和上传到服务器并将其信息存储在一个名为 FilePath 的 table 中。

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

控制器确保文件的实际上传，并为文件路径模型的某些字段赋值。我认为将 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

的 UploadDnD 操作方法

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();
        }
    });
});
});

Answer 1

在你的表格中

<input type="number" name="caseId" id="caseId" />

在您的 AJAX 调用之前，只需将其值附加到数据。

data.append("caseId", $("#caseId").val());
$.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();
        }
    });

您将在控制器中获取 caseId。希望这有帮助。

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

How to use Form Input when Posting through Ajax and not through Submit

html

c#

asp.net-mvc

jquery

asp.net-ajax