Biorąc pod uwagę następujące klasy i metodę akcji kontrolera:

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

I następujący formularz:

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

Jestem w stanie zaktualizować zarówno instancję School, jak i członka Address szkoły. To całkiem miłe! Dziękuję zespołowi ASP.NET MVC!

Jak jednak użyć jQuery, aby wybrać listę rozwijaną, aby móc ją wstępnie wypełnić? Zdaję sobie sprawę, że mógłbym zrobić to po stronie serwera, ale na stronie będą inne dynamiczne elementy, które mają wpływ na listę.

Oto, co mam do tej pory i nie działa, ponieważ selektory wydają się nie pasować do identyfikatorów:

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

Z Grup dyskusyjnych Google :

Użyj dwóch odwrotnych ukośników przed każdym znakiem specjalnym.

Ukośnik odwrotny w selektorze jQuery powoduje zmianę znaczenia następnego znaku. Ale potrzebujesz dwóch z nich, ponieważ ukośnik odwrotny jest również znakiem ucieczki dla ciągów JavaScript. Pierwszy ukośnik odwrotny wymyka się drugiemu, dając ci jeden rzeczywisty ukośnik odwrotny w ciągu - który następnie wymyka następny znak dla jQuery.

Więc myślę, że patrzysz

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

Zobacz także Jak wybrać element według identyfikatora, który ma znaki używane w notacji CSS? w FAQ jQuery.

Nie możesz użyć selektora identyfikatora jQuery, jeśli identyfikator zawiera spacje. Użyj selektora atrybutu:

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

Jeśli to możliwe, określ również typ elementu:

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

Escape it for Jquery:

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

przykład użycia:

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

więcej informacji tutaj .

Kandydat do wydania ASP.NET MVC, który właśnie został wydany, rozwiązał ten problem, teraz zastępuje kropki podkreśleniami dla atrybutu ID.

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

Renderuje do

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

Więcej informacji można znaleźć w uwagach do wydania, począwszy od strony 14.

Jest to udokumentowane w dokumentacji jQuery Selectors :

Użycie dowolnego z meta-znaków (na przykład !"#$%&'()*+,./:;<=>?@[\]^`{|}~) jako dosłowne część nazwy, należy uciec się z dwóch ukośników: \\. Na przykład element z id="foo.bar", może używać selektora $("#foo\\.bar").

W skrócie, prefiks .z \\następująco:

$("#Address\\.Country")

Dlaczego nie .działa w moim ID?

Problem polega na tym, że .ma specjalne znaczenie, następujący po nim ciąg jest interpretowany jako selektor klasy. Więc $('#Address.Country')pasuje <div id="Address" class="Country">.

Jeśli zmienisz znaczenie jako \\., kropka będzie traktowana jak zwykły tekst bez specjalnego znaczenia, pasujący do żądanego identyfikatora <div id="Address.Country">.

Dotyczy to wszystkich znaków, !"#$%&'()*+,./:;<=>?@[\]^`{|}~które w innym przypadku miałyby specjalne znaczenie jako selektor w jQuery. Po prostu dodawaj \\z wyprzedzeniem, aby traktować je jak zwykły tekst.

Dlaczego 2 \\?

Jak zauważono w odpowiedzi bdukes, potrzebujemy 2 \znaków. \spowoduje zmianę znaczenia następującego znaku w JavaScript. Tak więc, gdy JavaScript zinterpretuje ciąg "#Address\.Country", zobaczy \, zinterpretuje to tak, że weźmie następujący znak literalnie i usunie go, gdy łańcuch zostanie przekazany jako argument do $(). Oznacza to, że jQuery nadal będzie widzieć ciąg jako "#Address.Country".

Tutaj \do gry wkracza drugi . Pierwsza z nich mówi JavaScriptowi, aby zinterpretował drugą jako znak dosłowny (nie specjalny). Oznacza to, że drugi będzie widoczny dla jQuery i zrozumie, że następny . znak jest znakiem dosłownym.

Uff! Może możemy to sobie wyobrazić.

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

Używając dwóch odwrotnych ukośników jest w porządku, działa. Ale jeśli używasz nazwy dynamicznej, mam na myśli nazwę zmiennej, będziesz musiał zastąpić znaki.

Jeśli nie chcesz zmieniać nazw zmiennych, możesz to zrobić:

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

i niż masz swój obiekt jquery.

Tylko dodatkowe informacje: sprawdź ten problem dotyczący ASP.NET MVC nr 2403 .

Dopóki problem nie zostanie rozwiązany, używam własnych metod rozszerzających, takich jak Html.TextBoxFixed itp., Które po prostu zastępują kropki podkreśleniami w atrybucie id (nie w atrybucie nazwy), więc używam jquery, takiego jak $ ("# Address_Street") ale na serwerze jest to jak Address.Street.

Przykładowy kod jest następujący:

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

Rozwiązałem problem za pomocą rozwiązania podanego przez jquery docs

Moja funkcja:

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

function jq(myid){


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


}

Uwaga: usuwam znak „#”, ponieważ w swoim kodzie łączę identyfikator z innym tekstem

Czcionka: Jquery Docs wybiera element ze specjalnymi znakami