Как получить jQuery для выбора элементов с помощью. (точка) в их удостоверение личности?

Question

Имеются следующие классы и метод действия контроллера:

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

Answer 1

Из Группы Google :

Используйте две обратные косые черты перед каждым специальным символом.

Обратная косая черта в селекторе jQuery экранирует следующий символ. Но вам нужно два из них, потому что обратный слеш также является escape-символом для 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? в FAQ по jQuery.

Answer 2

Вы не можете использовать селектор идентификатора jQuery, если идентификатор содержит пробелы. Используйте селектор атрибута:

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

Если возможно, укажите также тип элемента:

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

Answer 3

Escape для Jquery:

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

пример использования:

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

подробнее здесь .

Answer 4

Кандидат на выпуск ASP.NET MVC, который был только что выпущен, исправил эту проблему, теперь он заменяет точки подчеркиванием для атрибута ID.

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

Отображает до

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

Для получения дополнительной информации см. Примечания к выпуску, начиная со страницы 14.

Answer 5

Это задокументировано в Документах по jQuery Selectors :

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

Короче, префикс . с \\ выглядит следующим образом:

$("#Address\\.Country")

Почему . не работает в моем удостоверении личности?

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

Если экранировать как \\., точка будет рассматриваться как обычный текст без особого значения, соответствующий желаемому идентификатору <div id="Address.Country">.

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

Почему 2 \\?

Как отмечается в ответе bdukes, есть причина, по которой нам нужно 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.

Answer 6

Используя две обратные косые черты, это нормально, это работает. Но если вы используете динамическое имя, я имею в виду имя переменной, вам нужно будет заменить символы.

Если вы не хотите менять имена переменных, вы можете сделать это:

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

и чем у вас есть объект jquery.

Answer 7

Я решил проблему с помощью 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 выбирает элемент с особыми символами

Answer 8

Просто дополнительная информация: Проверьте это ASP.NET MVC выпуск # 2403 .

Пока проблема не будет устранена, я использую свои собственные методы расширения, такие как Html.TextBoxFixed и т. Д., Которые просто заменяют точки подчеркиванием в атрибуте id (не в атрибуте name), так что вы используете 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;
}