Question

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

到目前为止我对此感到满意，现在我已经按照我的意愿运行了滑块，我希望能够从JavaScript属性或HTML中绑定C＃HiddenValue以便我可以保存我有的日期。除非有更好的方法将此值传递给后端......

到目前为止，我已经能够从c＃变量中绑定一个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

将javascript值传递给c＃，请执行以下操作：

<script type="text/javascript">
function abc()
{
   var str = "yourValue";
   document.getElementById("HiddenField1").value = str;
}
</script>

然后在代码隐藏时访问HiddenField1.Value。

要将c＃变量传递给javascript，您可以绑定公共变量，如下所示：

<%=this.YourVariable%>

Answer 2

您只需添加一行代码即可将日期值设置为隐藏字段。在幻灯片事件中添加以下代码和 .slider函数的创建事件

$("#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());

            }
        });
    });

P.S。如果要在创建滑块时在隐藏字段值中设置日期，请添加提到的代码行以创建事件。如果您只想设置日期是否更改，那么只需在幻灯片事件中添加该代码。

注意：在这个特定的场景中，它也没有使用这些更改。因此，在经过讨论和几次试验之后，我们发现了另外一件很小但却产生问题的事情。 asp隐藏字段的属性ClientIDMode未设置为静态，因为在渲染过程中其ID已更改，因此后期代码中的结果值不可用

希望有所帮助！

asp：HiddenField从Button Click上的JavaScript变量中获取值

2 个答案: