0

別のhtmlファイルで正常に動作するjavascript/htmlコードがあり、JSFiddleで正常に動作しますが、プロジェクトでビューで試してみると動作しません! JQuery のバージョンの問題だと思います。私は最新バージョンを持っています。それを削除して 1.8.3 と 1.7.1 をインストールしましたが、まだ動作しません! それを修正するアイデアや方法はありますか？それは私を夢中にさせています！

JSFiddle へのリンクは次のとおりです: http://jsfiddle.net/6bn3K/ ドラッグ アンド ドロップアップロード

http://jsfiddle.net/7aDak/ JQUERY TAGS INPUT PLUGIN

Visual Studio 2012 Express 2012 for Web、MVC 4 インターネット アプリケーション...

PS：やってみた

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

と

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

編集：

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>

そして、それはまだ私のプロジェクトでは機能していません! これは私のプロジェクトのビューページのソースです:

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

1 に答える 1

0

完全なコードがなければ、いくつかの変更を試すことしか提案できません。

  1. 不足しているように見えるためtype="text/javascript"、オリジナルに追加してください。<script src="~/Scripts/jquery-1.7.1.js"></script>

  2. 代わりに、新しいバンドルを介して JQuery を追加します (これにより、JS 圧縮とバージョン管理機能も自動的に最大限に活用されます)。

たとえば、これを App_Start\BundleConfig.cs に追加します

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

これを Views/shared/_layout.cshtml に入れます:

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

圧縮されていない/キャッシュされていないファイルでテストするには、これを末尾に追加しますRegisterBundles()

BundleTable.EnableOptimizations = false;

3. Fiddler2 を使用して、実際に行われているリクエストを確認します (つまり、実際に js ファイルをリクエストしているかどうか)。

于 2013-08-09T13:10:05.643 に答える