【HTML、ASP.NET、JavaScript】ボタンクリック時JavaScriptの関数を呼び出す方法

◆JavaScript関数を呼び出す方法

ボタンクリック時にJavaScriptで定義した関数を呼び出す場合はOnClientClickイベントを使用します。

構文

<asp:Button ID="<ボタンID>" runat="server" Text="<ボタン表記>" OnClientClick="<呼び出したいJavaScript関数名>();"/>

ダブルクォーテーション内に呼び出したいJavaScript関数名を設定します。設定する際にセミコロンをつけ忘れないように注意。
記載が間違っている場合関数未定義エラーや読み込み時にエラーになります。

◆使用例

呼び出したいJavaScript関数

    <script type="text/javascript">
        //動作確認用関数
        function DispAlert() {
            alert('ボタンがクリックされました。')
        }

    </script>

今回は上記のJavaScript関数を呼び出します。
上記の関数は呼び出されることによりボタンがクリックされたことを知らせるメッセージボックスを表示する単純な関数です。
htmlのソースに記載する場合にはheadタグ内に上記のソースコードを記載してください。

JavaScriptを呼び出すhtmlソースコード

<body>
    <form id="form1" runat="server">
        <%--ボタン--%>
        <asp:Button ID="BtnDispData" runat="server" Text="表示" style="position:absolute;" OnClientClick="DispAlert();"/>
    </form>
</body>

ボタンクリック前

f:id:rumr-Labo:20190222221609p:plain

ボタンクリック後

f:id:rumr-Labo:20190222221624p:plain

◆ボタンクリックイベントとJavaScript関数の呼び出しの順番

JavaScript関数を呼び出す際にボタンクリックイベントも発生させるようにしたいという場合について補足。
ボタンクリック時にはJavaScript関数→ボタンクリックイベントの順序でイベントが呼び出されます。
基本ボタンを押したときに２つとも使用するということはあまりないと思いますが、一応記載しておきます。

◆動作環境

・使用OS:Windows10 Home
・IE Version:11.590.17134.0
・VisualStudio Community 2017