jQuery隐藏字段答案

【问题标题】：Jquery Hidden FieldjQuery隐藏字段
【发布时间】：2011-01-02 21:07:04
【问题描述】：

为什么我不能得到这个隐藏字段的值？

我有一个控制...

<asp:HiddenField ID="HiddenFieldServerDateTime" runat="server" />

呈现为...

<input type="hidden" name="ctl00$cph_main$HiddenFieldServerDateTime" id="ctl00_cph_main_HiddenFieldServerDateTime" value="08/01/2010 10:54:11"

我试图获得使用的价值...

var serverDateTime = $("#HiddenFieldServerDateTime").attr('value');

那怎么了？

我更喜欢这个

var dateTime = $("[id$=_HiddenFieldServerDateTime]").val();

【问题讨论】：

标签： asp.net jquery hidden-field

【解决方案1】：

因为 jQuery 对asp:HiddenField 一无所知。它在您拥有<input type="hidden" name="ctl00$cph_main$HiddenFieldServerDateTime" id="ctl00_cph_main_HiddenFieldServerDateTime" ... 的HTML 结构中查找。所以ID= HiddenFieldServerDateTime 没有输入。有几种方法可以解决这个问题：

~~使用 CSS 选择器：~~
```
<asp:HiddenField ID="HiddenFieldServerDateTime" 
                 runat="server" 
                 CssClass="SomeStyle" />
```
使用以下选择器：var serverDateTime = $(".SomeStyle").val();

CssClass 不是 HiddenField 类上的可用类（并且它没有 Attributes 集合，因此您无法手动添加它）。

使用ClientID属性：

var serverDateTime = $("#<%= HiddenFieldServerDateTime.ClientID %>").val();

将隐藏字段包裹在您可以选择的内容中：

<div class="date-time-wrap">
  <asp:HiddenField ID="..." runat="server" />
</div>

var serverDateTime = $('.date-time-wrap input[type=hidden]').val();

【讨论】：

【解决方案2】：

我知道这个问题已经得到解答和解决，但这里有两个更好（在我看来）和更简单的替代方案。如果您使用的是 .NET4（或更高版本），您可以使用 ClientIDMode="Static" 来强制在生成的 HTML 中使用您的 ID：

<asp:HiddenField ID="HiddenFieldServerDateTime" runat="server" ClientIDMode="Static" />

这意味着您可以在 JQuery 中执行此操作：

var serverDateTime = $('#HiddenFieldServerDateTime').val();

或者如果您想使用 css 类路由，则使用普通的 ASP:TextBox（具有 CssClass 属性），但不要显示它：

<asp:TextBox ID="HiddenFieldServerDateTime" runat="server" style="display:none" CssClass="MyStyle"></asp:TextBox>

它允许你这样做：

var serverDateTime = $('.MyStyle').val();

请注意，您使用的 css 类不必在任何地方实际声明。您可以将其用作标记。

【讨论】：

我喜欢文本框选项。 ClientIDMode=Static 对我来说似乎很冒险，但是我花了很多时间来构建控件，当它们有多个实例时，这些控件需要很好地发挥作用。
ClientIDMode 适用于单个控件，但在中继器中效果不佳，因为它们都会获得相同的 ID。

【解决方案3】：

我刚刚遇到了一个类似的问题，我的答案是创建一个继承自 HiddenField 的新控件，并为其赋予一个 CssClass 属性：

public class HiddenFieldWithClass : HiddenField
{
    [CssClassProperty]
    [DefaultValue("")]
    public virtual string CssClass 
    {
        get
        {
            string Value = this.ViewState["CssClass"] as string;
            if (Value == null)
                Value = "";
            return Value;
        }
        set
        {
            this.ViewState["CssClass"] = value;
        }
    }

    protected override void Render(HtmlTextWriter writer)
    {
        if (this.CssClass != "")
        {
            writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssClass);
        }
        base.Render(writer);
    }
}

我现在可以为我的隐藏字段分配一个类，并使用该类值在客户端找到正确的字段。

可能还值得注意的是，在我的例子中，隐藏字段是在代码后面动态创建的，上面可能需要一些增强功能才能在设计器中使用。

希望这可以帮助其他人。

【讨论】：

【解决方案4】：

这也适用于使用 jQuery 选择所有以 _HiddenFieldServerDateTime 结尾的 ID。

var myVal = $("[id$='_HiddenFieldServerDateTime']").val();

【讨论】：

【解决方案5】：

<input type="hidden" ID="HiddenFieldServerDateTime" runat="server" class="HiddenFieldServerDateTime" />

【讨论】：

【解决方案6】：

在标签中添加一个类属性“.myHiddenValue”然后使用

var myVal = $(".myHiddenValue").val()

或者因为这将在加载文档后呈现，我建议使用它

$(document).ready(function(){
   var myVal = $("input[name='ctl00$cph_main$HiddenFieldServerDateTime']").val();
 }
);

Note: also applies for the first example as well

【讨论】：