Dadas las siguientes clases y método de acción del controlador:

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

Y la siguiente forma:

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

Puedo actualizar tanto la instancia de la escuela como el miembro de la dirección de la escuela. ¡Esto es bastante bueno! ¡Gracias al equipo ASP.NET MVC!

Sin embargo, ¿cómo uso jQuery para seleccionar la lista desplegable para poder completarla previamente? Me doy cuenta de que podría hacer este lado del servidor, pero habrá otros elementos dinámicos en la página que afectarán la lista.

Lo siguiente es lo que tengo hasta ahora, y no funciona ya que los selectores no parecen coincidir con los 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);
    });
  });
});

De Grupos de Google :

Use dos barras invertidas antes de cada personaje especial.

Una barra invertida en un selector jQuery escapa al siguiente carácter. Pero necesita dos porque la barra diagonal inversa también es el carácter de escape para las cadenas de JavaScript. La primera barra diagonal inversa escapa a la segunda, dándole una barra diagonal inversa real en su cadena, que luego escapa al siguiente carácter para jQuery.

Entonces, supongo que estás mirando

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

Consulte también ¿Cómo selecciono un elemento por una ID que tiene caracteres utilizados en notación CSS? en las preguntas frecuentes de jQuery.

No puede usar un selector de id jQuery si el id contiene espacios. Use un selector de atributos:

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

Si es posible, especifique también el tipo de elemento:

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

Escápelo por Jquery:

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

ejemplo de uso:

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

Más información aquí .

El Release Candidate de ASP.NET MVC que se acaba de lanzar solucionó este problema, ahora reemplaza los puntos con guiones bajos para el atributo ID.

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

Renders a

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

Para obtener más información, vea las notas de la versión, comenzando en la página 14.

Esto está documentado en los documentos de jQuery Selectors :

Para utilizar cualquiera de los meta-caracteres (tales como !"#$%&'()*+,./:;<=>?@[\]^`{|}~) como una parte literal de un nombre, hay que escapó con dos barras invertidas con: \\. Por ejemplo, un elemento con id="foo.bar", puede usar el selector $("#foo\\.bar").

En resumen, prefije el .con de la \\siguiente manera:

$("#Address\\.Country")

Por qué no . funciona en mi identificación?

El problema es que .tiene un significado especial, la siguiente cadena se interpreta como un selector de clase. Entonces $('#Address.Country')coincidiría<div id="Address" class="Country"> .

Cuando se escapó como \\., el punto se tratará como texto normal sin un significado especial, que coincida con la ID que desee <div id="Address.Country">.

Esto se aplica a todos los caracteres !"#$%&'()*+,./:;<=>?@[\]^`{|}~que de otro modo tendrían un significado especial como selector en jQuery. Simplemente anteponga \\para tratarlos como texto normal.

¿Por qué 2 \\?

Como se señaló en la respuesta de bdukes, hay una razón por la que necesitamos 2 \caracteres. \escapará al siguiente carácter en JavaScript. Cuando JavaScript interprete la cadena "#Address\.Country", verá que \, interpretarlo significa tomar el siguiente carácter literalmente y eliminarlo cuando se pasa la cadena como argumento a $(). Eso significa que jQuery seguirá viendo la cadena como "#Address.Country".

Ahí es donde \entra el segundo para jugar. El primero le dice a JavaScript que interprete el segundo como un carácter literal (no especial). Esto significa que jQuery verá el segundo y comprenderá que el siguiente . carácter es un carácter literal.

¡Uf! Tal vez podamos visualizar eso.

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

Usar dos barras invertidas está bien, es un trabajo. Pero si está utilizando un nombre dinámico, es decir, un nombre variable, deberá reemplazar los caracteres.

Si no desea cambiar los nombres de sus variables, puede hacer esto:

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

y que tienes tu objeto jquery.

Solo información adicional: consulte este problema ASP.NET MVC # 2403 .

Hasta que se solucione el problema, uso mis propios métodos de extensión como Html.TextBoxFixed, etc., que simplemente reemplaza los puntos con guiones bajos en el atributo id (no en el atributo de nombre), de modo que use jquery como $ ("# Address_Street") pero en el servidor, es como Address.Street.

El código de muestra sigue:

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

Resolví el problema con la solución dada por jquery docs

Mi funcion:

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

function jq(myid){


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


}

Nota: elimino el "#" porque en mi código concaté la ID con otro texto

Fuente: Jquery Docs selecciona un elemento con caracteres especiales