如何在 Dropzone.js ASP.NET MVC C# 中传递模型时传递图像

Question

首先，我正在制作一个产品编辑页面。当您编辑产品时，数据库中的所有字段都会经过模型。我正在使用 Dropzone.js 为产品上传多个图像，其中包含预览和在提交用户所做的编辑之前删除的能力。用户可以拖放或选择多个图像。这很好用，问题是在尝试提交它时，由于模型所在的某种原因，图像没有传递给控制器​​。我制作了一个专门用于上传的页面，效果很好，但是当我尝试传递模型和图像时，它只传递模型并且图像为空。 Controller

[HttpPost]
    public ActionResult ProductEdit(IEnumerable<HttpPostedFileBase> files, TWebProduct tbl, HttpPostedFileBase file)
    {
        // A bunch of stuff that doesn't matter because it returns as null before it hits this.
    }

这是 ProductEdit.cshtml 的顶部，您可以看到模型和使用标签。 Top of the ProductEdit.cshtml

@model EcommerceAirmotion.DAL.TWebProduct
    
    @{
        ViewBag.Title = "ProductEdit";
        Layout = "~/Views/Shared/_AdminLayoutPage.cshtml";
    }
    
    <h2>Product Details</h2>
    
    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    @using (Html.BeginForm("ProductEdit", "Admin", FormMethod.Post, new { @name = "myDropzone", id = "myDropzone", enctype = "multipart/form-data" }))
    {
      @* a bunch of other stuff *@


      <div class="form-group">
        <h5>Images</h5>
        <div class="col-md-10">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>Image Prev</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var img in Model.TWebImages)
                    {
                        <tr>
                            <td><img src="~/ProductImages/@img.varImage" class="img-fluid" width="150" height="150" /></td>
                            <td>@img.varImage</td>
                        </tr>
                    }
                </tbody>
            </table>

            <h5>Upload Images</h5>

            <div>
                <div id="previews" class="dz-default dz-message box__input dropzone border">
                    <br/>
                    <div style="text-align:center">
                        <i class="fa fa-cloud-upload" style="font-size:23px;position:relative;top:4px;"></i> <span style="margin-left:20px">Drop files  to attach or browse</span>
                    </div>
                    <br />
                </div>
                <div id="previewFiles" class=""></div>
            </div>

        </div>
    </div>

     @* a bunch of other stuff *@

     <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </div>
    }
    @section scripts{

<script>

    $(document).ready(function () {
        Dropzone.autoDiscover = false;
        $('#myDropzone').dropzone({
            //parameter name value
            paramName: "files",
            //clickable div id
            clickable: '#previews',
            //preview files container Id
            previewsContainer: "#previewFiles",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            //url:"../ProductImages/", // url here to save file
            maxFilesize: 100,//max file size in MB,
            addRemoveLinks: true,
            dictResponseError: 'Server not Configured',
            //acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.pdf",// use this to restrict file type
            acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",// use this to restrict file type
            init: function () {
                var self = this;
                // config
                self.options.addRemoveLinks = true;
                self.options.dictRemoveFile = "Delete";
                //New file added
                self.on("addedfile", function (file) {
                    console.log('new file added ', file);
                    $('.dz-success-mark').hide();
                    $('.dz-error-mark').hide();
                });
                // Send file starts
                self.on("sending", function (file, xhr, formData) {
                    console.log('upload started', file);
                    $('.meter').show();
                });

                // File upload Progress
                self.on("totaluploadprogress", function (progress) {
                    console.log("progress ", progress);
                    $('.roller').width(progress + '%');
                });

                self.on("queuecomplete", function (progress) {
                    $('.meter').delay(999).slideUp(999);
                });

                // On removing file
                self.on("removedfile", function (file) {
                    console.log(file);
                });

                $('#Submit').on("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    // Validate form here if needed

                    if (self.getQueuedFiles().length > 0) {
                        self.processQueue();


                    } else {
                        self.uploadFiles([]);
                        $('#myDropzone').submit();
                    }

                });



                self.on("successmultiple", function (files, response) {
                    // Gets triggered when the files have successfully been sent.
                    // Redirect user or notify of success.
                    $(".alert").alert('close');
                });
            }
        });


    })

</script>

}

同样在编辑页面 html This is the ProductEdit.cshtml part where the drop and drag go

这是产品编辑页面 dropzone 的脚本 Script on the ProductEdit.cshtml

这些是来自 chrome 开发工具的错误 DevTools Error messages

我几乎没有 javascript 方面的经验，在 MVC 方面的经验非常少（比如 40 小时的经验），但我精通 C#

请帮我找出我做错了什么。 如果我需要更好地澄清任何事情，请告诉我。

Answer 1

我找到了答案，提交按钮没有名称属性。这不是调用 javascript 来实际保存图像。

旧提交按钮： <input type="submit" value="Save" class="btn btn-primary" />

新提交按钮： <input type="submit" value="Submit" id="Submit" name="Submit" class="btn btn-primary" />