179

给定以下类和控制器操作方法：

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 选择下拉列表以便我可以预先填充它？我意识到我可以在服务器端执行此操作，但页面上还会有其他影响列表的动态元素。

以下是我到目前为止所拥有的，它不起作用，因为选择器似乎与 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);
    });
  });
});
4

8 回答 8

303

来自谷歌群组：

在每个特殊字符前使用两个反斜杠。

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 表示法中使用的字符的 ID 选择元素？关于 jQuery 常见问题解答。

于 2008-12-08T17:53:45.513 回答
25

如果 id 包含空格，则不能使用 jQuery id 选择器。使用属性选择器：

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

如果可能，还要指定元素类型：

$('div[id=foo bar]').show();
于 2009-03-20T18:35:43.040 回答
13

为 Jquery 转义：

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

用法示例：

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

更多信息在这里。

于 2014-04-28T11:34:20.420 回答
9

刚刚发布的 ASP.NET MVC 候选版本修复了这个问题，它现在将 ID 属性的点替换为下划线。

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

呈现给

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

有关更多信息，请查看从第 14 页开始的发行说明。

于 2009-01-29T20:57:31.527 回答
5

这记录在jQuery Selectors 文档中：

要将任何元字符（例如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~）用作名称的文字部分，必须使用两个反斜杠对其进行转义：\\. 例如，带有 的元素 id="foo.bar"可以使用选择器$("#foo\\.bar")。

简而言之，前缀.with\\如下：

$("#Address\\.Country")

为什么.在我的 ID 中不起作用？

问题是.具有特殊意义的，后面的字符串被解释为类选择器。所以$('#Address.Country')会匹配<div id="Address" class="Country">。

当转义为\\.时，点将被视为没有特殊意义的普通文本，与您想要的 ID 匹配<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.
于 2015-02-04T12:36:48.483 回答
3

使用两个反斜杠没关系，它的工作。但是，如果您使用的是动态名称，我的意思是变量名称，则需要替换字符。

如果您不想更改变量名称，可以这样做：

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

比你有你的 jquery 对象。

于 2013-10-02T12:51:34.087 回答
1

我用 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" );


}

注意：我删除了“#”，因为在我的代码中我将 ID 与另一个文本连接起来

字体： 带有特殊字符的 Jquery Docs 选择元素

于 2015-05-17T15:06:46.793 回答
0

只是附加信息：检查此ASP.NET MVC 问题 #2403。

在问题得到解决之前，我使用我自己的扩展方法，如 Html.TextBoxFixed 等，它只是在 id 属性（而不是在 name 属性中）用下划线替换点，这样你就可以像 $("#Address_Street") 一样使用 jquery但在服务器上，它就像 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;
}
于 2008-12-08T19:13:30.750 回答