在 ASP.NET 中访问 JavaScript 变量答案

【问题标题】：Access JavaScript variable in ASP.NET在 ASP.NET 中访问 JavaScript 变量
【发布时间】：2020-05-20 00:47:33
【问题描述】：

我正在尝试访问锚标记的 href 属性中的 JavaScript 变量。

Javascript：

<script language="javascript">
    $(document).ready(function(){
        $(":input[name= 'purpose']").on('change', function(){
             var TravelSelection = $(this).val();
             /*alert(TravelSelection);*/
             var pageName
             if (TravelSelection == '1') {
                 pageName = '#page1';
             } else {
                 pageName = '#page2';
             }
             document.getElementById('<%=purposeHidden.ClientID%>').value = pageName;
        });
    });
</script>

HTML/ASPX 代码：

<form id="survey" action="#" runat="server">
    <section id="purpose" data-role="page">
        <div data-role="content" class="content">
            <p>
               <legend class="title">Visitation Purpose & Entrance:</legend>
               <div class="ui-corner-all ui-shadow" style="padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px;">
                  <legend style="font-weight:700;">Visitation Purpose:</legend>
                  <fieldset data-role="controlgroup" data-mini="true">
                     <input type="radio" id="meeting" value="1" name="purpose" />
                     <label for="meeting">Meeting</label>
                     <input type="radio" id="event" value="2" name="purpose" />
                     <label for="event">Event</label>
                  </fieldset>
                  <asp:HiddenField ID="purposeHidden" runat="server"/>
               </div>
                </p>
            <p><a href="<%=purposeHidden.value%>" data-role="button" data-theme="c" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">Next</a></p>
         </div>
      </section>

      <section id="page1" data-role="page">
        ..display this page
      </section>
</form>

我想将隐藏字段调用 purposeHidden 的值传递给 href 值，但单击下一个按钮后它什么也没发生。

【问题讨论】：

标签： javascript asp.net jquery-mobile

【解决方案1】：

我看到您正在直接访问 HiddenField 的值，这可能不起作用。我建议先获取元素引用，然后调用它的值。见：

代替：

<a href="<%=purposeHidden.value%>" data-role="button" data-theme="c" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">Next</a>

试试：

<a href="#" id='anchorElement' data-role="button" data-theme="c" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">Next</a>

<script>
$(document).ready(function(){
    $('#anchorElement').on('click', function(){
        var whereTo = $('#<%= purposeHidden.ClientID %>').val();
        window.location.href = whereTo;
        return false;
    });
});
</script>

或者您可以绑定更改事件并使用 jquery 设置 href 值。

$(document).ready(function(){
    $('#<%= purposeHidden.ClientID %>').on('change', function(){
        var whereTo = $(this).val();
        $('#anchorElement').attr('href', whereTo);
        return false;
    });
});

或者只是你应该在你设置隐藏字段值的地方设置它的值。

<script language="javascript">
    $(document).ready(function(){
        $(":input[name= 'purpose']").on('change', function(){
             var TravelSelection = $(this).val();
             /*alert(TravelSelection);*/
             var pageName
             if (TravelSelection == '1') {
                 pageName = '#page1';
             } else {
                 pageName = '#page2';
             }
             document.getElementById('<%=purposeHidden.ClientID%>').value = pageName;
             $('#anchorElement').val(pageName); // This line...
        });
    });
</script>

【讨论】：