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

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

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

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


(過去ログ 138 を表示中)

[トピック内 7 記事 (1 - 7 表示)]  << 0 >>

■81362 / inTopicNo.1)  サーバコントロールの表示/非表示について
  
□投稿者/ miito (1回)-(2016/09/11(Sun) 18:43:35)

分類:[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に変わらず、
次にボタンをクリックしても表示状態になりません。

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

引用返信 編集キー/
■81364 / inTopicNo.2)  Re[1]: サーバコントロールの表示/非表示について
□投稿者/ WebSurfer (1033回)-(2016/09/11(Sun) 19:59:54)
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

引用返信 編集キー/
■81365 / inTopicNo.3)  Re[2]: サーバコントロールの表示/非表示について
□投稿者/ miito (3回)-(2016/09/11(Sun) 21:06:40)
2016/09/11(Sun) 21:57:15 編集(投稿者)

No81364 (WebSurfer さん) に返信

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

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

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


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

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

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

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

引用返信 編集キー/
■81366 / inTopicNo.4)  Re[3]: サーバコントロールの表示/非表示について
□投稿者/ WebSurfer (1034回)-(2016/09/11(Sun) 22:32:36)
No81365 (miito さん) に返信

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

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

引用返信 編集キー/
■81379 / inTopicNo.5)  Re[4]: サーバコントロールの表示/非表示について
□投稿者/ miito (4回)-(2016/09/12(Mon) 23:00:35)
No81366 (WebSurfer さん) に返信

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

いろいろ調べましたが、
クライアントサイドでサーバコントロールのViewStateを変更することは
出来なさそうなので、Ajaxを使用してSession変数に
ラベルの表示状態を格納することにしました。
解決済み
引用返信 編集キー/
■81381 / inTopicNo.6)  Re[5]: サーバコントロールの表示/非表示について
□投稿者/ WebSurfer (1035回)-(2016/09/12(Mon) 23:33:26)
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>

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

引用返信 編集キー/
■81403 / inTopicNo.7)  Re[1]: サーバコントロールの表示/非表示について
□投稿者/ PANG2 (151回)-(2016/09/16(Fri) 18:27:43)
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)
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

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

管理者用

- Child Tree -