Mtk's Blog: [ASP.NET] ポストバック処理で実行するJavaScriptを選ぶ方法

2015年6月13日土曜日

[ASP.NET] ポストバック処理で実行するJavaScriptを選ぶ方法

How to control running JavaScript after PostBack
ASP.NETはポストバック処理からWebページのJavaScript関数(function)を直接実行する機能はないようです。
それでもJavaScriptの関数を実行するタイミングをポストバックで制御したかったのでどうにかしてみました。

環境

・Windows8.1
・Visual Studio Community 2013
・C#

どうするか？

次の処理を自分で作りました。

ASP.NETのポストバック処理はJavaScriptを実行したタイミングで画面上のラベル(<span>タグ)を特定の内容に変更する
JavaSriptはラベルの表示が特定の内容になったら実行するように監視し続ける

ASP/NET Ajaxでラベルの内容を変化させた場合の監視漏れがないように、JavaScriptは再帰呼び出しによる無限ループで監視します。
ラベルはユーザーに見せる必要が無いのでスタイルシートで非表示に設定します。

ソース

JsFromCSharp.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsFromCSharp.aspx.cs" Inherits="CoreTweetApp.JsFromCSharp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript from C#</title>
    <!-- (1)非表示設定のスタイルシート -->
    <style type="text/css">
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <!-- (2)スタイルシートで非表示設定のラベル -->
            <asp:Label ID="Label1" runat="server" Text="Label" CssClass="hidden"></asp:Label>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </div>
    </form>
    <script>
        //(3)ラベルの内容を監視し続けるJavaScript
        (function () {
            function Oversee() {
                var target = document.getElementById("Label1");
                switch (target.innerHTML) {
                    case "Show Alert":
                        alert("JavaScript from C# !");
                        target.innerHTML = "";
                        break;
                }
                setTimeout(Oversee, 100);
            }
            Oversee();
        }());
    </script>
</body>
</html>

JsFromCSharp.aspx.cs

using System;

namespace CoreTweetApp {
    public partial class JsFromCSharp : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void Button1_Click(object sender, EventArgs e) {
            //(4)ラベルの内容を書き換える
            Label1.Text = "Show Alert";
        }
    }
}

画面を開いただけでは何も起きません。
ボタンをクリックするとポストバックされた後、JavaScriptが実行されます。

とても強引な気がしますが、JavaScriptでしか実行できないライブラリーを使うなど、やむを得ないときには効果あると思います。

Mtk's Blog

新アプリケーション

2015年6月13日土曜日

[ASP.NET] ポストバック処理で実行するJavaScriptを選ぶ方法

環境

どうするか？

ソース

関連ブログ

0 件のコメント:

コメントを投稿