asp：HiddenField从JavaScript获取值按钮变量点击

Question

虽然我经常使用jQuery UI组件，但我几乎没有做过任何修改，但我对JavaScript和jQuery相当陌生。在这种情况下，我需要调整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

您可以通过添加的代码只是单行设置日期值的隐藏字段。添加以下代码的幻灯片事件内部和创建.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被改变是不是在代码中后期背后

希望帮助！

Answer 2

要通过JavaScript值到C＃做的是这样的：

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

，然后在后台代码访问HiddenField1.Value。

要通过C＃变量的JavaScript可以公共变量绑定是这样的：

<%=this.YourVariable%>