web-dev-qa-db-fra.com

Jquery Hidden Field

Pourquoi ne puis-je pas obtenir la valeur de ce champ caché?

J'ai un contrôle ...

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

Ce qui se traduit par ...

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

Ce que j'essaie d'obtenir la valeur d'utiliser ...

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

Alors, qu'est-ce qui ne va pas?

je préfère cela

var dateTime = $("[id$=_HiddenFieldServerDateTime]").val();
asp.netjqueryhidden-field
30
Dooie

Parce que jQuery ne sait rien de asp:HiddenField. Il regarde dans la structure HTML où vous avez <input type="hidden" name="ctl00$cph_main$HiddenFieldServerDateTime" id="ctl00_cph_main_HiddenFieldServerDateTime" .... Il n'y a donc pas d'entrée avec ID= HiddenFieldServerDateTime. Il existe plusieurs façons de surmonter ce problème:

  • Utilisez un sélecteur css:

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

    avec le sélecteur suivant: var serverDateTime = $(".SomeStyle").val();

    CssClass n'est pas une classe disponible dans la classe HiddenField (et elle n'a pas de collection Attributes , vous ne pouvez donc pas l'ajouter manuellement).

  • Utilisez la propriété ClientID:

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

  • Enveloppez le champ caché dans quelque chose que vous pouvez sélectionner:

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


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

Je sais que cela a déjà été répondu et résolu mais voici deux alternatives (à mon avis) meilleures et plus simples. Si vous utilisez .NET4 (ou supérieur), vous pouvez utiliser ClientIDMode = "Static" pour forcer votre ID à être utilisé dans le code HTML généré:

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

ce qui signifie que vous pouvez le faire dans votre JQuery:

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

ou si vous souhaitez utiliser la route de classe css, utilisez un ASP: TextBox normal (qui a un attribut CssClass) mais ne l'affichez pas:

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

ce qui vous permet de faire ceci:

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

Notez que la classe css que vous utilisez ne doit être déclarée nulle part. Vous pouvez simplement l'utiliser comme marqueur.

20
CodeClimber

Je viens de rencontrer un problème similaire et ma réponse a été de créer un nouveau contrôle qui hérite de HiddenField et lui donne une propriété 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);
    }
}

Je suis maintenant en mesure d'affecter une classe à mes champs masqués et d'utiliser la valeur de classe pour trouver le champ correct du côté client.

Il convient également de noter que dans mon cas, les champs cachés sont créés dynamiquement dans le code derrière, ce qui précède peut nécessiter quelques améliorations pour être utilisable dans le concepteur.

J'espère que cela aide quelqu'un d'autre en cours de route.

10
Rozwel

Cela fonctionnera également en utilisant jQuery pour sélectionner tous les ID se terminant par _HiddenFieldServerDateTime.

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

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

4
Matthew O'Leary

Ajoutez un attribut de classe ".myHiddenValue" à la balise puis utilisez

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

ou puisque cela restituera après le chargement du document mon conseil utiliser ce

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

Note: also applies for the first example as well
1
Joberror