2012-08-12 21 views
17

私は、ASP .NET MVC 4 WebAPIプロジェクトを作成しました。JQuery After Body ASP .NET MVC 4

デフォルトの_Layout.cshtmlを見ると、本文がレンダリングされた後に(頭にはない)jqueryスクリプトが挿入されていることがわかります。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/themes/base/css", "~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 
    @RenderBody() 

    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

これは_Layout.cshtmlを補正するのheadセクションに

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

を移動

$(document).ready(function() {...}). 

を作成しようと、当然の

$ is not defined 

エラーが発生問題とjquery wo期待どおりのrks。

どうしたのですか?私は間違ったことをやっていますか?Scriptのデフォルトの場所に理由がありますか?_Layout.cshtmlの中にレンダリングしますか?

答えて

10

スクリプトの読み込みと実行は、ページのレンダリングをブロックします。

これは、ページの複数の部分にアラートを追加することで確認できます。そのため、jsファイルをページの後ろに配置することをお勧めします。

また、ページの最後に、jqueryが追加されたページの後ろにページスクリプトのセクションを置くことで、問題を解決することもできます。

編集:ここかみそりのセクションについてのスコット・ガスリーからの記事があります:http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

+0

これを私のcshtmlファイルでどのように指定しますか? – Jeff

+0

私はRazorのセクションを説明している記事へのリンクを使って答えを編集しました。 – linkerro

+0

私を助けてくれた人。私は、jqueryのメインスクリプトの実行の背後にある、部分的なビューで他のすべてのスクリプトをプッシュする必要がありました。 – MUG4N

3

@Scripts.Render("~/bundles/jquery")あなたはjQueryのダイアログを作成しようとすると、この問題がより明らかになりMVC 4とVS 2010での問題を引き起こしています。

JeffN825が述べたように、唯一の方法は、@Scripts.Render("~/bundles/jquery")をコメントアウトすることです。

今知られていない既知のものは次のとおりです。@Scripts.Render("~/bundles/jquery")をコメントアウトすると何が分かりますか?

私は、次のjqueryのライブラリを使用しています:

<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery-ui-1.8.23.min.js" type="text/javascript"></script> 

注:jqueryの-1.7.2.min.jsが機能しないでしょう。以下のように、これは、より直接的な答えは次のようになり方法の詳細に受け入れ答えのリンクが、

0

_Layout.cshtmlは行が含まれています...

@RenderSection("scripts", required: false) 

...どのビューに "scripts"という名前のセクションを挿入します。 Index.cshtml:

<p>This is Index.cshtml</p> 
@section scripts { 
    <script> 
     $(document).ready(function() { 
     alert("This script is inserted by RenderSection after jQuery script is inserted.") 
     }) 
    </script> 
}