ASP.NET MVCビューの入力フィールドを表示または非表示にするスクリプトのコントローラメソッドを使用

Question

選択したアイテムのデータベースデータに基づいて、ドロップダウンリストの選択に応じて、表示可能なドロップダウンリストとテキストフィールドを持つビューがあります。

コントローラ

ViewBag.RaceId = new SelectList(db.Races.OrderBy(o => o.Name), "Id", "Name"); 

ビュー

@Html.DropDownList("RaceId", null, htmlAttributes: new { @class = "form-control", @id = "race-choice" }) 

モデル

public class Race 
{ 
    [Key] 
    public int Id { get; set; } 

    [Required] 
    public string Name { get; set; } 

    [Required] 
    public bool IsLongLiver { get; set; } 
} 

私はこのようなスクリプトを使用することを計画

$('#race-choice').change(function() { 
    var selectedId = $(this).val(); 
    var isLongLiver = /* pass selectedId into specific Conroller method like 
    { 
     return (await db.RacesFindAsync(selectedId)).IsLongLiver; 
    } */ 
    if (isLongLiver) { 
     $('#long-liver-input').show(); 
    } else { 
     $('#long-liver-input').hide(); 
    } 
}); 

ここで、「long-liver-input」は、私が非表示にする予定のIDです。

しかし、問題があります。これを実装する方法はわかりません。助言がありますか？

Answer 1

jqueryからc＃メソッドを呼び出すことはできません。

ajaxを使用してコントローラメソッドを呼び出す必要があります。

例えば

コントローラ

public ActionResult GetData(int selectedId) 
{ 
    return Json((await db.RacesFindAsync(selectedId)).IsLongLiver , JsonRequestBehavior.AllowGet); 
} 

スクリプト

$('#race-choice').change(function() { 
    var selectedId = $(this).val(); 
    $.ajax({ 
     url : '',//controller method url 
     data : {selectedId: selectedId}, 
     success : function(data){ 
      if (data) { 
       $('#long-liver-input').show(); 
      } else { 
       $('#long-liver-input').hide(); 
      } 
     } 
    }) 
});