在脚本中使用控制器方法来显示或隐藏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(); 
      } 
     } 
    }) 
});