Дано наступні класи та метод дії контролера:

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

І наступна форма:

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

Я в змозі оновити як екземпляр школи, так і член адреси школи. Це досить приємно! Дякую команді ASP.NET MVC!

Однак як я використовую jQuery для вибору випадаючого списку, щоб я міг попередньо заповнити його? Я розумію, що я міг би зробити це на сервері, але на сторінці будуть інші динамічні елементи, які впливають на список.

Нижче наведено те, що у мене є, і це не працює, оскільки селектори не відповідають ідентифікаторам:

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

З груп Google :

Перед кожним спеціальним символом використовуйте дві косої риски.

Зворотний косий рядок у селекторі jQuery дозволяє уникнути наступного символу. Але вам потрібні два з них, тому що зворотна косої риси також є символом втечі для рядків JavaScript. Перший зворотний косий рядок виходить з другого, даючи вам один фактичний зворотний косий рядок у рядку - який потім уникає наступного символу jQuery.

Отже, я думаю, ти дивишся

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

Також перевірте Як вибрати елемент за ідентифікатором, який містить символи, використовувані в позначеннях CSS? на jQuery FAQ.

Ви не можете використовувати селектор jQuery id, якщо ідентифікатор містить пробіли. Використовуйте селектор атрибутів:

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

Якщо можливо, вкажіть і тип елемента:

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

Уникнути цього заради Jquery:

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

приклад використання:

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

Більше інформації тут .

Щойно випущений кандидат випуску ASP.NET MVC виправив цю проблему, тепер замінює точки підкресленнями для атрибута ID.

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

Надає до

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

Для отримання додаткової інформації перегляньте нотатки до випуску, починаючи з сторінки 14.

Це задокументовано в документах селекторів jQuery :

Для того, щоб використовувати будь-якого з мета-символи (наприклад , як !"#$%&'()*+,./:;<=>?@[\]^`{|}~) , як буквальна частина імені, він повинен бути екранований з подвійною косою рисою: \\. Наприклад, елемент з id="foo.bar", може використовувати селектор $("#foo\\.bar").

Коротше кажучи, префікс .з \\наступним чином:

$("#Address\\.Country")

Чому .в моєму посвідченні не працює?

Проблема полягає в тому, що .має особливе значення, наступний рядок інтерпретується як селекторний клас. Так $('#Address.Country')би відповідали <div id="Address" class="Country">.

Якщо втекти як \\., точка буде розглядатися як звичайний текст без особливого значення, що відповідає ідентифікатору, який ви бажаєте <div id="Address.Country">.

Це стосується всіх символів, !"#$%&'()*+,./:;<=>?@[\]^`{|}~які в іншому випадку мали б особливе значення як селектор у jQuery. Тільки \\передбачте ставитися до них як до звичайного тексту.

Чому 2 \\?

Як зазначається у відповіді на бдуки, є причина, що нам потрібні 2 \символи. \уникне наступного символу в JavaScript. Якщо JavaScript інтерпретує рядок "#Address\.Country", він побачить \, інтерпретувати його означає взяти наступний символ літерально і видалити його, коли рядок передається в якості аргументу $(). Це означає, що jQuery все одно буде бачити рядок як "#Address.Country".

Ось де другий \приходить грати. Перший пропонує JavaScript інтерпретувати другий як буквальний (неспеціальний) символ. Це означає, що другий буде видно jQuery і зрозуміє, що наступний . символ є буквальним символом.

Фу! Можливо, ми можемо це уявити.

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

Використовуючи два зворотні риси - це нормально, це добре. Але якщо ви використовуєте динамічне ім'я, я маю на увазі ім'я змінної, вам потрібно буде замінити символи.

Якщо ви не хочете змінювати імена змінних, можете зробити це:

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

і ніж у вас є ваш об'єкт jquery.

Додаткова інформація: Перевірте цю проблему № 2403 ASP.NET MVC .

Поки проблема не виправлена, я використовую свої власні методи розширення, такі як Html.TextBoxFixed тощо, які просто замінюють крапки підкресленнями в атрибуті id (а не в атрибуті імені), так що ви використовуєте jquery, як $ ("# Address_Street") але на сервері це як Address.Street.

Зразок коду наступним чином:

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

Я вирішив проблему з рішенням, яке надали jquery docs

Моя функція:

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

function jq(myid){


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


}

Примітка: я видаляю "#", тому що в своєму коді я стискаю ідентифікатор з іншим текстом

Шрифт: Jquery Docs виберіть елемент з особливими символами