質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

解決済

部分ビューでのJavaScriptを有効にする方法

lain
lain

総合スコア161

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

3回答

0評価

2クリップ

21083閲覧

投稿2017/11/24 02:40

編集2017/11/24 06:16

###前提・実現したいこと
「ASP.NET MVC 5」での開発を最近始めたばかりです。

RenderSectionの動きがもう一つ良く分からないですが。
下記コードのように部分ビュー(_TopixView.cshtml)内でJavaScriptを書いているのですが、
部分ビュー内のJavaScriptが有効になりません。

Index.cshtml内のJavaScriptは有効になっています。

jsファイルを作成し、BundleConfig.csで追記することで動作は確認できているのですが、
部分ビュー内でしか使わないようなJavaScriptをビューの方にまとめられないかと?と思っています。

###該当のソースコード
Views/Shared/_Layout.cshtml

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="container body-content"> @RenderBody() </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", false) </body> </html>

Views/Shared/_TopixView.cshtml

@section scripts { <script type="text/javascript"> document.getElementById("topixTitle").style.color = "red"; </script> } <h2 id="topixTitle">トピックス</h2>

Views/Home/Index.cshtml

@{ ViewBag.Title = "Home Page"; } @section scripts { <script type="text/javascript"> document.getElementById("title").style.color = "blue"; </script> } <h2 id="title">Home Index</h2> <div> @Html.Partial("_TopixView") </div>

###補足情報(言語/FW/ツール等のバージョンなど)
Windows 10
Visual Studio Professional 2017
ASP.NET MVC 5
Bootstrap 3.3.7
jQuery 3.2.1

追記-1
修正依頼を受けまして出力されたhtmlファイルを追記します。
(見やすいように改行・インデントは変更しています。)

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Page - マイ ASP.NET アプリケーション</title> <link href="/Content/bootstrap.css" rel="stylesheet" /> <link href="/Content/site.css" rel="stylesheet" /> <script src="/Scripts/modernizr-2.6.2.js"></script> </head> <body> <div class="container body-content"> <h2 id="title">Home Index</h2> <div> <h2 id="topixTitle">トピックス</h2> </div> </div> <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/bootstrap.js"></script> <script src="/Scripts/respond.js"></script> <script type="text/javascript"> document.getElementById("title").style.color = "blue"; </script> </body> </html>

追記-2
部分ビューは別のページにも配置されるので、
@Html.Partal("_TopixView")の次の行に@section scriptsを書く案は、現実的ではないですね。
いちおう試してみたのですが@section scriptsの分割して書くと
「HttpException」が吐かれるので、一カ所にまとめないと駄目でした。
セクション名を変えれば大丈夫でしたが。

外部ファイルにする案は、
topix.js

JavaScript

document.getElementById("topixTitle").style.color = "red";

_TopixView.cshtml

<h2 id="topixTitle">トピックス</h2> <script type="text/javascript" src="~/Scripts/topix.js"></script>

上記のようにすると反映されるようになりました。

ただ、sk_3122様が書かれているのですが、投稿したコードのように単純なものではなく
実際のコードはAjaxでJSONデータ受け取ってDOMでゴニャゴニャするつもりなので、
どうなるかを試してみたいと思います。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

SurferOnWww

2017/11/24 03:15 編集

html ソースを見て、_Layout.cshtml の @RenderSection("scripts", false) の位置にレンダリングされるスクリプトはどうなってますか? Index.cshtml の @section scripts の { } 内のスクリプトは出力されるが、_TopixView.cshtml の方の @section scripts の { } 内のスクリプトは出力されないということですか?
lain

2017/11/24 03:36

SurferOnWww様 出力されたhtmlを追記しました。おっしゃられてる通り、_TopixView.cshtemの@section scriptの内容が出力されていない状態です。
SurferOnWww

2017/11/24 03:44

ということは、Index.cshtml の @Html.Partial("_TopixView") の次に行あたりに @section scripts { ... } として _TopixView.cshtml 用のスクリプトを記述する他なさそうな気がしますが、それでは目的に叶わないのですよね・・・
SurferOnWww

2017/11/24 05:43 編集

あとは、取り込むスクリプトは外部ファイルと理解してますが、あらかじめ minify しておいて、部分ビューのコード内にそれへの参照(script タグ)を埋め込みと言う方法もありそうです。バンドル機能はどのみち使えないので、機能的にはそれで良さそうに思いますが、いかがですか?
lain

2017/11/24 06:18

SurferOnWww様 ご返答ありがとうございます。ここでは書きにくいので追記-2をしました。
SurferOnWww

2017/11/24 06:56 編集

> 実際のコードはAjaxでJSONデータ受け取ってDOMでゴニャゴニャするつもりなので ← ということは、jQuery.js より後で読み込まれなければダメということでしょうか? であれば、ちょっと安易な方法のような気もしますが defer 属性を付けると言う手がありそうです。<script> タグに async / defer を付けた場合のタイミング https://qiita.com/phanect/items/82c85ea4b8f9c373d684 後は、サーバー側のコードで script タグを位置指定して書き込むという方法ぐらいでしょうか。(Web Forms アプリではよく使う手なのですが、MVC では未検討なので、できなかったらすみません)
lain

2017/11/24 08:35

deferを使用する方法を試してみました。jQueryを使用したコードでも動作しました。これは良く使われる方法なのですか?(初めて見た気がするので...)
SurferOnWww

2017/11/24 08:44

defer はもともとは IE 専用だったようですが、最近は他のメジャーなブラウザでも使えるようです。
lain

2017/11/27 00:46

deferを使用したコードで、いま確認できる環境、Windows/IE11/Edge/Chrome、android/Chrome、iPhone/Chrome/Safariでの(それぞれ最新バージョン)動作は確認できました。どこまで古いOS・ブラウザに対応させるかは別途検討するとして、有益な情報ありがとうございました。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。