Comment faire en sorte que jQuery sélectionne des éléments avec un fichier. (période) dans leur identité?

Question

Étant donné les classes et la méthode d'action du contrôleur suivantes:

public School
{
  public Int32 ID { get; set; }
  publig String Name { get; set; }
  public Address Address { get; set; }
}

public class Address
{
  public string Street1 { get; set; }
  public string City { get; set; }
  public String ZipCode { get; set; }
  public String State { get; set; }
  public String Country { get; set; }
}

[Authorize(Roles = "SchoolEditor")]
[AcceptVerbs(HttpVerbs.Post)]
public SchoolResponse Edit(Int32 id, FormCollection form)
{
  School school = GetSchoolFromRepository(id);

  UpdateModel(school, form);

  return new SchoolResponse() { School = school };
}

Et le formulaire suivant:

<form method="post">
  School: <%= Html.TextBox("Name") %><br />
  Street: <%= Html.TextBox("Address.Street") %><br />
  City:  <%= Html.TextBox("Address.City") %><br />
  Zip Code: <%= Html.TextBox("Address.ZipCode") %><br />
  Sate: <select id="Address.State"></select><br />
  Country: <select id="Address.Country"></select><br />
</form>

Je peux mettre à jour l'instance School et le membre Address de l'école. C'est plutôt sympa! Merci à l’équipe ASP.NET MVC!

Cependant, comment utiliser jQuery pour sélectionner la liste déroulante afin de pouvoir la pré-remplir? Je réalise que je pourrais faire ce côté serveur, mais il y aura d’autres éléments dynamiques sur la page qui affectent la liste.

Ce qui suit est ce que j'ai jusqu'ici, et cela ne fonctionne pas car les sélecteurs ne semblent pas correspondre aux identifiants:

$(function() {
  $.getJSON("/Location/GetCountryList", null, function(data) {
    $("#Address.Country").fillSelect(data);
  });
  $("#Address.Country").change(function() {
    $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
      $("#Address.State").fillSelect(data);
    });
  });
});

Answer 1

De Groupes Google :

  

Utilisez deux barres obliques inverses avant chaque caractère spécial.

     

Une barre oblique inverse dans un sélecteur jQuery échappe au caractère suivant. Mais vous avez besoin   deux d'entre eux parce que la barre oblique inverse est aussi le caractère d'échappement pour JavaScript   des cordes. La première barre oblique inverse échappe à la seconde, vous donnant une   barre oblique inverse dans votre chaîne - qui échappe ensuite au caractère suivant pour jQuery.

Donc, je suppose que vous regardez

$(function() {
  $.getJSON("/Location/GetCountryList", null, function(data) {
    $("#Address\\.Country").fillSelect(data);
  });
  $("#Address\\.Country").change(function() {
    $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
      $("#Address\\.State").fillSelect(data);
    });
  });
});

Vérifiez également Comment sélectionner un élément à l'aide d'un ID comportant des caractères utilisés en notation CSS? dans la FAQ de jQuery.

Answer 2

Vous ne pouvez pas utiliser de sélecteur d'identifiant jQuery si celui-ci contient des espaces. Utilisez un sélecteur d'attribut:

$('[id=foo bar]').show();

Si possible, spécifiez également le type d'élément:

$('div[id=foo bar]').show();

Answer 3

Échapper à Jquery:

function escapeSelector(s){
    return s.replace( /(:|\.|\[|\])/g, "\\$1" );
}

exemple d'utilisation:

e.find('option[value='+escapeSelector(val)+']')

plus d'informations ici .

Answer 4

La version finale de ASP.NET MVC qui venait d'être publiée a résolu ce problème. Elle remplace désormais les points par des traits de soulignement pour l'attribut ID.

<%= Html.TextBox("Person.FirstName") %>

Rend à

<input type="text" name="Person.FirstName" id="Person_FirstName" />

Pour plus d'informations, consultez les notes de publication à partir de la page 14.

Answer 5

Ceci est documenté dans les documents d 'Sélection jQuery :

  

