Speichern in mehreren versteckten Feldern in Sicht

Question

Ich benutze ASP.net MVC. Ich habe drei jquery Schieberegler in der Ansicht

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

und begleitende versteckte HTML-Felder, deren Wert in db speichern wird.

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

Ist es möglich, die gleiche Javascript-Code zu verwenden und den Wert des Schiebereglers dynamisch auf alle drei versteckte Felder, bevor Formulareinreichung speichern?

Slider 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

Zunächst sollten Sie Ihre verborgenen Eingänge eine einzigartige Klasse geben als doppelte id Attribute in einem einzigen Dokument ungültig ist. Anschließend können Sie das data-hiddenfield Attribut auf dem Schieberegler ändern, um die ID des zugehörigen Eingangs zum Spiel:

<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" }) 

Dann slide Handler in den Schieberegler können Sie die ausgeblendete Feld Eigenschaft lesen und den Wert der entsprechenden Eingabe eingestellt , wie folgt aus:

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

im Beispiel I sichtbare Textfelder verwendet, um die Wirkung Vs. zu machen Aber auch mit versteckten Eingängen wird es immer noch einwandfrei funktionieren.

Beachten Sie auch die Verwendung von find() aus dem Ereignisziel, um das Problem aller geänderten Balkenfarben zu beheben.

Answer 2

Zuerst gibt nicht den gleichen ID-Wert auf alle Ihre Eingabefelder ein. IDs sollten für Elemente eindeutig sein. Keine zwei Elemente sollten den gleichen Id-Wert haben. Html.HiddenFor Helper-Methode wird eine Id und name für Ihr Eingabefeld aus der Modell/Eigenschaft Meta-Informationen generieren.

Geben Sie einen css-Klassennamen für alle ausgeblendeten Felder an.

Jetzt in Ihrem Javascript können Sie die CSS-Klasse als jQuery Selektor verwenden und den Wert festlegen.

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