在腳本中使用控制器方法來顯示或隱藏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(); 
      } 
     } 
    }) 
});