根据复选框选择启用@ Html.editorFor

Question

Hi I am still very new to web design and languages including JavaScript. 嗨，我对网页设计和语言（包括JavaScript）还是很陌生。

In a strongly typed cshtml view, is it possible to only show a textfield based on a checkbox (where both the textfield and the checkbox are strongly typed to the model?) I created a example scenario below: 在强类型的cshtml视图中，是否可能仅基于复选框显示文本字段（其中文本字段和复选框都强类型输入到模型？）我在下面创建了一个示例方案：

Sample Class: 样本类别：

namespace FruitSurveyNameSpace
{
    public class FruitSurvey 
    {
        public bool likesFruit { get; set; }
        public string fruitName { get; set; }
    }
}

Sample cshtml: 范例cshtml：

<!DOCTYPE html>
@using FruitSurveyNameSpace
@model FruitSurvey
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <p>Like Fruit? @Html.EditorFor(model => model.likesFruit) </p>
        <p>Which Fruit: @Html.EditorFor(model => model.fruitName)</p>
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

which generates the following html 生成以下html

<form action="/" method="post">
  <input name="__RequestVerificationToken" type="hidden" value="blahValue" />
  <fieldset>
    <legend>Survey</legend>
    <p>likesFruit?
      <input class="check-box" data-val="true" data-val-required="The likesFruit field is required." id="likesFruit1" name="likesFruit1Name" type="checkbox" value="true" />
    </p>
    <p>fruitName
      <input class="text-box single-line" id="fruitName1" name="fruitName1Name" type="text" value="" />
    </p>
  </fieldset>
</form>

As in the sample scenario above, it only makes sense for the user to input the fruit name once he/she selects that he/she likes fruit (dynamically). 与上面的示例场景一样，仅当用户选择（动态）喜欢水果时，才输入水果名称才有意义。 Otherwise, the fruit name input doesn't have any meaning and should not be displayed. 否则，水果名称输入没有任何意义，因此不应显示。 Furthermore, we probably enforce the user to input the fruit name once the he/she selects like fruit checkbox (currently I am using [Required] attribute in non dynamically generated fields and not sure if it would still work if becoming dynamic). 此外，一旦他/她选择了“水果”复选框，我们可能会强制用户输入水果名称（当前，我在非动态生成的字段中使用[Required]属性，并且不确定是否变为动态后仍然可以使用）。

As we can see, both values are strongly typed to the model, and that's why I'm using html helpers. 正如我们所看到的，两个值都强类型化到模型，这就是为什么我使用html helper。 Is there a way to do so without using JavaScript? 有没有不使用JavaScript的方法？ Or if there isn't, how should I do so in combination with html helpers? 或者，如果没有，我应该如何与html助手结合使用？

Many thanks in advance. 提前谢谢了。

Answer 1

For the validation, you would need a [RequiredIf] attribute. 为了进行验证，您需要一个[RequiredIf]属性。 There a many examples on SO or you can look at the MVC Foolproof Nuget package SO上有很多示例，或者您可以看一下MVC Foolproof Nuget包

As Rowan indicated, a 2 step wizard would be required if javascript is not acceptable. 如罗文指出，如果JavaScript不可接受，则需要两步向导。 If you can use javascript, then its simply a matter of toggling the textbox visibility based on the checked state of the checkbox. 如果可以使用javascript，则只需根据复选框的选中状态切换文本框可见性即可。

Based on the html above 基于上面的html

$('#likesFruit1').click(function() {
  $('#fruitName1').toggle();
});

This assumes that the the checkbox is initially checked, and the textbox is initially visible. 这假定复选框已被初始选中，并且该文本框最初是可见的。 Note also that this only toggles the textbox. 还请注意，这仅会切换文本框。 If you have associated labels and/or text where all the elements are wrapped in a container (say a div ) then you might want 如果您有关联的标签和/或文本，其中所有元素都包装在容器中（例如div ），那么您可能想要

$('#fruitName1').closest('div').toggle();

so that the associated elements are also toggled. 这样关联的元素也可以切换。

根据复选框选择启用@ Html.editorFor

问题描述

1 个解决方案

解决方案1
1 已采纳

根据复选框选择启用@ Html.editorFor

问题描述

1 个解决方案

解决方案1 1 已采纳

解决方案1
1 已采纳