マスターページを用いるとJavascriptが動作しなくなる原因と対策

現象

ASP.NETでマスターページを用いたWebフォームを作成すると、そのページではJavaScriptが動作しない、またはエラーが出るケースがあります。特にこの現象は、マスターページを使わないWebフォームで動作していたJavaScriptをマスターページを使ったWebフォームに移植した際に発生します。

原因

この現象はマスターページを使った場合にASP.NETコントロールのIDの頭にプレースホルダーのIDが付加されてしまうため発生します。
マスターページを使わない場合は、WebフォームでラベルのIDを"Label1"と定義した場合、コンテンツHTMLの表示画面でも"Label1"として表示されます。一方、マスターページを使った場合のWebフォームではWebフォームでラベルのIDを"Label1"と定義した場合、コンテンツHTMLの表示部分では"ctl00_ContentPlaceHolder1_Label1"と頭に、t100_ContentPlaceHolder1という、コンテンツプレースホルダの名前が自動で付加されてしまいます。

このため、JavascriptでASP.NETのコントロールをID指定でアクセスする際に単純に"Label1"を指定した場合、実際には存在しないコントロールにアクセスすることになり、エラーが発生したり、Javascriptが動作しない現象が発生します。

対策

以下の対策があります。

• Javascript中のコードでコントロールにIDでアクセスする部分のIDの先頭に "ctl00_ContentPlaceHolder1_" を付加する。
• ASP.NETのコントロールを使わずに、HTMLコントロールや、INPUTタグを使ったフィールドに変更する。

があります。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用