C# と VB.NET の質問掲示板

■No82736 (魔界の仮面弁士 さん) に返信

> それが問題になりそうであれば、id を明示指定するのでは駄目でしょうか?

その結果をすべてを知っていて完全にアンダーコントロールにあれば駄目ということはないと
思いますが、個人的には予期せぬ副作用が出る可能性を排除しきれません。

具体的には、例えば、以下のような html ヘルパから、

@Html.LabelFor(m => m.CountryList[i].Name)
@Html.EditorFor(m => m.CountryList[i].Name)
@Html.ValidationMessageFor(m => m.CountryList[i].Name)

以下のような html ソースがレンダリングされます。（data-val... はクライアントスクリプト
によるユーザー入力の検証に使うものです）

<label for="CountryList_0__Name">国名</label>
<input class="text-box single-line" 
  data-val="true" 
  data-val-length="国名 は 15 文字以内" 
  data-val-length-max="15"
  data-val-required="国名 は必須" 
  id="CountryList_0__Name"
  name="CountryList[0].Name" 
  type="text"
  value="Italy" />
<span class="field-validation-valid" 
  data-valmsg-for="CountryList[0].Name" 
  data-valmsg-replace="true">
</span>

この id を自分で指定して、jQuery ライブラリを使ったクライアント側での検証がうまく動く
のかが気がかりです。他にも予期できない副作用があるかもしれません。

十二分に検証すれば済むかもしれませんが、そもそも余計な気苦労と不要な手間と思いますし、
今回の質問者さんのケースではそこまでして id を指定する必要もなさそうだと個人的に思い
ます。

■No82741 (魔界の仮面弁士 さん) に返信

> しかしその指定方法が駄目だとすれば、そもそもフォーカス移動処理以前に
> 　$("#DATE").datepicker();
> の段階でアクセスに失敗しそうなので、この部分から見直すべきということですね。

その通りだと思います。

> 個人的には、tabindex を検索キーにすることに不安があるので、
> やはり id で指定するべきだと考えているのですが、それではたとえば
> Html.IdFor や Html.NameFor を使うのはどうでしょうか?

そうですね・・・というか、正直言ってそれが使えるのは知らなかったです。

ASP.NET Web Forms アプリではインラインのスクリプトに $('#<%=TextBox1.ClientID%>').datepicker();
というように表示ブロックを使って ClientID（html に変換された時の id）を埋め込むことができますが、
それと同じことができますね。

おかげさまで一つ知識が増えました。

開発マシンにある以下の既存の View を使って検証してみました。下の方のインラインスクリプトで
@Html.IdFor を使うと、

@model Mvc4App.Models.Parent2

@{
    ViewBag.Title = "Create2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.Name)
    @Html.EditorFor(m => m.Name)
    @Html.ValidationMessageFor(m => m.Name)
    <br />
    
    for (int i = 0; i < Model.Children.Count; i++)
    {
        @Html.LabelFor(m => m.Children[i].Name)
        @Html.EditorFor(m => m.Children[i].Name)
        @Html.ValidationMessageFor(m => m.Children[i].Name)
    }
    <br />
    
    <input type="submit" name="addchild" value="Add Child" />
    <input type="submit" value="POST" />
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
    //<![CDATA[
        function disp(data) {
            $("#@Html.IdFor(m => m.Children[0].Name)").empty();
        }
    //]]>
    </script>
}


レンダリングされる html ソースは以下のようになり、上の @Html.EditorFor(m => m.Children[i].Name)
でレンダリングされる i　が 0 のテキストボックスの id が設定されることが確認できました。

<script type="text/javascript">
//<![CDATA[
    function disp(data) {
        $("#Children_0__Name").empty();            
    }
//]]>
</script>