c# - ASP :HiddenField get value from JavaScript Variable upon Button Click

Question

我对 JavaScript 和 jQuery 比较陌生，虽然我经常使用 jQuery UI 组件，但我之前几乎没有做过任何修改。在这种情况下，我需要调整 jQuery Slider 来调整日期，我创建了如下内容:http://jsfiddle.net/ryn_90/Tq7xK/6/ .

到目前为止，我对此很满意，现在我已经让 slider 按我希望的方式工作，我希望能够从 JavaScript 属性或 HTML 绑定(bind)一个 C# HiddenValue，这样我就可以保存我的日期。除非有什么更好的方法把这个值传到后端...

到目前为止，我已经能够从 C# 变量绑定(bind)一个 JavaScript 值，但还没有找到相反的方法。

这是我的javascript代码:

    <script>
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

        jQuery(function() {
            var dlg = jQuery("#sliderPopup").dialog({ 
                draggable: true, 
                resizable: true, 
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                },
                width: 320, 
                autoOpen: false, 
                minHeight: 10, 
                minwidth: 10 
              });
          dlg.parent().appendTo(jQuery("form"));
        });

        $("#popupOpener").click(function () {
            $("#dialog").dialog("open");
        });

        $("#sliderPopupOpener").click(function () {
            $("#sliderPopup").dialog("open");
        });
    });

    $(function () {
        $("#slider").slider({
            max: 30,
            min: -30,
            value: 0,
            slide: function (event, ui) {
                $("#days").val(ui.value);
                $("#date").text(addDaysToDate(parseInt($("#days").val())));
            },
            create: function (event, ui) {
                $("#date").text(addDaysToDate(parseInt($("#days").val())));
            }
        });
    });

    $("#days").val($("#slider").slider("value"));

    $("#days").change(function (event) {
        var data = $("#days").val();
        if (data.length > -30) {
            if (parseInt(data) >= 0 && parseInt(data) <= 30) {
                $("#slider").slider("option", "value", data);
            }
            else {
                if (parseInt(data) < -30) {
                    $("#days").val("-30");
                    $("#slider").slider("option", "value", "-30");
                }
                if (parseInt(data) > 30) {
                    $("#days").val("30");
                    $("#slider").slider("option", "value", "30");
                }
            }
        }
        else {
            $("#slider").slider("option", "value", "0");
        }
        $("#date").text(addDaysToDate(parseInt($("#days").val())));
    });

    function addDaysToDate(days) {
        var mths = new Array("Jan", "Feb", "Mar",
        "Apr", "May", "Jun", "Jul", "Aug", "Sep",
        "Oct", "Nov", "Dec");

        var d = new Date(<%=deadlineYear%>, <%=deadlineMonth%>, <%=deadlineDay%>);
        d.setHours(d.getHours() + (24 * days));

        var currD = d.getDate();
        var currM = d.getMonth();
        var currY = d.getFullYear();

        return mths[currM] + " " + currD + ", " + currY;
    }

    jQuery(function() {
       var dlg = jQuery("#sliderPopup").dialog({ 
                            draggable: true, 
                            resizable: true, 
                            show: 'Transfer', 
                            hide: 'Transfer', 
                            width: 320, 
                            autoOpen: false, 
                            minHeight: 10, 
                            minwidth: 10 
              });
      dlg.parent().appendTo(jQuery("form"));
    });
</script>

这是 asp.NET 代码:

<div id="sliderPopup" title="Modify Deadline">
    <div id="slider"></div>
    <input type="text" id="days" value="0"/>
    <div id="date"></div>
    <asp:HiddenField ID="ModifiedDeadlineDateFromSlider" />
    <asp:Button ID="DeadlineDateSave" Text="Save Deadline" runat="server"             OnClick="saveDeadline" />
</div>

如果您需要更多信息，请告诉我。感谢您的回答和评论。

Answer 1

您只需添加一行代码即可将日期值设置到隐藏字段。在 slide 事件 和 .slider 函数的 create 事件中添加以下代码

$("#ModifiedDeadlineDateFromSlider").val(addDaysToDate(parseInt($("#days").val())));

或

$("#ModifiedDeadlineDateFromSlider").val($("#date").text());

您的 .slider 函数在修改后将如下所示。

$(function () {
        $("#slider").slider({
            max: 30,
            min: -30,
            value: 0,
            slide: function (event, ui) {
                $("#days").val(ui.value);
                $("#date").text(addDaysToDate(parseInt($("#days").val())));

                $("#ModifiedDeadlineDateFromSlider").val($("#date").text());

            },
            create: function (event, ui) {
                $("#date").text(addDaysToDate(parseInt($("#days").val())));

                $("#ModifiedDeadlineDateFromSlider").val($("#date").text());

            }
        });
    });

附言仅当您还想在创建 slider 时在隐藏字段值中设置日期时，才添加上述代码行以创建事件。如果您只想在日期更改时设置，则只需在幻灯片事件中添加该代码即可。

注意:在这个特定的场景中，它也没有使用更改。因此，在讨论和几次试验之后，我们又发现了一件小事，但却造成了问题。 asp 隐藏字段的属性 ClientIDMode 未设置为静态，因此其 ID 在呈现期间发生更改，结果值在后期代码中不可用

希望对您有所帮助!