Dadas as seguintes classes e método de ação do 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 };
}

E o seguinte formulário:

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

Consigo atualizar a instância da escola e o membro de endereço da escola. Isso é muito legal! Obrigado equipe ASP.NET MVC!

No entanto, como uso o jQuery para selecionar a lista suspensa para preenchê-la previamente? Sei que poderia fazer esse lado do servidor, mas haverá outros elementos dinâmicos na página que afetam a lista.

A seguir, é o que tenho até agora e não funciona, pois os seletores parecem não corresponder aos IDs:

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

Dos Grupos do Google :

Use duas barras invertidas antes de cada caractere especial.

Uma barra invertida em um seletor jQuery escapa o próximo caractere. Mas você precisa de dois deles, porque a barra invertida também é o caractere de escape para as strings JavaScript. A primeira barra invertida escapa à segunda, fornecendo uma barra invertida real em sua string - que, em seguida, escapa o próximo caractere para o jQuery.

Então, eu acho que você está olhando

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

Verifique também como faço para selecionar um elemento por um ID que possua caracteres usados ​​na notação CSS? no FAQ do jQuery.

Você não pode usar um seletor de id do jQuery se o id contiver espaços. Use um seletor de atributos:

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

Se possível, especifique também o tipo de elemento:

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

Escape para o Jquery:

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

exemplo de uso:

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

mais informações aqui .

O Release Candidate do ASP.NET MVC que acabou de ser lançado corrigiu esse problema, agora substitui os pontos por sublinhados para o atributo ID.

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

Renderiza para

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

Para mais informações, veja as notas de versão, começando na página 14.

Isso está documentado nos documentos do jQuery Selectors :

Para usar qualquer um dos meta-caracteres (tais como !"#$%&'()*+,./:;<=>?@[\]^`{|}~) como uma parte literal de um nome, deve ser escapado com com duas barras invertidas: \\. Por exemplo, um elemento com id="foo.bar", pode usar o seletor $("#foo\\.bar").

Em resumo, prefixe o .com da \\seguinte maneira:

$("#Address\\.Country")

Por que não .funciona no meu ID?

O problema é que .tem um significado especial, a sequência a seguir é interpretada como um seletor de classe. Então $('#Address.Country')combinaria <div id="Address" class="Country">.

Quando escapado como \\., o ponto será tratado como texto normal sem significado especial, correspondendo ao ID que você deseja <div id="Address.Country">.

Isso se aplica a todos os caracteres !"#$%&'()*+,./:;<=>?@[\]^`{|}~que, de outra forma, teriam um significado especial como seletor no jQuery. Anexe apenas \\para tratá-los como texto normal.

Por que 2 \\?

Conforme observado na resposta do bdukes, há uma razão pela qual precisamos de 2 \caracteres. \escapará do seguinte caractere em JavaScript. Se, quando o JavaScript interpreta a string "#Address\.Country", ele vê \, interpreta-o com o seguinte caractere alfabético e remove -o quando a string é passada como argumento para $(). Isso significa que o jQuery ainda verá a string como "#Address.Country".

É aí que o segundo \entra para jogar. O primeiro diz ao JavaScript para interpretar o segundo como um caractere literal (não especial). Isso significa que o segundo será visto pelo jQuery e entenderá que o seguinte . caractere é um caractere literal.

Ufa! Talvez possamos visualizar isso.

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

Usando duas barras invertidas, tudo bem, está funcionando. Mas se você estiver usando um nome dinâmico, quero dizer, um nome de variável, precisará substituir caracteres.

Se você não quiser alterar os nomes das variáveis, faça o seguinte:

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

e do que você tem seu objeto jquery.

Apenas informações adicionais: verifique este problema do ASP.NET MVC # 2403 .

Até que o problema seja resolvido, eu uso meus próprios métodos de extensão, como Html.TextBoxFixed, etc. que simplesmente substituem pontos por sublinhados no atributo id (não no atributo name), para que você use jquery como $ ("# Address_Street") mas no servidor, é como Address.Street.

Código de exemplo a seguir:

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

Resolvi o problema com a solução dada pelo jquery docs

Minha função:

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

function jq(myid){


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


}

Nota: removo o "#" porque no meu código concato o ID com outro texto

Fonte: Jquery Docs seleciona elemento com caracteres especiais