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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

ASP.NET

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

Q&A

解決済

1回答

3595閲覧

ASP.NET MVC ドロップダウンリストの制御方法

OMG_GG

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

ASP.NET

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

0グッド

0クリップ

投稿2021/11/08 07:34

編集2021/11/08 10:11

言語:C# (バックエンド)
フレームワーク
.NetFramework4.5
ASP.NET MVC(

Visual Studio 2013

Windows10

ASP.NET MVC がレンダリングする html ソースを JavaScript を使って操作したいです。

内容としては、

ドロップダウンリストを2つ作って、
1つ目のドロップダウンリストから特定のものが選ばられたときに
2つ目のドロップダウンリストを無効化(disabled)したいです。
また、特定のものが選ばれていないときは有効化したいです。

google chromeで下記のコードで試しているのですが、制御できません。

Viewはrazor構文で、C#を使っています。

cshtml

1~~~~ 2//1 3@HtmlEnumDropDownListFor(m => m.hogehoge new {@class = "xxx"}) 4 5//2 6@HtmlEnumDropDownListFor(m => m.fugafuga new {@class = "xxx"}) 7 8<script> 9 10$(#hogehoge).change(function()){ 11 var value = $("#hogehoge").val(); 12 if(value == 1){ 13 $("#fugafuga").prop("disabled" , true); 14 }else{ 15 $("#fugafuga").prop("disabled" , false); 16 } 17}); 18 19</script>

if文の中はalertで通っていることを確認しています。

changeイベントでhogehogeリストの変更を感知して、
hogehogeリストのvalueを取得、特定の値だったら、
fugafugaリストにpropを使用してdisable属性を与えて、
有効/無効を切り替えようと試みました。

良い方法をご存知の方、ご教示ください。
よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/11/08 08:39

何はともあれ、まずは質問に何を作っているか(ASP.NET と言っても Web Forms, MVC, Web Pages, Web API, Razor Pages その他いろいろある)と開発環境(OS. Visual Studio のバージョン、.NET Framework か Core のどっちかとそのバージョンなど)を書こう。その情報なしで質問は成り立たないぐらい重要な情報です。
OMG_GG

2021/11/08 09:30

かなり昔なのでなぜこのようになっているか思い出せないです。申し訳ございません。 わかる範囲で環境書いてみました。
退会済みユーザー

退会済みユーザー

2021/11/08 09:48

ASP.NET MVC であれば View を Razor 表記できるということだけで、Razor Pages ではないです。Razor のタグは消して、本文の Razor Pages (ビュー)も削除した方が良さそうです。 また、ASP.NET MVC の問題というよりは、ASP.NET MVC がレンダリングする html ソースを JavaScript を使って操作するという話として質問することをお勧めします。その方が回答が集まりやすいです。
OMG_GG

2021/11/08 10:14

理解不足で申し訳ないです。質問を理解していただけるように少しずつ修正してみます。
退会済みユーザー

退会済みユーザー

2021/11/08 11:07

質問に書かれている View のコードでだけではなくて、それが html にレンダリングされたときの html ソースも書いて、1 つ目のドロップダウンリストの何を選ぶと 2 つ目をどうしたいのか、選択が外れるとどうしたのかもっと具体的に書くことをお勧めします。 今の情報では、ASP.NET MVC を知らない人には全く分かりませんし、知っている人も具体性が無くて分からないと思います(実際自分は分かりません)。
退会済みユーザー

退会済みユーザー

2021/11/09 21:16

質問者さん、その後無言ですが、回答したのでそれに対するフィードバックを書こう。役に立った/立たなかったぐらいはすぐ返せるのでは? 役に立たなかったらどこが期待と違うかなどを書くと、よりあなたの期待に近い回答が得られるかも。とにかく無言で放置は NG です。
OMG_GG

2021/11/09 22:50

返信遅くなり申し訳ありません。いただいたサンプルを使って、動作することが確認できました。 とても参考になるソースでした。ありがとうございます。
guest

回答1

0

ベストアンサー

コメントに対する返事がありませんので詳細不明ですが、とりあえず回答を書いておきます。

@HtmlEnumDropDownListFor(m => m.hogehoge new {@class = "xxx"})
@HtmlEnumDropDownListFor(m => m.fugafuga new {@class = "xxx"})

文法的に間違ってます。これではコンパイルも通らないはず。

そこは単なる転記ミスで、html ソースには 2 つの select / option 要素が生成されていて、select 要素にはそれぞれ hogehoge, fugafuga という名前の id が付与されていて、hogehoge の方の option 要素の一つには value="1" があると善意に解釈しても、

$(#hogehoge).change(function()){

がまた間違ってます。$("#hogehoge").change(function()){ でないとダメなはず。

if文の中はalertで通っていることを確認しています。

とのことですがどうやるとそれが確認できるのか不思議です。

上記の間違いを直してもダメだとすると、id は正しいのか、jQuery.js はスクリプトの前に読み込まれているか、select / option 要素はスクリプトの前に読み込まれているかなどが怪しいと思います。

これならできるという例を書いておきます。

Controller と Model

using System.Linq; using System.Web.Mvc; using System.ComponentModel.DataAnnotations; namespace Mvc5App3.Controllers { public class DropDownController : Controller { public ActionResult Enum() { return View(); } } public enum CategoryEnum { [Display(Name = ".NET")] DotNet, [Display(Name = "クラウド")] Cloud, [Display(Name = "リファレンス")] Reference } public enum SupplierEnum { [Display(Name = "New Orleans Cajun Delights")] NewOrlieans, [Display(Name = "Grandma Kelly's Homestead")] Granma, [Display(Name = "Tokyo Traders")] Tokyo } public class Article { [Display(Name ="カテゴリー")] public CategoryEnum Category { get; set; } [Display(Name = "サプライヤー")] public SupplierEnum Supplier { get; set; } } }

View

Visual Studio 2019 のテンプレートを使って作ったプロジェクトのレイアウトを使っているのが条件。

@model Mvc5App3.Controllers.Article @{ ViewBag.Title = "Enum"; } <h2>Enum</h2> @Html.EnumDropDownListFor(model => model.Category, null, htmlAttributes: new { @class = "form-control" }) <br /> @Html.EnumDropDownListFor(model => model.Supplier, null, htmlAttributes: new { @class = "form-control" }) @section Scripts { <script> $("#Category").on("change", function () { var value = $("#Category").val(); if(value == 1){ $("#Supplier").prop("disabled" , true); }else{ $("#Supplier").prop("disabled" , false); } }); </script> }

html ソース

上の View の @Html.EnumDropDownListFor から生成される select / option 要素

<select class="form-control" data-val="true" data-val-required="カテゴリー フィールドが必要です。" id="Category" name="Category"> <option selected="selected" value="0">.NET</option> <option value="1">クラウド</option> <option value="2">リファレンス</option> </select> <br /> <select class="form-control" data-val="true" data-val-required="サプライヤー フィールドが必要です。" id="Supplier" name="Supplier"> <option selected="selected" value="0">New Orleans Cajun Delights</option> <option value="1">Grandma Kelly&#39;s Homestead</option> <option value="2">Tokyo Traders</option> </select>

結果

イメージ説明

投稿2021/11/09 02:55

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

OMG_GG

2021/11/09 22:52

ご回答いただきありがとうございます。 ビューでドロップダウンリストを作るときに、「htmlAttributes:」 なるものを指定していますが、 これは調べている中で全然でてこなかったのですが、どういう意味を持つのでしょうか。
退会済みユーザー

退会済みユーザー

2021/11/09 23:37

それは class 属性を付与しているだけです。結果の html ソースを見てください。今回の質問の JavaScript / jQuery による操作とは関係ありません。 今回の質問内容とは関係ないので、もし詳しいことが聞きたいのであれば、新たに別のスレッドをたてて質問してください。 このスレッドの課題は回答で解決していると思います。ベストアンサーをつけてクローズしてください。
OMG_GG

2021/11/10 00:59

承知いたしました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問