C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[1]: サーバコントロールの表示/非表示について

分類:[ASP.NET (VB)]　

はじめまして。
独学でWebアプリケーションを作成していますが
分からないことがありますので質問させて頂きます。

サーバコントロールの表示/非表示を
JavaScriptとサーバ処理の両方で切り替えたいのですが、
上手くいきません。
以下に該当部分のみのコードを掲載します。

≪HTMLソース≫
<div>
　<asp:Button ID="btnTest" runat="server" Text="Button" />
  <asp:Label ID="lblTest" runat="server" Text="Label" />
</div>

≪コードビハインド≫
Protected Sub btnTest_Click(sender As Object, e As EventArgs) Handles btnTest.Click
　If lblTest.Attributes("display") = "block" Then
  　'表示状態なら非表示にする
    lblTest.Attributes.Add("display", "none")
  Else
　　'非表示状態なら表示する
  　lblTest.Attributes.Add("display", "block")
  End If
End Sub

≪JavaScript(JQuery)≫
$(document).on('click', function (e) {
　　// 領域外をクリックしたら非表示にする
    if (!$(e.target).closest('#lblTest').length){
        $('#lblTest').hide();
    }
});

ボタン(btnTest)をクリックしたら
ラベル(lblTest)の表示状態を切り替え、
ラベル以外の領域をクリックしたら非表示にする
ということをしたいですが、
上記コードでは、ボタンをクリックしても
表示状態が切り替わりません(表示されたままです)

サーバコントロールのVisibleプロパティの使用も試しましたが、
JavaScriptで非表示にした際、VisibleプロパティがFalseに変わらず、
次にボタンをクリックしても表示状態になりません。

ご教授の程、よろしくお願い致します。

■No81362 (miito さん) に返信

ブラウザは何ですか？ JavaScript はブラウザ依存なので、ブラウザの情報は重要なのですが。

> ボタン(btnTest)をクリックしたら
> ラベル(lblTest)の表示状態を切り替え、
> ラベル以外の領域をクリックしたら非表示にする

サーバー側で起こっていることと、クライアント側で起こっていることの区別はついているで
しょうか？　btnTest をクリックしたときの制御をポストバックしてサーバー側で、ラベル以
外の領域をクリックしたときの制御を JavaScript でクライアント側で行いたいように見えま
すがそれにどういう意味があるのか教えていただけませんか？

・・・ということを事前に聞いてから回答したいのですが（意味のないことを回答することに
なるかもしれないので）とりあえずのレスを書いておきます。

まず、今のコードでは btnTest をクリックしてもラベルの表示・非表示は切り替わらないの
では？

ラベルに初期値として以下のように style="display:block;" を設定しておいて、

<asp:Label ID="lblTest" runat="server" Text="Label" style="display:block;"/>

ボタンのハンドラで以下のようにしないとダメかと思いますが。（コードは C# ですが、読め
ますよね？）

protected void btnTest_Click(object sender, EventArgs e)
{
    if (lblTest.Style["display"] == "block")
    {
        lblTest.Style["display"] = "none";
    }
    else
    {
        lblTest.Style["display"] = "block";
    }
}

ラベル以外の領域をクリックしたときの制御を JavaScript で行うのは、バブリングを利用し
て、イベントリスナに渡される event オブジェクトから target プロパティでイベントを発
生させたオブジェクトを取得できるので、それがラベルか否かを判断して制御してはいかがで
すか？　そのあたりは以下の記事が参考になりませんか？

キャプチャリングとバブリング
http://surferonwww.info/BlogEngine/post/2012/12/01/capturing-target-and-bubbling-phases.aspx

2016/09/11(Sun) 21:57:15 編集(投稿者)

■No81364 (WebSurfer さん) に返信

ご回答ありがとうございます。

> ブラウザは何ですか？ JavaScript はブラウザ依存なので、ブラウザの情報は重要なのですが。

IE11、Chrome53を使用しています。

> btnTest をクリックしたときの制御をポストバックしてサーバー側で、ラベル以
> 外の領域をクリックしたときの制御を JavaScript でクライアント側で行いたいように見えま
> すがそれにどういう意味があるのか教えていただけませんか？

