在脚本中使用控制器方法在 MVC 视图中显示或隐藏 ASP.NET 输入字段

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();
}
});

其中"长肝输入"是我计划隐藏或显示的 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();
}
}
})
});