Question

我有一个包含图像控件的页面，该控件使用Javascript显示特定文件夹（幻灯片放映）中的图像。我在页面加载上设置了HiddenField Value的值，并希望使用Javascript访问这些值。但是，在页面加载上设置隐藏字段的值后，Javascript中隐藏字段的值显示为NULL。

在.aspx页面：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js"></script>


</head>
     <script type="text/javascript">

         var folderNm = document.getElementById('<%#HiddenFieldFolderName.ClientID%>');
         var MaxIndex = document.getElementById('<%#HiddenFieldMaxIndex.ClientID%>');
         var mainImage = document.getElementById('mainImage');
         //mainImage.src = "Presentations/7/Slide1.GIF";
         //Initilize start value to 1 'For Slide1.GIF'
         var currentIndex = 1;

         //NOTE: Set this value to the number of slides you have in the presentation.
         //var maxIndex = 7;
         var maxIndex = MaxIndex;
         alert("Folder Name " + folderNm + "\n MaxIndex  " + MaxIndex);
         function swapImage(imageIndex) {
             //Check if we are at the last image already, return if we are.
             if (imageIndex > maxIndex) {
                 currentIndex = maxIndex;
                 return;
             }

             //Check if we are at the first image already, return if we are.
             if (imageIndex < 1) {
                 currentIndex = 1;
                 return;
             }

             currentIndex = imageIndex;
             //Otherwise update mainImage
             //document.getElementById("mainImage").src = 'PPT/GIFs/Slide' + currentIndex + '.GIF';
             document.getElementById("mainImage").src = 'Presentations/' + folderNm + '/' + 'Slide' + currentIndex + '.GIF';
             // document.getElementById("mainImage").src = 'Presentations/7/Slide' + currentIndex + '.GIF';
             return;
         }
    </script>
<body>
    <form id="form1" runat="server" >
        <div>
            <div>

               <%-- <img src="PPT/GIFs/Slide1.GIF" id="mainImage" name="mainImage" width="50%" height="50%" alt="">--%>
                <img  id="mainImage" name="mainImage" width="25%" height="25%" alt="">
            </div>
            <div>
                <a href="#" onclick="swapImage(0);">
                    <img src="/images/firstss.png" border="0" alt="First"></a>
                <a href="#" onclick="swapImage(currentIndex-1);">
                    <img src="/images/prev.png" border="0" alt="Previous"></a>
                <a href="#" onclick="swapImage(currentIndex+1);">
                    <img src="/images/nexts.png" border="0" alt="Next"></a>
                <a href="#" onclick="swapImage(maxIndex);">
                    <img src="/images/lasts.png" border="0" alt="Last"></a>
            </div>
            <div>
                <asp:HiddenField ID="HiddenFieldMaxIndex" runat="server" />
                <asp:HiddenField ID="HiddenFieldFolderName" runat="server" />

            </div>
        </div>
    </form>
</body>

</html>

在.aspx.cs文件中：

protected void Page_Load(object sender, EventArgs e)
        {
            string foldername = string.Empty;
            if (Request.QueryString["di"] != null)
            {
                foldername = Request.QueryString["di"].ToString();
                HiddenFieldFolderName.Value = foldername;
                HiddenFieldMaxIndex.Value = Request.QueryString["Files"].ToString();
            }

    }

此处，隐藏字段值在alert（）框中显示为null。帮助感谢。

Answer 1

您需要修改

<%#HiddenFieldFolderName.ClientID%>

到

<%= HiddenFieldFolderName.ClientID %>

对<%#HiddenFieldMaxIndex.ClientID%>执行相同操作请参阅ASP.NET inline expressions和this question

Answer 2

如果您检查页面来源，是否看到隐藏的输入？

如果我是正确的（最近没有使用过很多webforms）buildin asp：HiddenField不会将字段放在生成的HTML中。因此，您的javascript函数找不到该字段并返回null。

您可以使用asp：TextBox组件并使用css（display：none;）隐藏它。这样，文本框在HTML中呈现，但对最终用户不可见（除非他通过页面源搜索）。你javascript会找到控件，并且能够读取文本框的值。

尝试使用Firebug for Firefox或Chrome页面检查器等工具来处理这类错误。

Answer 3

您已添加对jquery的引用，那么为什么不使用它呢？

var folderNm= $("#<%= HiddenFieldFolderName.ClientID %>").val();
var index= $("#<%= HiddenFieldMaxIndex.ClientID %>").val();

alert("Folder Name " + folderNm+ "\n MaxIndex  " + index);

为其他人做同样的事情..

即使使用上述功能也不起作用，因为当您访问隐藏字段时，文档可能尚未就绪。

 var currentIndex = 1;
   var folderNm  = 0;
   var MaxIndex = 0;
   alert($("#<%= HiddenFieldFolderName.ClientID %>").val()); // this will return null

   // but when document ready you can get values, 
    $(document).ready(function () {
        folderNm= $("#<%= HiddenFieldFolderName.ClientID %>").val();
        MaxIndex= $("#<%= HiddenFieldMaxIndex.ClientID %>").val();
        alert("Folder Name " + folderNm+ "\n MaxIndex  " + MaxIndex); 
    });

如果您需要在没有jquery的情况下检查此问题，请将所有代码放入swapImage功能并进行检查，这样就可以了。

参考：jquery ID Selector (“#id”)

如何在asp.net中的Javascript中设置页面加载和访问的HiddenField值？

3 个答案: