Javascript Visual Studio ASP.net MVC Jquery版本问题_Javascript_Jquery_Asp.net Mvc_Jquery Ui_Visual Studio 2012

Javascript Visual Studio ASP.net MVC Jquery版本问题

javascript jquery asp.net-mvc jquery-ui visual-studio-2012

Javascript Visual Studio ASP.net MVC Jquery版本问题,javascript,jquery,asp.net-mvc,jquery-ui,visual-studio-2012,Javascript,Jquery,Asp.net Mvc,Jquery Ui,Visual Studio 2012,我有一个javascript/html代码，它在单独的html文件中运行良好，在JSFIDLE上运行良好，但当我在视图中的项目中尝试它时，它不起作用！我认为这是一个与JQuery版本相关的问题。我有最新版本，我删除了它并安装了1.8.3和1.7.1，但它仍然不工作！你有什么想法或方法来解决它吗？这快把我逼疯了这里是指向JSFIDLE的链接：拖放上传 JQUERY标记输入插件 Visual Studio 2012 Express 2012用于Web、MVC 4 Internet应用程序 PS：我

我有一个javascript/html代码，它在单独的html文件中运行良好，在JSFIDLE上运行良好，但当我在视图中的项目中尝试它时，它不起作用！我认为这是一个与JQuery版本相关的问题。我有最新版本，我删除了它并安装了1.8.3和1.7.1，但它仍然不工作！你有什么想法或方法来解决它吗？这快把我逼疯了

这里是指向JSFIDLE的链接：拖放上传

JQUERY标记输入插件

Visual Studio 2012 Express 2012用于Web、MVC 4 Internet应用程序

PS：我试过了

<script src="~/Scripts/jquery-1.7.1.js"></script>

及

布局页面

<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width" /> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head>


@Title-我的ASP.NET MVC应用程序
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）

编辑：

我下载了filedrop项目并在Visual Studio上运行它。。。上传拖放成功！这是它的查看页面源：

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.filedrop.js" type="text/javascript"></script>
</head>

<body>
<style type="text/css">
#dropZone {
    background: gray;
    border: black dashed 3px;
    width: 200px;
    padding: 50px;
    text-align: center;
    color: white;
}
</style>
<script type="text/javascript">
$(function () {
    $('#dropZone').filedrop({
        url: '/Home/UploadFiles',
        paramname: 'files',
        maxFiles: 5,
        dragOver: function () {
            $('#dropZone').css('background', 'blue');
        },
        dragLeave: function () {
            $('#dropZone').css('background', 'gray');
        },
        drop: function () {
            $('#dropZone').css('background', 'gray');
        },
        afterAll: function () {
            $('#dropZone').html('The file(s) have been uploaded successfully!');
        },
        uploadFinished: function (i, file, response, time) {
            $('#uploadResult').append('<li>' + file.name + '</li>');
        }
    });
});
</script>


<h2>File Drag & Drop Upload Demo</h2>
<div id="dropZone">Drop your files here</div>
<br/>
Uploaded Files:
<ul id="uploadResult">

</ul>
</body>
</html>


指数
#下降区{
背景：灰色；
边框：黑色虚线3px；
宽度：200px；
填充：50px；
文本对齐：居中；
颜色：白色；
}
$（函数（）{
$（“#dropZone”）.filedrop({
url:“/Home/UploadFiles”，
paramname:'文件'，
最大文件数：5，
dragOver:函数（）{
$（'#dropZone'）.css（'background'，'blue'）；
},
dragLeave:function（）{
$（'#dropZone'）.css（'background'，'gray'）；
},
drop：函数（）{
$（'#dropZone'）.css（'background'，'gray'）；
},
毕竟：功能（）{
$（'#dropZone'）.html（'文件已成功上载！'）；
},
上传完成：函数（i、文件、响应、时间）{
$（“#uploadResult”）.append（“”+file.name+””）；
}
});
});
文件拖放上传演示
把你的文件放在这里


上载的文件：

但它在我的项目中仍然不起作用！这是我的项目的查看页面源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title> - My ASP.NET MVC Application</title>
<script src="/Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/Scripts/jquery.filedrop.js" type="text/javascript"></script>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />         


    <link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title"><a href="/">Mocodis</a></p>
            </div>
            <div class="float-right">


            </div>
        </div>
    </header>
    <div id="body">

        <section class="content-wrapper main-content clear-fix">