Pour utiliser l'un des méta-caractères (tels que   !"#$%&'()*+,./:;<=>?@[\]^`{|}~) en tant que partie littérale d'un nom, il doit   être échappé avec deux barres obliques inverses: \\. Par exemple, un élément avec   id="foo.bar", pouvez utiliser le sélecteur $("#foo\\.bar").

En bref, préfixez le . <<> comme suit:

$("#Address\\.Country")

Pourquoi $('#Address.Country') ne fonctionne-t-il pas avec mon identifiant?

Le problème est que <div id="Address" class="Country"> a une signification particulière, la chaîne suivante est interprétée comme un sélecteur de classe. Donc, \\. correspondrait à <div id="Address.Country">.

Lorsqu’il est échappé en tant que \, le point sera traité comme du texte normal sans signification particulière, correspondant à l’ID souhaité "#Address\.Country".

Ceci s’applique à tous les caractères $() qui auraient autrement une signification particulière en tant que sélecteur dans jQuery. Ajoutez simplement "#Address.Country" pour les traiter comme du texte normal.

Pourquoi 2 <=>?

Comme indiqué dans la réponse de bdukes, il existe une raison pour laquelle nous avons besoin de 2 <=> caractères. <=> échappera le caractère suivant en JavaScript. Si JavaScript interprète la chaîne <=>, il verra la <=>, interprétez-la comme signifiant prend littéralement le caractère suivant et la supprime lorsque la chaîne est transmise. comme argument à <=>. Cela signifie que jQuery verra toujours la chaîne comme <=>.

C’est là que le second <=> entre en jeu. Le premier indique à JavaScript d'interpréter le second comme un caractère littéral (non spécial). Cela signifie que le second sera vu par jQuery et comprendra que le <=> caractère suivant est un caractère littéral.

Ouf! Peut-être pouvons-nous visualiser cela.

//    Javascript, the following \ is not special.
//         | 
//         |
//         v    
$("#Address\\.Country");
//          ^ 
//          |
//          |
//      jQuery, the following . is not special.

Answer 6

L’utilisation de deux barres obliques inverses c’est & # 180; ok, c’est & # 180; s travail. Mais si vous utilisez un nom dynamique, je veux dire un nom de variable, vous devrez remplacer les caractères.

Si vous ne & # 180; ne souhaitez pas & # 180; t modifier les noms de vos variables, vous pouvez le faire:

var variable="namewith.andother";    
var jqueryObj = $(document.getElementById(variable));

et que vous avez votre objet jQuery.

Answer 7

Juste des informations supplémentaires: Consultez cette le numéro 2403 d'ASP.NET MVC .

Jusqu'à ce que le problème soit résolu, j'utilise mes propres méthodes d'extension, telles que Html.TextBoxFixed, etc., qui remplace simplement les points par des traits de soulignement dans l'attribut id (pas dans l'attribut name), de sorte que vous utilisez jquery comme $ ( quot; #Address_Street ") mais sur le serveur, c'est comme Address.Street.

Exemple de code suivant:

public static string TextBoxFixed(this HtmlHelper html, string name, string value)
{
    return html.TextBox(name, value, GetIdAttributeObject(name));
}

public static string TextBoxFixed(this HtmlHelper html, string name, string value, object htmlAttributes)
{
    return html.TextBox(name, value, GetIdAttributeObject(name, htmlAttributes));
}

private static IDictionary<string, object> GetIdAttributeObject(string name)
{
    Dictionary<string, object> list = new Dictionary<string, object>(1);
    list["id"] = name.Replace('.', '_');
    return list;
}

private static IDictionary<string, object> GetIdAttributeObject(string name, object baseObject)
{
    Dictionary<string, object> list = new Dictionary<string, object>();
    list.LoadFrom(baseObject);
    list["id"] = name.Replace('.', '_');
    return list;
}

Answer 8

J'ai résolu le problème avec la solution fournie par jquery docs

Ma fonction:

//funcion to replace special chars in ID of  HTML tag

function jq(myid){


//return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );
return myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );


}

Remarque: je supprime le " # " parce que dans mon code je concat l'ID avec un autre texte

Police: L'élément Jquery Docs sélectionne des caractères spéciaux