Question

我正在使用ASP.net MVC。我在视图中有三个jquery滑块

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

并附带隐藏的html字段，其值将保存为db。

@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代码并将滑块的值动态保存到所有三个隐藏字段？

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

首先，您应该为隐藏的输入提供唯一的类，因为单个文档中的重复id属性无效。然后，您可以修改滑块上的data-hiddenfield属性以匹配相关输入的ID：

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

然后在滑块slide处理程序中，您可以读取隐藏的字段属性并设置相应输入的值，如下所示：

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对于元素应该是唯一的。没有两个元素应具有相同的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中，您可以使用css类作为jQuery选择器并设置值。

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

保存到视图中的多个隐藏字段

2 个答案: