asp: HiddenField получить значение из JavaScript Variable on Button Нажмите

Question

Я довольно новичок в JavaScript и jQuery, хотя я часто использовал компоненты jQuery UI, я почти ничего не делал. В этом случае мне нужно было настроить jQuery Slider для настройки даты, и я создал что-то в следующем виде: http://jsfiddle.net/ryn_90/Tq7xK/6/.

Я доволен тем, что до сих пор, и теперь, когда я получил слайдер, работающий так, как мне бы хотелось, я хотел бы связать C# HiddenValue с атрибутом JavaScript или с HTML, чтобы я мог сохраните дату, которую у меня есть. Если нет лучшего способа получить это значение для бэкэнда ...

До сих пор мне удалось привязать значение JavaScript из переменных C#, но не выяснили, как это сделать наоборот.

Это мой 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. Добавьте указанную строку кода для создания события, только если вы хотите установить дату в скрытом поле для создания слайдера. Если вы хотите установить только, если дата изменяется, просто добавьте этот код только в слайд-событие.

Примечание: В этом конкретном scenerio он также не работал с изменениями. Поэтому после обсуждения и нескольких испытаний мы обнаружили еще одну вещь, которая была незначительной, но создала проблему. свойство ClientIDMode Asp скрытого поля не был установлен статическим из-за которой его идентификатор был изменен во время рендеринга и в качестве значения результата не было доступен в коде за поздний

Надежда, что помогает!

Answer 2

Чтобы передать значение C# яваскрипта сделать так:

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

, а затем HiddenField1.Value доступ на код-сзади.

Чтобы перейти с # переменную Javascript вы можете связать открытую переменную так:

<%=this.YourVariable%>