先日買った Windows 10 Pro 64-bit のノート PC に OS が Vista の旧マシンでは使えなかった Visual Studio 2015 Communuty をインストールして使い始めました。

手始めに、テンプレートを使ってインターネット上でフォーム認証を使う Web サイトプロジェクトを作って、Fiddler で要求 / 応答をキャプチャしてみると、以下の画像のように localhost との正体不明な通信が行われています。（驚）

（ちなみに、vortex.data.microsoft.com, urs.smartscreen.microsoft.com の正体は分かっています。Tunnel to とは Fiddler が HTTP CONNECT 要求を受けてブラウザとサーバー間で直接通信するようにトンネルを開けたということだそうです）

一体これは何なんだと驚いて、URL にある browserLink をキーワードにググって調べてみると、MSDN Blog の記事に「クロスブラウザのテストに Visual Studio 2013 のブラウザーリンクをどうぞ」というのが見つかりました。

ブラウザーリンクというのは、Visual Studio 2013 から搭載された新機能で、IE, Forefox, Chrome などの複数のブラウザを同時に立ち上げて表示させたり、Visual Studio 上でのコードの修正を複数のブラウザに同時に反映させたりする機能だそうです。

そのために、Visual Studio が HTML ソースにスクリプトを追加し、そのスクリプトによって Visual Studio と各ブラウザが通信を行っているそうです。その結果が、上の画像にある localhost との正体不明な通信だったようです。

MSDN Blog の記事にも書いてありますが、ブラウザーリンクは Visual Studio の設定で無効にできます。（2023/12/25 追記: Visual Studio 2022 ではデフォルトで［ブラウザーリンクを有効にする］のチェックは外れていますが、それでもブラウザーリンクによる Visual Studio とブラウザ間の通信が行われます。それを行わないようにする方法は別の記事「Visual Studio 2022 のブラウザーリンク」に書きましたので見てください）

具体的には、上の画像の ▼ 印をクリックすると表示されるドロップダウンメニューで［Browser link を有効にする］のチェックを外します。

早速チェックを外して試してみると、HTML ソースへのスクリプトの追加はなくなり、localhost との正体不明な通信も行われなくなったのが確認できました。

Visual Studio 2010 から 2015、ASP.NET 4 から 4.5 とそれほど長くはない間に、ブラウザーリンク以外にも、いろいろな進化があったようです。

その進化に完全に取り残されていると感じる今日この頃です。（汗）

ASP.NET Web Forms アプリの場合、サーバーコントロールが HTML 要素としてレンダリングされた際、その要素の id 属性の値を取得するのに ClientID プロパティを利用できます。

なので、<%=TextBox1.ClientID%> というようにコード表示ブロックを使って、インラインのスクリプトに TextBox1 が HTML 要素に変換された時の id を埋め込むことができます。

例えば Datepicker を使いたい場合、$('#<%=TextBox1.ClientID%>') として TextBox1 の jQuery オブジェクトを取得し、それに datepicker() メソッドを適用することで可能になります。

ASP.NET MVC アプリではそれと同様なことはできないと思っていたのですが、MVC4 以降には Html ヘルパーに IdFor メソッドが用意されていて、それを使えば可能なことが分かりました。今さらながらですが（汗）、その具体例を書いておきます。

以下のような View のコードからは、

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)
        
  @Html.LabelFor(m => m.Children[i].DateOfBirth)
  @Html.EditorFor(m => m.Children[i].DateOfBirth)
  @Html.ValidationMessageFor(m => m.Children[i].DateOfBirth)
}

以下のような html ソースがレンダリングされます。（i = 0 のもの）

<label for="Children_0__Name">Name</label>
<input class="text-box single-line" 
  id="Children_0__Name" name="Children[0].Name" 
  type="text" value="" />
<span class="field-validation-valid" 
  data-valmsg-for="Children[0].Name" 
  data-valmsg-replace="true">
</span>
<label for="Children_0__DateOfBirth">DateOfBirth</label>
<input class="text-box single-line" data-val="true" 
  data-val-date="DateOfBirth は日付である必要があります。" 
  data-val-required="DateOfBirth フィールドが必要です。" 
  id="Children_0__DateOfBirth" name="Children[0].DateOfBirth" 
  type="datetime" value="0001/01/01 0:00:00" />