掲載したコードでは省いていますが、btnTestをクリックしたら
サーバ側で処理してラベルの値を書き換えるようにしています。
また、領域外クリックでのラベル非表示はサーバ側処理では
実装できないと思い、こちらはJavaScriptでの処理としています。

頂いたコードの変更を試したところ、
ボタンクリックによるラベルの表示/非表示の切り替えと
領域外クリックによるラベルの非表示は出来ましたが、
領域外をクリックして非表示になった後、
ボタンをクリックしてもラベルが表示されませんでした。

追記：デバッグしたところ、JavaScriptでラベルを非表示にしても
　　　ポストバック時にはdisplayプロパティが"block"のままでした
　　　

■No81365 (miito さん) に返信

> 領域外をクリックして非表示になった後、
> ボタンをクリックしてもラベルが表示されませんでした。

それは多分クライアントスクリプトでラベル（span 要素）のスタイルを display:none; に
設定できても、Label コントロールの ViewState までは変更できないからでしょう。

■No81366 (WebSurfer さん) に返信

> それは多分クライアントスクリプトでラベル（span 要素）のスタイルを display:none; に
> 設定できても、Label コントロールの ViewState までは変更できないからでしょう。

いろいろ調べましたが、
クライアントサイドでサーバコントロールのViewStateを変更することは
出来なさそうなので、Ajaxを使用してSession変数に
ラベルの表示状態を格納することにしました。

■No81379 (miito さん) に返信

> クライアントサイドでサーバコントロールのViewStateを変更することは出来なさそうなので、

それは無理ですが、

> Ajaxを使用してSession変数にラベルの表示状態を格納することにしました。

そこまでしなくても HiddenField を使って「領域外クリック」でラベルが非表示になったか
どうかの情報を保存して対応できると思いますが。

例えば以下のような感じ。これが NG ならどこがダメか教えてください。他の手を考えてみ
ます。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    // 2016/9/11 わんくま掲示板の検証用
    // http://bbs.wankuma.com/index.cgi?mode=al2&namber=81362

    protected void btnTest_Click(object sender, EventArgs e)
    {
        if (HiddenField1.Value == "lavelhidden")
        {
            lblTest.Style["display"] = "block";
            HiddenField1.Value = "labelshown";
        }
        else
        {
            if (lblTest.Style["display"] == "block")
            {
                lblTest.Style["display"] = "none";
            }
            else
            {
                lblTest.Style["display"] = "block";
            }
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
    //<![CDATA[
        window.onload = function () {
            var body = document.getElementById("body1");

            body.addEventListener('click', listener, false);
        }

        function listener(event) {
            var button = document.getElementById("btnTest");
            var label = document.getElementById("lblTest");
            if (event.target != button && event.target != label) {
                label.style.display = "none";
                var hiddenfield = document.getElementById("HiddenField1");
                hiddenfield.value = "lavelhidden";
            }
        }
    //]]>
    </script>
</head>
<body id="body1" style="width:500px; height:500px; border: 1px solid black;" >
    <form id="form1" runat="server">
    <div>
        <asp:HiddenField ID="HiddenField1" runat="server" Value="lavelshown" />
        <asp:Button ID="btnTest" runat="server" Text="Button" OnClick="btnTest_Click" />
        <asp:Label ID="lblTest" runat="server" Text="Label" style="display:block;"/>
    </div>
    </form>
</body>
</html>

質問する際は、局所的な問題点の質問だけではなく、全体的なシナリオを含めてやりたいこ
とを書くことをお勧めします。そうしてもらえると、もっとマシな回答ができるかもしれま
せん。

■No81362 (miito さん) に返信
> ≪JavaScript(JQuery)≫
> $(document).on('click', function (e) {
> 　　// 領域外をクリックしたら非表示にする
> if (!$(e.target).closest('#lblTest').length){
> $('#lblTest').hide();
> }
> });

隠しフィールドをjQueryで追加
http://blog.toshimaru.net/jqueryhidden-inputjquery/

サーバー側は、
Request.Form(隠しフィールドのname)

C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[1]: サーバコントロールの表示/非表示について

過去ログには書き込み不可