MVCのラジオボタンでダイナミックフィールドを表示

Question

MVCサイトで、特定のページの検索パラメータに使用される部分的なビューがあります。この部分では、特定の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が選択された後にも表示されます。私はUIが働いている...それは問題ではない。私が助けが必要なのは、"_RadioRange"ラジオボタンが選択されたときに"hideThis" divの入力フィールドを表示または非表示にする方法です。私はこれらの値をjavascript関数からコントローラに送信しています。私は、これらのフィールドの表示と非表示を支援する必要があります。どんな助けも大歓迎です。

Answer 1

あなたが使用していたJSフレームワーク（もしあれば）は何も言及していません。

JS：

var toggleChecked = function() { 
     var $this  = $(this), 
      $target  = $($this.data('target')) 
     ; 
     if ($this.is(':checked')) { 
      $target.toggle($this.data('display')); 
     } 
    } 
; 
$(document).on('click','[data-action=toggleChecked]', toggleChecked); 

HTML：ループ内

<input id='myRadio_y' name='myRadio' type='radio' value='1' 
    data-action='toggleChecked' data-target='#hideThis' data-display='true' /> 
<input id='myRadio_n' name='myRadio' type='radio' value='0' 
    data-action='toggleChecked' data-target='#hideThis' data-display='false' /> 

<div id='hideThis'>Dynamically Displayed Field</div> 

、 "hideThis" ID jQueryのでは、私は、動的フォーム表示のため頻繁に使用する再使用可能な方法を有しますループの繰り返しごとに固有のIDを持つ必要があります。

@{ int i = 0; } 

foreach(...) { 
    <input id='myRadio_y' name='myRadio' type='radio' value='1' 
     data-action='toggleChecked' data-target='#hideThis@(i)' data-display='true' /> 
    <input id='myRadio_n' name='myRadio' type='radio' value='0' 
     data-action='toggleChecked' data-target='#hideThis@(i)' data-display='false' /> 

    <div id='hideThis@(i)'>Dynamically Displayed Field</div> 
    i++; 
} 

説明：あなたは...各IDの末尾に次のようなもの@(i)を追加することができ

HTMLでの、データ・アクション=「toggleChecked」とのいずれかのチェックボックスやラジオボタンを切り替えることができます別のHTMLタグの表示。 data-targetはCSSセレクタでトグルするタグを指定し、data-display = "（true | false）"はその特定のラジオボタン/チェックボックスを表示するか非表示にするかを示します。

あなたの質問の正しいトラックにあるように見える場合は、記入をお手伝いします。

Answer 2

あなたの2つのラジオボタンは、name属性（両方とも同じ）を持つ必要があり、グループ化されています（現在はラジオボタンを選択でき、どちらも選択解除できません）。

無効なhtml（属性の複製id）の生成、検証なし、ビューにデータベースアクセスコードを含むなど、他にも複数の問題があり、単体テストには不可能です。

[ChildActionOnly]メソッドを作成して部分的なビューを返し、レイアウトで@Html.Action()を使用してレンダリングすることをお勧めします。その部分は、例えば

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とRequiredIfFalseAttributefoolproofからですが、条件属性の作成例をたくさん見つけるに注意してください、あなたは両方のクライアント側とサーバー側の検証を取得することを可能にするビューモデルに基づいている必要がありますSO。

お使いのコントローラのメソッドは、関連するテキストボックスの表示を切り替えるには、次のスクリプトが含まれ、部分図が

@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> 

やレイアウトになり

[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ようなものになるだろう

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