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

Question

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

Visual Studio 2013

Windows10

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

内容としては、

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

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

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

~~~~
//1
@HtmlEnumDropDownListFor(m => m.hogehoge new {@class = "xxx"})

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

<script>

$(#hogehoge).change(function()){
  var value = $("#hogehoge").val();
  if(value == 1){
    $("#fugafuga").prop("disabled" , true);
  }else{
   $("#fugafuga").prop("disabled" , false);
  }
});

</script>

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

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

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

Comments

[退会済みユーザー]

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

[退会済みユーザー]

https://teratail.com/questions/127977 ←あなたはレス、回答をもらっても何もフィードバックを返さず放置する人？

[OMG_GG]

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

[退会済みユーザー]

ASP.NET MVC であれば View を Razor 表記できるということだけで、Razor Pages ではないです。Razor のタグは消して、本文の Razor Pages (ビュー）も削除した方が良さそうです。

また、ASP.NET MVC の問題というよりは、ASP.NET MVC がレンダリングする html ソースを JavaScript を使って操作するという話として質問することをお勧めします。その方が回答が集まりやすいです。

[OMG_GG]

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

[退会済みユーザー]

質問に書かれている View のコードでだけではなくて、それが html にレンダリングされたときの html ソースも書いて、1 つ目のドロップダウンリストの何を選ぶと 2 つ目をどうしたいのか、選択が外れるとどうしたのかもっと具体的に書くことをお勧めします。

今の情報では、ASP.NET MVC を知らない人には全く分かりませんし、知っている人も具体性が無くて分からないと思います（実際自分は分かりません）。

[退会済みユーザー]

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

[OMG_GG]

返信遅くなり申し訳ありません。いただいたサンプルを使って、動作することが確認できました。

とても参考になるソースでした。ありがとうございます。

Answer 1

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

@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>

結果

Comments

[OMG_GG]

ご回答いただきありがとうございます。

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

[退会済みユーザー]

それは class 属性を付与しているだけです。結果の html ソースを見てください。今回の質問の JavaScript / jQuery による操作とは関係ありません。

今回の質問内容とは関係ないので、もし詳しいことが聞きたいのであれば、新たに別のスレッドをたてて質問してください。

このスレッドの課題は回答で解決していると思います。ベストアンサーをつけてクローズしてください。

[OMG_GG]

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