複数の非表示フィールドをビューに保存

Question

私はASP.net MVCを使用しています。ビュー内に3つのjqueryスライダがあります。

<div class="slider" data-hiddenfield="amount" style="width:200px;"></div> 

と値がdbに保存される非表示のhtmlフィールドがあります。

@Html.HiddenFor(model => model.fear, new { @id = "cvar" }) 
@Html.HiddenFor(model => model.control, new { @id = "cvar" }) 
@Html.HiddenFor(model => model.danger, new { @id = "dvar" }) 

それは同じJavascriptコードを使用すると、フォームの送信前に、すべての3つの非表示フィールドに動的にスライダーの値を保存することは可能ですか？

スライダーJavascriptを：

$(document).ready(function() { 
$(function() { 
    $(".slider").slider({ 
     orientation: "Horizontal", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 60, 
     slide: function (event, ui) { 
      $("#cvar").val(ui.value); //to be saved to hidden field 
      var g = parseInt(ui.value <= 50 ? 255 : 255 - ((ui.value - 50) * (255/50))); 
      var r = parseInt(ui.value >= 50 ? 255 : 255 - ((50 - ui.value) * (255/50))); 
      $(".ui-widget-header").css("background", "rgb(" + r + "," + g + ",0)"); 
     }, 

     create: function (event, ui) { 
      $(".ui-widget-header").css("background", "rgb(255, 200 ,0)"); 
     } 
    }); 
}); 

Answer 1

は、まず、あなたの隠された入力のユニークなクラスを与える必要があります。あなたが隠しフィールドのプロパティを読み、適切な入力の値を設定することができ、スライダーslideハンドラに続いて

<div class="slider" data-hiddenfield="fear" style="width:200px;"></div> 
<div class="slider" data-hiddenfield="control" style="width:200px;"></div> 
<div class="slider" data-hiddenfield="danger" style="width:200px;"></div> 

@Html.HiddenFor(model => model.fear, new { @id = "fear" }) 
@Html.HiddenFor(model => model.control, new { @id = "control" }) 
@Html.HiddenFor(model => model.danger, new { @id = "danger" }) 

：あなたは、関連する入力のIDと一致するスライダにdata-hiddenfield属性を修正することができます、このような：私は効果OBVを作るために目に見えるテキストフィールドを使用した例で

slide: function (event, ui) { 
    $('#' + $(event.target).data('hiddenfield')).val(ui.value); 
    var g = parseInt(ui.value <= 50 ? 255 : 255 - ((ui.value - 50) * (255/50))); 
    var r = parseInt(ui.value >= 50 ? 255 : 255 - ((50 - ui.value) * (255/50))); 
    $(event.target).find(".ui-widget-header").css("background", "rgb(" + r + "," + g + ",0)"); 
}, 

Working example

それは隠された入力でも問題なく動作します。

イベントターゲットからfind()を使用して、変更されているすべてのバーの色の問題を修正することに注意してください。

Answer 2

まず、すべての入力フィールドに同じid値を与えることはありません。 IDは要素に対して一意でなければなりません。 2つの要素が同じId値を持つべきではありません。 Html.HiddenForヘルパーメソッドは、モデル/プロパティーメタ情報から入力フィールド用にIdとnameを生成します。

すべての非表示フィールドに同じCSSクラス名を付けます。

@Html.HiddenFor(model => model.fear, new { @class= "myClass" }) 
@Html.HiddenFor(model => model.control, new { @class= "myClass" }) 
@Html.HiddenFor(model => model.danger, new { @class= "myClass" }) 

JavaScriptの場合、jQueryセレクタとしてcssクラスを使用して値を設定できます。単一のドキュメント内の重複id属性は無効であるとして

$(".myClass").val(ui.value);