<style type="text/css">
#dropZone {
    background: gray;
    border: black dashed 3px;
    width: 200px;
    padding: 50px;
    text-align: center;
    color: white;
}
</style>
<script type="text/javascript">
$(function () {
    $('#dropZone').filedrop({
        url: '/Home/UploadFiles',
        paramname: 'files',
        maxFiles: 5,
        dragOver: function () {
            $('#dropZone').css('background', 'blue');
        },
        dragLeave: function () {
            $('#dropZone').css('background', 'gray');
        },
        drop: function () {
            $('#dropZone').css('background', 'gray');
        },
        afterAll: function () {
            $('#dropZone').html('The file(s) have been uploaded successfully!');
        },
        uploadFinished: function (i, file, response, time) {
            $('#uploadResult').append('<li>' + file.name + '</li>');
        }
    });
});
</script>


<h2>File Drag & Drop Upload Demo</h2>
<div id="dropZone">Drop your files here</div>
<br/>
Uploaded Files:
<ul id="uploadResult">

</ul>

        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; 2013 - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    <script src="/Scripts/jquery-1.8.3.js"></script>


</body>
</html>


-我的ASP.NET MVC应用程序

#下降区{
背景：灰色；
边框：黑色虚线3px；
宽度：200px；
填充：50px；
文本对齐：居中；
颜色：白色；
}
$（函数（）{
$（“#dropZone”）.filedrop({
url:“/Home/UploadFiles”，
paramname:'文件'，
最大文件数：5，
dragOver:函数（）{
$（'#dropZone'）.css（'background'，'blue'）；
},
dragLeave:function（）{
$（'#dropZone'）.css（'background'，'gray'）；
},
drop：函数（）{
$（'#dropZone'）.css（'background'，'gray'）；
},
毕竟：功能（）{
$（'#dropZone'）.html（'文件已成功上载！'）；
},
上传完成：函数（i、文件、响应、时间）{
$（“#uploadResult”）.append（“”+file.name+””）；
}
});
});
文件拖放上传演示
把你的文件放在这里


上载的文件：


&抄袭；2013-我的ASP.NET MVC应用程序

如果没有完整的代码，我只能建议尝试一些更改：

将

type=“text/javascript”

添加到原始

中，因为它似乎已丢失

改为通过一个新的bundle添加JQuery（这也会自动获得最佳的JS压缩和版本控制功能）：

e、 g.将其添加到App_Start\BundleConfig.cs 并将其放入您的视图/shared/_layout.cshtml中：

@Scripts.Render("~/bundles/jquery")

要使用未压缩/未缓存的文件进行测试，请将其添加到

RegisterBundles（）的末尾
三,。使用Fiddler2查看实际发出的请求（即，它是否实际请求您的js文件）
您能否显示更多显示脚本放置位置的MVC页面？js脚本在页面中的位置非常重要。您使用的是哪个版本的MVC（Razor，还是更老的版本）？MVC4是Razor，我应该将js脚本放在页面的何处？我总是把它们放在开头。这里的JS函数在布局页面上查找库。在布局页面上我有：@ViewBag.Title-我的ASP.NET MVC应用程序@Styles.Render（“~/Content/css”）@Scripts.Render（“~/bundles/modernizer”）实际上，在BundleConfig.cs中已经有jquery捆绑包，所以我只在最后添加了enable optimizations=false。在布局中，scripts.render已经存在了……事实上，我创建了一个全新的项目，只是为了拖放，只是为了确保我的项目没有问题，我添加了type=text/javascript，但结果相同！这很奇怪，我会试试小提琴，看看到底发生了什么。谢谢大家!@克里斯蒂安·阿比亚伯：现在小提琴2显示了什么？如果您得到任何404，它可能有不正确的URL，或者如果它是一个旧项目，它可能会引入错误的JQuery版本。Fiddler2显示了JQuery 1.8.3的get请求和拖放上传的javascript。这都是304，所以我没有任何404错误！我下载了拖放uload的完整项目，并通过VisualStudio运行它，它成功了！我将编辑我的文章，并向您展示它的查看源页面，在它下面，我将放置我的项目的查看源页面，也许您会发现问题！多谢各位
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js");

@Scripts.Render("~/bundles/jquery")

BundleTable.EnableOptimizations = false;