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

Question

首先，我正在制作一个产品编辑页面。当您编辑产品时，数据库中的所有字段都会经过一个模型。我正在使用 Dropzone.js 为产品上传多张带有预览的图片，并能够在提交用户所做的编辑之前将其删除。用户可以拖放或 select 多个图像。这工作正常，问题是在尝试提交它时，由于某种原因，图像没有像模型一样传递给控制器。我制作了一个专门用于上传的页面并且效果很好，但是当我尝试传递模型和图像时，它仅传递模型并且图像为空。 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

这是产品编辑页面上放置区的脚本 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" />

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

How do I pass the images while passing a model in Dropzone.js ASP.NET MVC C#

c#

asp.net-mvc

dropzone.js