如何使用ASP.NET MVC基于单选按钮显示内容？

Question

如果我创建两个单选按钮，例如：

@Html.RadioButtonFor(model => model.IsFemale, "false") Male
@Html.RadioButtonFor(model => model.IsFemale, "true") Female

当按下true时，如何显示一个div，如果按下false，则隐藏它并显示另一个div？

我创建了非常简单的网站来测试这个：

@model WebApplication1.Models.Testi
<div>

        @Html.RadioButtonFor(model => model.isTest, "false", new { id = "male" })


        @Html.RadioButtonFor(model => model.isTest, "true", new { id = "female" })


        if (Model.isTest)
        {
            <div>
                Testdiv
            </div>
        }



</div>

简单型号：

public class Testi
{
    public bool isTest { get; set; }
}

Answer 1

你需要使用JavaScript。将onclick事件添加到两个单选按钮并调用JavaScript函数传递单选按钮的值：

@Html.RadioButtonFor(model => model.IsFemale, "false", new { onclick = "showNote(this.value);" }) Male
@Html.RadioButtonFor(model => model.IsFemale, "true", new { onclick = "showNote(this.value);" }) Female

然后添加要显示/隐藏的两个divs：

<div id="male">Notes for men</div>
<div id="female">Notes for women</div>

最后添加将完成工作的JavaScript函数：

<script>
  function showNote(isFemale) {
    var male = document.getElementById("male");
    var female = document.getElementById("female");
    if (isFemale == "true") {
      female.style.display = "block";
      male.style.display = "none";
    } else {
      male.style.display = "block";
      female.style.display = "none";
    }
  }
</script>