Visual Studio ASP.net MVC Jquery版本问题

Question

I have a javascript/html code that works fine in a separate html file, and works fine on JSFiddle BUT when I try it on my project in a view, it doesnt work! 我有一个javascript / html代码，可以在单独的html文件中正常工作，并且在视图中在项目上尝试使用JSFiddle BUT时也可以正常工作，它不起作用！ I think it's a JQuery version-related issue. 我认为这是与JQuery版本相关的问题。 I have the latest version, I removed it and installed the 1.8.3 and the 1.7.1 but it's still not working! 我拥有最新版本，我将其删除并安装了1.8.3和1.7.1，但仍无法正常工作！ Do you have any idea or a way to fix it? 您有什么主意或解决方法吗？ It's driving me crazy! 这让我疯狂！

Here's the link to JSFiddle: http://jsfiddle.net/6bn3K/ DRAG AND DROP UPLOAD 这是指向JSFiddle的链接： http : //jsfiddle.net/6bn3K/ DRAG AND DROP UPLOAD

http://jsfiddle.net/7aDak/ JQUERY TAGS INPUT PLUGIN http://jsfiddle.net/7aDak/ JQUERY标签输入插件

Visual Studio 2012 Express 2012 for Web, MVC 4 Internet Application... 适用于Web，MVC 4 Internet应用程序的Visual Studio 2012 Express 2012 ...

PS: I tried PS：我尝试过

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

and 和

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript" charset="utf-8"></script>

Layout Page 版面页面

<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>

Edit: 编辑：

I downloaded the filedrop project and run it on Visual Studio... the upload drag and drop worked! 我下载了filedrop项目，并在Visual Studio上运行它……上传拖放成功了！ this is the view page source of it: 这是它的查看页面来源：

<!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>

And it's still not working in my project! 而且它仍然无法在我的项目中工作！ this is the view page source of my project: 这是我的项目的视图页面源：

<!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>

Answer 1

Without full code I can only suggest a few changes to try: 没有完整的代码，我只能建议您尝试一些更改：

add type="text/javascript" to your original <script src="~/Scripts/jquery-1.7.1.js"></script> as it appears to be missing. 将type="text/javascript"到原始<script src="~/Scripts/jquery-1.7.1.js"></script>因为它似乎丢失了。
Add JQuery via a new bundle instead (this also gets the best of JS compression and version control features automatically): 而是通过新的捆绑包添加JQuery（这也会自动获得JS压缩和版本控制功能的最佳效果）：

eg add this to App_Start\\BundleConfig.cs 例如，将其添加到App_Start \\ BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js");

and put this into your Views/shared/_layout.cshtml: 并将其放入您的Views / shared / _layout.cshtml中：

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

To test with uncompressed/uncached files add this to the end of RegisterBundles() 要测试未压缩/未缓存的文件，请将其添加到RegisterBundles()的末尾

BundleTable.EnableOptimizations = false;

3. Use Fiddler2 to see what requests are actually being made (ie is it actually requesting your js files) 3.使用Fiddler2查看实际发出的请求（即它实际上是否在请求您的js文件）

Visual Studio ASP.net MVC Jquery版本问题

问题描述

1 个解决方案

解决方案1
0 2013-08-09 13:10:05

eg add this to App_Start\\BundleConfig.cs 例如，将其添加到App_Start \\ BundleConfig.cs

Visual Studio ASP.net MVC Jquery版本问题

问题描述

1 个解决方案

解决方案1 0 2013-08-09 13:10:05

eg add this to App_Start\\BundleConfig.cs 例如，将其添加到App_Start \\ BundleConfig.cs

解决方案1
0 2013-08-09 13:10:05