<span class="field-validation-valid" 
  data-valmsg-for="Children[0].DateOfBirth" 
  data-valmsg-replace="true">
</span>

上記の通り HTML 要素の id は予測不能ではないものの、それをスクリプトにハードコーディングするのはやめた方がよさそうです。（命名規則が変わるかもしれないので。そのあたりの事情は ASP.NET Web Forms アプリでも同じです）

Html.IdFor メソッドを使えば HTML 要素の id を取得できます。なので、例えばテキストボックスに Datepiker を適用したい場合は、以下の for 文のようにします。（MVC4 のテンプレートでアプリを作った場合です。for 文の上の 3 行はクライアント側での検証用スクリプト、jQuery UI 用のスクリプトと CSS です）

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  @Scripts.Render("~/bundles/jqueryui")
  @Styles.Render("~/Content/themes/base/css")

  @for (int i = 0; i < Model.Children.Count; i++) {
  <script type="text/javascript">
  //<![CDATA[
    $("#@Html.IdFor(m => m.Children[i].DateOfBirth)").
        datepicker();
  //]]>
  </script>
  }
}

すると、上記 for 文のコードによって以下のようなスクリプトが生成されます。（script タグは一つにしたかったのですが、その方法が見つかりませんでした。（汗）　方法が分かったら追記します）

<script type="text/javascript">
//<![CDATA[
  $("#Children_0__DateOfBirth").datepicker();
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
  $("#Children_1__DateOfBirth").datepicker();
//]]>
</script>

その結果をブラウザに表示したのが上の画像です。

（name 属性の値を取得したいというケースもあるかもしれませんが、そのための Html ヘルパー NameFor も用意されているそうです。ご参考まで）

先日買った Windows 10 Pro 64-bit のノート PC に旧マシンから開発環境を移していますが、Visual Studio で開発中の Web アプリを Edge で開けないという問題に遭遇しました。一応解決したので、自分が行った解決方法を備忘録として書いておきます。

Windows 10 には Microsoft Edge という新しいブラウザが標準として搭載されています。

その Edge を使うと、Visual Studio から開発中の Web アプリを開けないだけでなく、Edge を単独で立ち上げてアドレスバーにローカル IIS で動くように設定した Web アプリの URL を入力しても表示されません。

ググって調べてみると、Edge はセキュリティが厳しくなって、ローカルホスト（ホスト名に関係なく IP アドレス 127.0.0.1 がアクセス先のホスト）へのアクセスが制限されているそうです。

解決策として、Edge のアドレスバーに about:flags と入力して表示される「開発者向け設定」で［ローカルホスト ループバックを許可する］にチェックを入れて Edge を再起動するという記事がいくつか見つかりました。

で、早速自分もやってみました・・・が、ダメでした。（涙）　依然として Edge はローカルホストにはアクセスできません。当然 Visual Studio からローカルホストの Web アプリを開くこともできません。

さらにググって調べてみると、コントロールパネルから開く「インターネットオプション」で、ローカルイントラネットゾーンに含めるサイトの定義を変更するという記事を見つけました。

具体的には上の画像のように、［セキュリティ］タブ ⇒［ローカルイントラネット］⇒［サイト(S)］で表示される「ローカルイントラネット」ダイアログで［ほかのゾーンに指定されてないローカル (イントラネット) のサイトをすべて含める(Z)］のチェックを外します。

結果、Visual Studio 2010 / 2015 ともローカルホストの Web アプリを Edge で開くことができるようになりました。もちろん Edge を単独で立ち上げてアドレスバーにローカルホストの URL を入力しても表示できます。

上の画像は、Visual Studio 2015 のテンプレートを使って自動生成させたインターネット用 Web サイトアプリケーションです。

ローカル IIS 上でホスト名 websiteproject.com で動くように設定し、hosts ファイルでそのホスト名の IP アドレスを 127.0.0.1 に設定し、Visual Studio 2015 でサイトを開いて実行させています。

（ググって調べた記事の中に CheckNetIsolation.exe コマンドを使って設定するというものがいくつかありました。Edge のアドレスバーに about:flags として設定できなかった古いバージョンではそれを使っていたようです。なお、CheckNetIsolation.exe コマンドが「インターネットオプション」の変更まで行ってくれるかどうかは分かりません）