Dati i seguenti metodi di classe e azione del controller:

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 il seguente modulo:

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

Sono in grado di aggiornare sia l'istanza della Scuola sia il membro Indirizzo della scuola. Questo è abbastanza carino! Grazie al team ASP.NET MVC!

Tuttavia, come posso usare jQuery per selezionare l'elenco a discesa in modo da poterlo pre-compilare? Mi rendo conto che potrei fare questo lato server ma ci saranno altri elementi dinamici sulla pagina che influenzano l'elenco.

Quello che segue è quello che ho finora e non funziona in quanto i selettori non sembrano corrispondere agli 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);
    });
  });
});

Da Google Gruppi :

Usa due barre rovesciate prima di ogni carattere speciale.

Una barra rovesciata in un selettore jQuery sfugge al carattere successivo. Ma ne servono due perché la barra rovesciata è anche il carattere di escape per le stringhe JavaScript. La prima barra rovesciata sfugge alla seconda, dandoti una barra rovesciata effettiva nella stringa, che sfugge al carattere successivo per jQuery.

Quindi, immagino tu stia guardando

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

Guarda anche Come faccio a selezionare un elemento tramite un ID con caratteri usati nella notazione CSS? sulle FAQ di jQuery.

Non è possibile utilizzare un selettore ID jQuery se l'id contiene spazi. Usa un selettore di attributi:

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

Se possibile, specificare anche il tipo di elemento:

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

Fuga per Jquery:

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

esempio di utilizzo:

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

maggiori informazioni qui .

Il Release Candidate di ASP.NET MVC appena rilasciato risolto questo problema, ora sostituisce i punti con caratteri di sottolineatura per l'attributo ID.

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

Rende a

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

Per ulteriori informazioni, consultare le note di rilascio, a partire da pagina 14.

Questo è documentato nei documenti di jQuery Selectors :

Per utilizzare uno dei meta-caratteri (come ad esempio !"#$%&'()*+,./:;<=>?@[\]^`{|}~) come una parte letterale di un nome, deve essere sfuggito con con due barre rovesciate: \\. Ad esempio, un elemento con id="foo.bar", può utilizzare il selettore $("#foo\\.bar").

In breve, il prefisso .con \\il seguente:

$("#Address\\.Country")

Perché non .funziona nel mio ID?

Il problema è che .ha un significato speciale, la stringa seguente è interpretata come un selettore di classe. Quindi $('#Address.Country')corrisponderebbe<div id="Address" class="Country"> .

Se sfuggito a \\., il punto verrà trattato come un testo normale senza alcun significato speciale, corrispondente all'ID desiderato <div id="Address.Country">.

Questo vale per tutti i personaggi !"#$%&'()*+,./:;<=>?@[\]^`{|}~che altrimenti avrebbero un significato speciale come selettore in jQuery. Basta anteporre \\per trattarli come un normale testo.

Perché 2 \\?

Come notato nella risposta di bdukes, c'è un motivo per cui abbiamo bisogno di 2 \caratteri. \sfuggirà al seguente carattere in JavaScript. Se JavaScript interpreta la stringa "#Address\.Country", vedrà \, interpretarla nel senso che prende il seguente carattere letteralmente e lo rimuove quando la stringa viene passata come argomento a $(). Ciò significa che jQuery vedrà comunque la stringa come"#Address.Country" .

È qui che \entra in gioco il secondo . Il primo dice a JavaScript di interpretare il secondo come un carattere letterale (non speciale). Questo significa che il secondo sarà visto da jQuery e comprenderà che il seguente . personaggio è letterale.

Accidenti! Forse possiamo visualizzarlo.

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

Usando due barre rovesciate va bene, funziona. Ma se stai usando un nome dinamico, intendo un nome variabile, dovrai sostituire i caratteri.

Se non vuoi cambiare i nomi delle tue variabili puoi farlo:

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

e poi hai il tuo oggetto jquery.

Ulteriori informazioni: controlla questo numero ASP.NET MVC # 2403 .

Fino a quando il problema non viene risolto, utilizzo i miei metodi di estensione come Html.TextBoxFixed, ecc. Che sostituisce semplicemente i punti con caratteri di sottolineatura nell'attributo id (non nell'attributo name), in modo da utilizzare jquery come $ ("# Address_Street") ma sul server, è come Address.Street.

Segue un codice di esempio:

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

Ho risolto il problema con la soluzione fornita dai documenti jquery

La mia funzione:

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

function jq(myid){


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


}

Nota: rimuovo "#" perché nel mio codice concedo l'ID con un altro testo

Carattere: Jquery Docs seleziona l'elemento con caratteri speciali