WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

Control.ClientID と Html.IdFor

by WebSurfer 2017年2月19日 14:13

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

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

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

jQuery UI 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 も用意されているそうです。ご参考まで)

Tags: ,

MVC

Visual Studio で Edge 利用

by WebSurfer 2017年2月18日 14:26

先日買った 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 アプリを開くこともできません。

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

イントラネット Web サイトの設定

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

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

Edge でのローカルホストサイト表示

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

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

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

Tags: , ,

DevelopmentTools

SSMS の楽観的同時実行制御

by WebSurfer 2017年2月11日 15:52

SQL Server Management Studio(以下、SSMS と書きます) を使ってデータの編集ができますが、その際に楽観的同時実行制御がかかっているようです。(SQL Server 2008 Express SP4 で試しました)

SSMS の楽観的同時実行制御

上の画像が SSMS を使ってのデータの編集中に楽観的同時実行制御に引っかかって警告のダイアログが表示されたところです。

上の例は、EmployeeID = 1 の LastName を編集して他の行に移動した際、編集されたデータを使ってデータベースの更新(UPDATE クエリの発行)をトライしたが、SSMS にデータを表示してから UPDATE クエリが発行されるまでの間に他のユーザーがデータを変更していたという状況です。

SSMS での編集に楽観的同時実行制御がかかるって知ってました? 実は自分は知らなかったです。後勝ちルールになると思ってました。(汗)

このデータを更新するアプリと SSMS を一緒に動かしていたら上の画像のダイアログが出てきたので、楽観的同時実行制御がかかっていることを初めて知ったという次第です。

新発見ということでブログに書いておくことにしました。知らなかったのは自分だけかもしれませんが。(笑)

Tags: ,

SQL Server

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  2024年4月  >>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar