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>

School インスタンスと学校の Address メンバーの両方を更新できます。これはかなりいいです！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

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

于 2008-12-08T17:53:45.513 に答える
25

IDにスペースが含まれている場合、jQueryIDセレクターを使用することはできません。属性セレクターを使用します。

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

可能であれば、要素タイプも指定します。

$('div[id=foo bar]').show();
于 2009-03-20T18:35:43.040 に答える
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 docsに記載されています。

メタ文字 ( など !"#$%&'()*+,./:;<=>?@[\]^`{|}~) を名前のリテラル部分として使用するには、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 が文字列を解釈する"#Address\.Country"と、 が表示され、文字列が に引数として渡されたときに次の文字を文字通り取り、それを削除する\ことを意味すると解釈します。つまり、jQuery は引き続き文字列を として認識します。$()"#Address.Country"

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

ふぅ！たぶん、それを視覚化できます。

//    Javascript, the following \ is not special.
//         | 
//         |
//         v    
$("#Address\\.Country");
//          ^ 
//          |
//          |
//      jQuery, the following . is not special.
于 2015-02-04T12:36:48.483 に答える
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 の select 要素と特別な文字

于 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 に答える