09

ASP.NET デフォルトのレイアウトでハマり

windows c# asp.net razor 開発

聞いても誰得なハマりを共有するコーナーです

ASP.NET MVC4 (C#) のテンプレート生成して、jQueryとjQuery pluginを読み込んで（もちろんBundleConfigに定義の上）実行してみるんだけどもどうやってもpluginが読み込まれない。書き方はこんな感じ。

<div class=“gridster”>
  ….
</div>

@Scripts.Render(“~/bundles/jquery”);
@Scripts.Render(“~/bundler/jquery.gridster”);

<script text=“javascript”>
$(function(){
  $(“gridster ul”).gridster({ …. } ) // このgridsterでエラーになる
})
</script>

gridterを呼び出そうとするとエラー。Chromeのログなんかを見ても404とかエラーもないし、リソース自体は問題なく読み込まれているように見える。読み込み順序まで確認したりしていたのだけど、とくに問題になりそうな点は無い。

ASP.NET MVC4 (C#) のテンプレート（サンプル？）を生成すると、レイアウトファイルを使用した形の物になっている。レイアウトファイルって言うのは全体的にスタイルやデザインを統一できるようにヘッダとかフッタとなる枠（というかデザインテンプレート）が記述されていて、その枠の中にコンテンツを差し込めるポイントが定義されているもの。コンテンツの実体（つまりView）はこの枠に対して差し込む形で記述する。なのでViewのソースだけ気にしていると分からない点がある・・・・という事を、当初あまりよく理解していなかった。

たまたま生成されたレイアウトファイルを眺めていたらこのフッタ部分に

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

と記述されているのを見つけて、コンテンツの一番最後でjqueryが再読み込み（再初期化）されているらしい、という事に気がついた。おかげで一度読んだプラグインが消えてしまっていた、という事みたい。まさかこんな事になっているとは思っていなかったので全く原因に思い至らず3時間ほど無駄にしてしまった。

この記述に気づいてからコメントアウトしてみたらあっさり動いたのでふざけんなMS、と思ったんだけど、そもそもなんなのこれ、と思って調べたら（まあ何となくレイアウトの仕組みから想像してはいたんだけど）、要するにスクリプトはここ、scriptsセクションで動くようにViewの方を定義しろって事ですね。

Viewの方のスクリプトは以下のように書かないといけない。

@section scripts {
  @Scripts.Render(“~/bundler/jquery.gridster”);

  <script text=“javascript”>
  $(function(){
    $(“gridster ul”).gridster({ …. } )
  })
  </script>
}

これでようやく一歩進めた…。 けどここで使ってるgridster、IE10では動いているけど、なぜかChromeでは動かない。demoサイトではどちらも動いているので、なんか記述がおかしいんだろうけど、ほぼサンプルをコピペしてるだけだというのにこの苦痛・・・。