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

【问题标题】：Saving to multiple hidden fields in view保存到视图中的多个隐藏字段
【发布时间】：2016-04-07 15:38:16
【问题描述】：

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

滑块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)");
        }
    });
});

【问题讨论】：

您只需要一个 document.ready 处理程序；你可以安全地删除$(document).ready(function () {
注明。最后一件事，由于用户可能选择将滑块保留为其默认值，除了使用 startPos 和 endPos 并计算最后的差异之外，还有更简单的方法吗？
最简单的方法是默认隐藏字段的值以匹配滑块，在本例中为60。
刚刚安排好了 - 工作:) 谢谢

标签： javascript jquery asp.net-mvc razor

【解决方案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() 来解决所有条形颜色都被更改而不是正在修改的问题。

【讨论】：

这也会造成所有三个滑块的颜色都发生变化的情况 - 关于颜色如何保持滑块特定的任何想法，从而保留单独的阴影？
没问题，很乐意提供帮助。

【解决方案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);

【讨论】：