asp:HiddenField在点击按钮时从JavaScript变量中获取值

本文关键字：JavaScript 变量 获取 按钮 HiddenField asp | 更新日期: 2023-09-27 18:03:44

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

我很高兴到目前为止，现在我得到了滑块工作，因为我想它，我希望能够绑定一个c# HiddenValue从JavaScript属性或从HTML，所以我可以保存我的日期。除非有更好的方法将这个值传递到后端…

到目前为止，我已经能够从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>
如果你需要更多的信息，请告诉我。

asp:HiddenField在点击按钮时从JavaScript变量中获取值

您可以通过添加一行代码将日期值设置为隐藏字段。在滑动事件和的创建事件中添加以下代码。滑块函数

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

注:添加上述代码行来创建事件，只有当你想在创建滑块时设置隐藏字段值的日期。如果你想设置只有当日期发生变化时，只需在幻灯片事件中添加该代码。

注意:在这个特殊的场景中，它也不能与更改一起工作。经过讨论和几次试验，我们发现了另一件事，这是次要的，但造成了问题。asp隐藏字段的属性ClientIDMode没有设置为静态，因为它的ID在渲染过程中被改变了，结果值在

后面的代码中不可用

希望有帮助!

将javascript的值传递给c#:

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

，然后访问HiddenField1。值

将c#变量传递给javascript，你可以像这样绑定公共变量:

<%=this.YourVariable%>
相关文章：