部分视图中的Jquery拖放问题答案

【问题标题】：Jquery drag and drop issue in partial view部分视图中的Jquery拖放问题
【发布时间】：2017-08-13 16:51:12
【问题描述】：

我有一个可以使用拖放上传文件的部分视图。我写了一个这样的脚本：

<script>
    $(function () {

        $('#dropArea').filedrop({
            url: '@Url.Action("Desert1Content")',
            allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif'],
            allowedfileextensions: ['.jpg', '.jpeg', '.png', '.gif'],
            paramname: 'files',
            maxfiles: 5,
            maxfilesize: 5, 
            dragOver: function() {
                $('#dropArea').addClass('active-drop');
            },
            dragLeave: function() {
                $('#dropArea').removeClass('active-drop');
            },
            drop: function() {
                $('#dropArea').removeClass('active-drop');
            },
            afterAll: function(e) {
                $('#dropArea').html('file uploaded successfully');
            },
            uploadFinished: function(i, file, response, time) {
                $('#uploadList').append('<li class="list-group-item">' + file.name + '</li>');
            }
        });
    });
</script>

当我独立运行页面时，此代码运行良好。但是当这个部分视图加载到一个视图中并且我将一个文件拖到上传区域时，我得到了这个错误：

这是我的控制器：

public PartialViewResult Desert1Content(IEnumerable<HttpPostedFileBase> files)
{
    if (files!=null)
    {
        foreach (var file in files)
        {
            string filePath = Guid.NewGuid() + Path.GetExtension(file.FileName);
            file.SaveAs(Path.Combine(Server.MapPath("~/UploadFiles"), filePath));

        }
        return PartialView();
    }
    return PartialView();
}

更新，我想我找到了问题所在。但不是解决方案。问题是我将 jquery.js 文件添加到我的共享布局中。在不使用共享布局的情况下运行局部视图没有任何问题。当我在这个局部视图上使用共享布局（用于测试）时。问题出现了。问题是，为了使这项工作，jquery-1.10.2.min.js 和 jquery.filedrop.js 都应该添加到这个页面上。如果文件在共享布局中被引用，该脚本将不起作用。这会产生冲突并产生错误。

【问题讨论】：

您使用什么浏览器来启动该请求？它可能与 patialView 本身无关。而是实现Ajax上传功能...在不同的浏览器上试试（火狐应该可以）
我尝试了 4 种不同的浏览器，包括火狐。他们每个人都返回相同的错误

标签： jquery partial-views

【解决方案1】：

尝试使用

<script type="text/javascript" src="<path to your .js file>" defer></script>

defer 属性仅适用于外部脚本（即 scr 必须存在于脚本声明中）将推迟脚本的执行，直到页面加载。 w3schools defer attribute

Since partial views load before any parent view，使用defer 将确保您想要的。

无论如何，如果这仍然不起作用，我建议您只需在其中的部分视图中引用您的 Javascript 文件（JQuery 和其他脚本）。

试试这个也读一下： How to use jquery in partial view asp.net mvc 4

【讨论】：