javascript - 在 MVC 中使用单选按钮显示动态字段

Question

我的 MVC 站点中有一个部分 View ，用于特定页面的搜索参数。在此部分中，我根据特定 ID 号动态显示参数。其中一些参数需要允许用户输入精确值或值范围。这是我到目前为止所拥有的:

<form id="DynamicFieldsForm">
    @{
        List<DynamicParameter> ddParams = dal.GetParameters();
        foreach (DynamicParameter dp in ddParams.OrderBy(d => d.ParameterName))
        {
            <div>
                <div class="form-group col-lg-12">
                    <div class="designerDataParamRangeSelect">
                        <input type="radio" id="@(dp.ParameterID)_RadioExact" value="exact" />Exact<br />
                        <input type="radio" id="@(dp.ParameterID)_RadioRange" value="range" />Range
                    </div>

                    <input class="form-control" type="text" id="@(dp.ParameterID)_Lower" name="@(dp.ParameterID)_Lower" placeholder="@dp.ParameterName Lower" value="" @maxLength />
                    <div id="hideThis">
                        <input class="form-control" type="text" id="@(dp.ParameterID)_Upper" name="@(dp.ParameterID)_Upper" placeholder="@dp.ParameterName Upper" value="" @maxLength />
                    </div>
                </div>
            </div>
        }
    }
</form>

从下拉列表中选择特定 ID 后也会显示此部分 View 。我的用户界面正在运行...这不是问题。我需要帮助的是，当选择 "_RadioRange" 单选按钮时，如何显示或隐藏 "hideThis" div 中的输入字段。我将这些值从 JavaScript 函数发送到 Controller ，所有这些都有效。我只需要显示和隐藏这些字段的帮助。非常感谢任何帮助。

Answer 1

您的 2 个单选按钮需要有一个 name 属性(两者相同)，以便将它们分组(目前您可以选择这两个单选按钮，并且无法取消选择)。

但是，您的实现还存在多个其他问题，包括生成无效的 html(重复的 id 属性)、没有验证以及在 View 中包含数据库访问代码，导致单元测试几乎不可能。

我建议您首先创建一个返回部分 View 的[ChildActionOnly]方法，并在布局中使用@Html.Action()来呈现它。例如，该部分应该基于允许您获得客户端和服务器端验证的 View 模型

public class ParameterVM
{
    public string Name { get; set; }
    public bool HasRange { get; set; }
    [RequiredIfFalse(ErrorMessage = "...")]
    public int? Value { get; set; }
    [RequiredIfTrue("HasRange", ErrorMessage = "...")]
    public int? LowerLimit { get; set; }
    [RequiredIfTrue("HasRange", ErrorMessage = "...")]
    public int? UpperLimit { get; set; }
}

请注意，RequiredIfTrueAttribute 和 RequiredIfFalseAttribute 来自 foolproof ，但是您会发现很多在 SO 上创建条件属性的示例。

你的 Controller 方法会是这样的

[ChildActionOnly]
public ActionResult Parameters()
{
    var model = dal.GetParameters().OrderBy(x => x.ParameterName).Select(x => new ParameterVM()
    {
        Name = x.ParameterName,
        HasRange = ... // set defaults for other properties as required
    }).ToList();
    return PartialView("_Parameters", model);
}

_Parameters.cstml 部分 View 将是

@model List<ParameterVM>
<form>
    @for(int i = 0; i < Model.Count; i++)
    {
        <div class="parameter">
            @Html.DisplayFor(m => m[i].Name)
            <label>
                @Html.RadioButtonFor(m => m[i].HasRange, false, new { id = "", @class = "radio" })
                <span>Exact</span>
            </label>
            <label>
                @Html.RadioButtonFor(m => m[i].HasRange, true, new { id = "", , @class = "radio" })
                <span>Range</span>
            </label>
            <div class="exact"@(Model.HasRange ? " hidden" ? "")>
                @Html.LabelFor(m => m[i].Value)
                @Html.TextBoxFor(m => m[i].Value)
                @Html.ValidationMessageFor(m => m[i].Value)
            </div>
            <div class="range@(Model.HasRange ? "" ? " hidden")>
                @Html.LabelFor(m => m[i].LowerLimit)
                @Html.TextBoxFor(m => m[i].LowerLimit)
                @Html.ValidationMessageFor(m => m[i].LowerLimit)
                @Html.LabelFor(m => m[i].UpperLimit)
                @Html.TextBoxFor(m => m[i].UpperLimit)
                @Html.ValidationMessageFor(m => m[i].UpperLimit)
            </div>   
        <div>
    }
</form>

并在布局中包含以下脚本来切换关联文本框的可见性

$('.radio').change(function() {
    var container = $(this).closest('.parameter');
    container.find('.exact').toggleClass('hidden');
    container.find('.range').toggleClass('hidden');
});