Compte tenu des classes et de 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 la forme suivante:

<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 suis en mesure de mettre à jour à la fois l'instance School et le membre Address de l'école. C'est assez 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 me rends compte que je pourrais faire ce côté serveur mais il y aura d'autres éléments dynamiques sur la page qui affecteront la liste.

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

$(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);
    });
  });
});

Depuis Google Groupes :

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

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

Alors, je suppose que tu regardes

$(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);
    });
  });
});

Consultez également Comment sélectionner un élément par un identifiant contenant des caractères utilisés en notation CSS? sur la FAQ jQuery.

Vous ne pouvez pas utiliser un sélecteur d'identifiant jQuery si l'identifiant 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();

Échappez-vous à Jquery:

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

exemple d'utilisation:

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

plus d'infos ici .

La version Release Candidate d'ASP.NET MVC qui vient 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 en

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

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

Ceci est documenté dans la documentation de jQuery Selectors :

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

En bref, préfixez le .avec \\comme suit:

$("#Address\\.Country")

Pourquoi ne .fonctionne pas dans mon identifiant?

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

Lorsqu'il est échappé comme \\., le point sera traité comme du texte normal sans signification particulière, correspondant à l'ID souhaité <div id="Address.Country">.

Cela s'applique à tous les caractères !"#$%&'()*+,./:;<=>?@[\]^`{|}~qui auraient autrement une signification particulière en tant que sélecteur dans jQuery. Ajoutez-les simplement \\pour les traiter comme du texte normal.

Pourquoi 2 \\?

Comme indiqué dans la réponse de bdukes, il y a une raison pour laquelle nous avons besoin de 2 \caractères. \échappera au caractère suivant en JavaScript. Lorsque JavaScript interprète la chaîne "#Address\.Country", il verra le \, l'interprétera comme signifiant prendre le caractère suivant littéralement et le supprimer lorsque la chaîne est transmise comme argument à $(). Cela signifie que jQuery verra toujours la chaîne comme "#Address.Country".

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.

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

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

En utilisant deux backslashes c'est ok, ça marche. Mais si vous utilisez un nom dynamique, je veux dire, un nom de variable, vous devrez remplacer des caractères.

Si vous ne souhaitez pas changer 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.

Juste des informations supplémentaires: consultez ce problème ASP.NET MVC # 2403 .

Jusqu'à ce que le problème soit résolu, j'utilise mes propres méthodes d'extension comme 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 $ ("# Address_Street") mais sur le serveur, c'est comme Address.Street.

Un exemple de code suit:

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;
}

J'ai résolu le problème avec la solution donnée 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 "#" car dans mon code, je concat l'identifiant avec un autre texte

Police: Jquery Docs select élément avec des caractères spéciaux