1

我对 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>

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

4

2 回答 2

1

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

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

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

要将 c# 变量传递给 javascript，您可以像这样绑定公共变量：

<%=this.YourVariable%>
于 2013-03-13T09:43:24.997 回答
1

您只需添加一行代码即可将日期值设置为隐藏字段。在幻灯片事件和.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());

            }
        });
    });

PS 仅当您还想在创建滑块时在隐藏字段值中设置日期时，才添加提到的代码行来创建事件。如果您只想在日期更改时设置，那么只需在幻灯片事件中添加该代码。

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

希望有帮助！

于 2013-03-13T10:09:22.907 回答