Razor 显示/隐藏基于使用 javascript 的单选按钮

Posted 2023-04-12

【中文标题】Razor 显示/隐藏基于使用 javascript 的单选按钮

【英文标题】：Razor show / hide base on radio button using javascript

【发布时间】：2021-12-08 17:23:18

【问题描述】：

我正在尝试在 ASP MVC 剃刀视图中隐藏或显示文本框，现在我使用 javascript 来处理当我单击单选按钮时可以帮助我执行隐藏或显示功能。 但是，我想基于数据库记录隐藏并显示文本框，所以如果我使用下面的代码，我需要单击收音机隐藏或显示文本框，任何人都可以给我建议如何根据数据库记录隐藏或显示文本框并且无需单击单选按钮？谢谢

<script type="text/javascript">
        const  checked  = require("modernizr");

         function text(x) 

           if  (x == 0 ) document.getElementById("name").style.display = "block",
                document.getElementById("address").style.display = "none",
               
            else  document.getElementById("name").style.display = "none",
                document.getElementById("address").style.display = "block",
            return;

        

    </script>

   //radio name
   @html.LabelFor(Model => Model.Type, "A")
   @Html.RadioButtonFor(Model => Model.Type, "A" , new  @onclick = "text(0)", @id = "but1" )
   
   @Html.LabelFor(Model => Model.Type, "B")
@Html.RadioButtonFor(Model => Model.Type, "B" , new  @onclick = "text(1)", @id = "but2" )

//textbox(name)
 <div class="form-group col-md-6" id="name">
  @Html.LabelFor(model => model.name, new  @class = "control-label" )
 @Html.TextBoxFor(model => model.name, new  @class = "form-control"e )
 </div>
 //textbox(address)
  <div class="form-group col-md-6" id="address">
  @Html.LabelFor(model => model.address, new  @class = "control-label" )
  @Html.TextBoxFor(model => model.address, new  @class = "form-control" )
                </div>

【问题讨论】：

您能澄清一下您所说的无需单击单选按钮是什么意思吗？ @iamnew

我个人使用javascript将当前输入值复制到父html标签的属性中。然后静态 css 规则可以找到要显示/隐藏的项目。

@SanjitMajumdar 是的，当我进入页面时，单选按钮将基于数据库默认为 A 或 B，但现在我需要单击显示或隐藏列的单选按钮，无法从默认 A 自动执行或B型。谢谢

嗨，@JeremyLakeman，是的，它正在工作，但如果默认 B 类型，名称文本框将隐藏，但如果我默认 A 类型，名称文本框也会隐藏，（A 类型应该是显示名称文本框） .谢谢

【参考方案1】：

<script>
  // self executing function here
(function() 
  // your page initialization code here
  // the DOM will be available here
  text(@Model.Value);
)();
</script>

这是一个文档准备功能。加载页面时将调用您的 text() 方法。 使用 @Model.Value 您的初始数据库值。这样，它将首次使用数据库中的值。