次のクラスとコントローラーアクションメソッドを考えます。

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

Googleグループから：

各特殊文字の前に2つの円記号を使用します。

jQueryセレクターのバックスラッシュは、次の文字をエスケープします。ただし、バックスラッシュはJavaScript文字列のエスケープ文字でもあるため、2つ必要です。最初のバックスラッシュは2番目のバックスラッシュをエスケープし、文字列に実際のバックスラッシュを1つ与えます-次に、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 FAQをご覧ください。

IDにスペースが含まれている場合は、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セレクターのドキュメントに記載されています：

!"#$%&'()*+,./:;<=>?@[\]^`{|}~名前のリテラル部分としてメタ文字（など）を使用するには、 2つのバックスラッシュでエスケープする必要があります\\。たとえば、を含む要素は id="foo.bar"、セレクターを使用できます$("#foo\\.bar")。

要するに、接頭辞.を\\次のように：

$("#Address\\.Country")

.自分のIDで機能しないのはなぜですか？

問題は、.特別な意味があることです。次の文字列はクラスセレクターとして解釈されます。そう$('#Address.Country')一致し<div id="Address" class="Country">ます。

としてエスケープする\\.と、ドットは通常のテキストとして扱われ、特別な意味はなく、目的のIDに一致します<div id="Address.Country">。

これは!"#$%&'()*+,./:;<=>?@[\]^`{|}~、jQueryのセレクターとして特別な意味を持つすべての文字に適用されます。\\それらを通常のテキストとして扱うには、先頭に追加します。

なぜ2 \\？

bdukesの回答で述べたように、2 \文字が必要な理由があります。\JavaScriptでは次の文字をエスケープします。JavaScriptは、文字列を解釈する際のSe "#Address\.Country"、それが表示されます\、を意味するためにそれを解釈litterally次の文字を取ると削除文字列が引数として渡されたときに、それを$()。つまり、jQueryは文字列をとして認識し"#Address.Country"ます。

2番目\が出番です。最初のものはJavaScriptに2番目をリテラル（非特殊）文字として解釈するように指示します。これは、2番目がjQueryによって認識され、次の. 文字がリテラル文字であることを理解することを 意味します。

ふew！多分それを視覚化することができます。

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

2つのバックスラッシュを使用しても問題ありません。ただし、動的な名前、つまり変数名を使用している場合は、文字を置き換える必要があります。

変数名を変更したくない場合は、次のようにします。

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

そして、あなたはあなたのjqueryオブジェクトを持っています。

追加情報：このASP.NET MVCの問題＃2403を確認してください。

問題が修正されるまで、Html.TextBoxFixedなどの独自の拡張メソッドを使用します。これは、（name属性ではなく）id属性でドットをアンダースコアに置き換えるだけなので、$（ "＃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;
}

私は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 select element with especial chars