方法 : ASP.NET Web サーバー コントロールにクライアント スクリプト イベントを追加する

  • [アーティクル]

更新 : 2007 年 11 月

クライアント スクリプトは、HTML 要素と同様に ASP.NET Web ページのコントロールに宣言によって追加できます。ASP.NET Web サーバー コントロールにクライアント スクリプトのイベントをプログラムによって追加することもできます。この方法は、イベントまたはコードが実行時のみに使用できる情報に依存する場合に有効です。

7ytf5t7k.alert_note(ja-jp,VS.90).gifメモ :

クライアント スクリプトでは、ID によってコントロールを参照できます。詳細については、「ASP.NET Web ページのクライアント スクリプト」を参照してください。

クライアント スクリプトの onclick イベントをボタンに追加するには、この後で説明する特別な処理が必要です。

7ytf5t7k.alert_note(ja-jp,VS.90).gifメモ :

クライアント スクリプトのサポートはブラウザに依存します。たとえば、Internet Explorer、Mozilla、およびモバイル デバイス用のブラウザでは、クライアント スクリプトのサポートの種類が異なります。

ASP.NET サーバー コントロールにクライアント イベント ハンドラを宣言によって追加するには

  • コントロールのマークアップで、onmouseover、onkeyup などのイベントの属性を追加します。属性値に対して実行するクライアント スクリプトを追加します。

    7ytf5t7k.alert_note(ja-jp,VS.90).gifメモ :

    属性のクライアント スクリプトの後には、必ずセミコロン (;) を追加してください。これは、コントロールの AutoPostBack プロパティが true に設定されている場合など、ASP.NET がコントロール用にクライアント スクリプトを生成する場合に、各自のコードが最初に実行されるようにするために必要です。

    コントロールのプロパティに対応しないコントロールのマークアップの属性/値のペアは、そのままブラウザに渡されます。

    ユーザーがマウス ポインタを置いたときにボタン テキストの色を変更するクライアント スクリプトを含む ASP.NET Web ページのコード例を次に示します。

    <%@ Page Language="VB"%>
<html>
<head runat="server">
  <title>Untitled Page</title>
  <script type="text/javascript">
      var previousColor;
      function MakeRed()
      {
          previousColor = window.event.srcElement.style.color;
          window.event.srcElement.style.color = "#FF0000";
      }
      function RestoreColor()
      {
          window.event.srcElement.style.color = previousColor;
      }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <asp:button id="Button1" runat="server"
      text="Button1"
        onmouseover="MakeRed();"onmouseout="RestoreColor();" />
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<html>
<head runat="server">
  <title>Untitled Page</title>
  <script type="text/javascript">
      var previousColor;
      function MakeRed()
      {
          previousColor = window.event.srcElement.style.color;
          window.event.srcElement.style.color = "#FF0000";
      }
      function RestoreColor()
      {
          window.event.srcElement.style.color = previousColor;
      }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:button id="Button1" runat="server" 
    text="Button1" 
      onmouseover="MakeRed();"onmouseout="RestoreColor();" />
  </form>
</body>
</html>

ASP.NET コントロールにクライアント イベント ハンドラをプログラムによって追加するには

  • ページの Init イベントまたは Load イベントで、Attributes コレクションのコントロールの Add メソッドを呼び出します。

    クライアント スクリプトを TextBox コントロールに追加する方法のコード例を次に示します。このクライアント スクリプトは、TextBox コントロールのテキストの長さを表示します。このスクリプトは、ページに spanCounter という span 要素があることを前提にしています。

    Protected Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim displayControlName As String = "spanCounter"
    TextBox1.Attributes.Add("onkeyup", _
        displayControlName & ".innerText=this.value.length;")
End Sub

protected void Page_Load(object sender, EventArgs e)
{
    String displayControlName = "spanCounter";
    TextBox1.Attributes.Add("onkeyup", displayControlName + 
        ".innerText=this.value.length;");
}

ボタン コントロールにクライアントの onclick イベントを追加するには

  • Button、LinkButton、ImageButton などのボタン コントロールで、実行するクライアント スクリプトに OnClientClick プロパティを設定します。

    Button コントロールにクライアント スクリプトのクリック イベントを追加する方法のコード例を次に示します。

    <%@ Page Language="VB" %>
<script runat="server">
    Sub Button1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs)
        Label1.Text = "Server click handler called."
    End Sub
</script>

<body>
  <form id="form1" runat="server">
    <asp:Button ID="Button1" Runat="server" 
      OnClick="Button1_Click" 
        OnClientClick="return confirm('Ready to submit.')" 
        Text="Test Client Click" />
    <br />
    <asp:Label ID="Label1" Runat="server" text="" />
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<script runat="server">
    protected void Button1_Click(Object sender, EventArgs e)
    {
        Label1.Text = "Server click handler called.";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
  <form id="form1" runat="server">
    <asp:Button ID="Button1" Runat="server" 
      OnClick="Button1_Click" 
        OnClientClick="return confirm('Ready to submit.')" 
        Text="Test Client Click" />
    <br />
    <asp:Label ID="Label1" Runat="server" text="" />
  </form>
</body>
</html>

セキュリティ

クライアント スクリプトは、クライアントのコンピュータ上で誤動作する可能性があります。特にスクリプトがユーザー入力に応じて生成または変更される場合には、ページに書き込むスクリプトに関してかなりの注意が必要です。詳細については、「スクリプトによる攻略の概要」を参照してください。

参照

処理手順

方法 : ASP.NET Web ページのコントロールの HTML 属性を設定する

方法 : ASP.NET Web ページにクライアント スクリプトを動的に追加する

概念

ASP.NET Web ページのクライアント スクリプト