質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • JavaScript

    15314questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • C#

    6566questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    481questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

ModalPopupExtenderに配置したGridViewの選択行取得

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 215

tryCSharp

score 13

ModalPopupExtenderに配置したGridViewの選択行を取得したいと思っています。
下記コードはIE11では取得できたのですがFireFox バージョン60.0.1では動きませんでした。

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);


がデバッグで入ってきません。
FireFoxの最新版では対応していないのでしょうか?
また、他の方法でGridViewの選択行を取得できるようでしたら教えて頂けないでしょうか。

コードは以下のようになります。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test.Test" MaintainScrollPositionOnPostback="true"%>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>テスト</title>

    <script type="text/javascript" src="scripts/Common.js"></script>
    </head>
<body>
    <form id="form1" runat="server" defaultbutton="DummySubmitButton">
    <asp:ScriptManager ID="myScriptManager" runat="server"></asp:ScriptManager>
    <asp:Button ID="DummySubmitButton" runat="server" Text="Button" OnClientClick="return false;" style="display:none" />  
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="PUSH" />
        <asp:Panel ID="Panel1" runat="server">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button ID="DummyButton" runat="server" Text="" Style="display:none" />
                <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                    TargetControlID="DummyButton" 
                    PopupControlID="Panel1"
                    DropShadow="true"
                    BackgroundCssClass="modal">
                </ajaxToolkit:ModalPopupExtender>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
OnSelectedIndexChanged="GridView1_SelectedIndexChanged" 
                    OnRowDataBound="GridView1_RowDataBound" AutoGenerateSelectButton="True" EnableTheming="True">
                    <Columns>
                        <asp:BoundField DataField="Test" HeaderText="テスト" />
                    </Columns>
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>  
        </asp:Panel>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.OleDb;
using System.Diagnostics;
using Microsoft.VisualBasic.FileIO;
using System.Text.RegularExpressions;

namespace Test
{
    public partial class Test: System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("Test");
                dt.Rows.Add(new object[] { "1" });
                dt.Rows.Add(new object[] { "2" });
                dt.Rows.Add(new object[] { "3" });
                dt.Rows.Add(new object[] { "4" });
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            UpdatePanel1.Update();
            ModalPopupExtender1.Show();
            if (GridView1.Rows.Count > 0)
            {
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
            }
        }

        protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (ScriptManager.GetCurrent(this).IsInAsyncPostBack)
            {
                ScriptManager.GetCurrent(this).RegisterDataItem(GridView1, GridView1.SelectedRow.Cells[1].Text);
            }
            ModalPopupExtender1.Hide();
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                // Hiding the Select Button Cell in Header Row.
                e.Row.Cells[0].Style.Add(HtmlTextWriterStyle.Display, "none");
            }

            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                // Hiding the Select Button Cells showing for each Data Row. 
                e.Row.Cells[0].Style.Add(HtmlTextWriterStyle.Display, "none");

                // Attaching one onclick event for the entire row, so that it will
                // fire SelectedIndexChanged, while we click anywhere on the row.
                if (e.Row.Cells[1].Text != "&nbsp;")
                {
                    e.Row.Attributes.Add("onclick", ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + e.Row.RowIndex));
                }
            }
        }
    }
}
function pageLoad(sender, args) {
    // 非同期通信
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function pageLoaded(sender, args) {
    var test = args.get_dataItems()["GridView1"];
    if (test ) {
        document.getElementById("TextBox1").innerText = test ;
    }
}

すみません。開発環境等追記します。
サーバーOS:Windows Server 2012
クライアントOS:Windows7
.NET:4.0
サーバーIIS:6.28.0
クライアントIIS:10.0 Express
Visual Studio:2015 Community
不勉強で申し訳ございません。テンプレートは意味すら分かりません。テンプレート:空
Ajax Control Toolkit:(おそらく)18.1 こちらからダウンロード

2018/05/31追記
実現したいこととしてはAccessのシステムをASP.NETに移植するに当たり、複数列のコンボボックスを作成したいということです。
1.ボタンを押す
2.複数列コンボボックスに見立てたGridViewを表示(提示したコードは1列ですが実際は複数列)
3.GridViewから選択した行のセルの値をTextBoxに表示
(ModalPopupExtenderを使用したのはJavascriptのShowModalDialogはChromeで動かないとの記事がありましたので)
要はAccessのような複数列コンボボックスが作成したいと思っています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • tryCSharp

    2018/05/31 10:39

    そうですか。。。自分の環境ではpageLoadedに制御が飛ばないのでこのやり方では出来ないということですね。別のモーダル表示を探してみます。何かアイディアがありましたらヒントだけでも頂けると幸いです。

    キャンセル

  • SurferOnWww

    2018/05/31 10:52

    「自分の環境ではpageLoadedに制御が飛ばない」というのはどうやって確認したのですか? コードを必要最低限に削って確認しましたか? 自分が試した例を回答欄に書いておきますので、ここまで削ってみてください。それで Forefox 60.0.1 がダメということですと、多分質問者さん固有の環境の問題だと思います。

    キャンセル

  • tryCSharp

    2018/05/31 11:38

    「Postback時の画面の描画が非常に遅い」という問題に対応するため今回のコードを書いています。このコードだと問題ない速度で表示されます。

    キャンセル

回答 1

checkベストアンサー

+1

2018/05/31 10:52 の私のコメントで「自分が試した例を回答欄に書いておきます」と書きましたが、それを以下に書きます。

.aspx.cs(自動生成されたデフォルトのまま)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }
    }
}

.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="default.aspx.cs" Inherits="WebFormsAppNET4._default" %>

<!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></title>
    <script type="text/javascript">
        //<![CDATA[
        var manager;

        function pageLoad(sender, args) {
            if (args.get_isPartialLoad() === false) {
                manager = Sys.WebForms.PageRequestManager.getInstance();
                manager.add_pageLoaded(pageLoaded);
            }
        }

        function pageLoaded(sender, args) {
            if (manager.get_isInAsyncPostBack()) {
                alert('Page Loaded!!!!');
            }
        }

  //]]>
  </script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

【追記】

質問への 2018/05/31 09:12 の私のコメントで「全体的なやりたいことのシナリオ・ストーリーを書いてもらえませんか? それに合わせて徐々に実装しながら検証してみますので」と書きましたが、それを以下に書いておきます。

やりたいことは以下の通りと理解。

(1) Panel 内に UpdatePanel、その中に GridView を実装。

(2) Panel の外に TextBox と Button を配置。

(3) ModalPopupExtender を配置し、PopupControlID を上記 (1) の Panel に、TargetControlID を上記(2)の Button に設定。

(4) Button クリックで Panel(その中の GridView も)表示。

(5) GridView の行選択で Panel を非表示にして TextBox に選択した行のデータを表示。

上記やりたいことの最低限の実装ですが、以下のコードで期待通り Firefox 60.0.1 でも動きます。

質問者さんの環境で動かないとすると、質問者さんの環境固有の問題だと思われます。

動くとすると、これに加えて質問者さんがいろいろ実装したコードの影響だと思います。何か違うのか、何の影響なのか質問者さんの方で良く調べてください。

.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace WebFormsAppNET4
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("Test");
                dt.Rows.Add(new object[] { "1" });
                dt.Rows.Add(new object[] { "2" });
                dt.Rows.Add(new object[] { "3" });
                dt.Rows.Add(new object[] { "4" });
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }

        protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (ScriptManager.GetCurrent(this).IsInAsyncPostBack)
            {
                ScriptManager.GetCurrent(this).RegisterDataItem(GridView1,
                    GridView1.SelectedRow.Cells[1].Text);
            }
            ModalPopupExtender1.Hide();
        }
    }
}

.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="default.aspx.cs" Inherits="WebFormsAppNET4._default" %>

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!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></title>
    <script type="text/javascript">
        //<![CDATA[
        var manager;

        function pageLoad(sender, args) {
            if (args.get_isPartialLoad() === false) {
                manager = Sys.WebForms.PageRequestManager.getInstance();
                manager.add_pageLoaded(pageLoaded);
            }
        }

        function pageLoaded(sender, args) {
            if (manager.get_isInAsyncPostBack()) {
                var selectedIndex = args.get_dataItems()["GridView1"];
                document.getElementById("TextBox1").value = selectedIndex;
            }
        }

    //]]>
    </script>
    <style type="text/css">
        /*Modal Popup*/
        .modalBackground {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }

        .popuppanel {
            background-color: #ffffff;
        }
  </style>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />

        <asp:Panel ID="Panel1" runat="server" CssClass="popuppanel">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>                
                    <asp:GridView ID="GridView1" runat="server" 
                        AutoGenerateColumns="False" 
                        AutoGenerateSelectButton="True" 
                        OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
                        <Columns>
                            <asp:BoundField DataField="Test" HeaderText="テスト" />
                        </Columns>
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" 
            runat="server"
            PopupControlID="Panel1" 
            TargetControlID="Button1" 
            BackgroundCssClass="modalBackground">
        </ajaxToolkit:ModalPopupExtender>
    </form>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/31 11:32 編集

    ご回答ありがとうございます。
    SurferOnWww様のコードでalertが出ることが確認できました。
    でも自分の当初の目的(自分のテストコードでFireFoxにてpageLoadedを発生させる)が果たせていないのでもう少し調査してみます。

    キャンセル

  • 2018/05/31 12:29

    2018/05/31 09:12 の質問への私のコメントで「全体的なやりたいことのシナリオ・ストーリーを書いてもらえませんか? それに合わせて徐々に実装しながら検証してみますので」と書きましたが、それを回答欄に書いておきます。やりたいことの最低限の実装ですが、それで期待通り Firefox 60.0.1 でも動きます。質問者さんの環境で動かないとすると、質問者さんの環境固有の問題だと思われます。

    キャンセル

  • 2018/05/31 14:48

    ありがとうございます!!!!
    SurferOnWww様のコードが上手くいったのでいざ自分の本番コードも修正掛けたのですがFireFox、Chrome共TextBoxに値が設定されず頭を抱えていたのですが、JavaScriptでTextBoxに値を代入する際、innerTextを使っていたのが悪かったようです。
    大変お手数をお掛け致しました。本当にありがとうございます。

    キャンセル

  • 2018/05/31 20:06

    デバッガは使えないのですか? Visual Studio なら JavaScript のコードにもブレークポイントを設定してそこで実行を止められます。pageLoaded メソッドの中にブレークポイントを設定してデバッグ実行して見ればすぐに pageLoaded メソッドに制御が飛んでくるのは分かったのではないですか?

    キャンセル

  • 2018/06/01 12:56 編集

    JavaScriptのコードにブレークポイントを置くと
    「ブレークポイントは現在の設定ではヒットしません。このドキュメントのシンボルは読み込まれていません」と出てしまって…。どうやらVSのバグのようなのですが。毎回毎回本当にお手数をおかけして申し訳ございません。

    キャンセル

  • 2018/06/01 13:50

    Firefox の問題というのを失念してました。すみません。ブラウザが Firefox の場合は Visual Studio では JavaScript のコードにはブレークポイントが設定できないです。Firefox の開発ツールのデバッガを使ってください。もしくは alert を入れるとか。そうしていれば Firefox でも pageLoaded メソッドに制御は飛ぶということは分かったはずです。それが分かっていれば、メソッドの中だけ注目してすぐ解決できたかもしれませんよ。

    キャンセル

  • 2018/06/01 18:44 編集

    FirefoxではJavaScriptのデバッガが効かないのですね。キーワードで検索してもその情報にはたどり着けていませんでした。度々ありがとうございます。たしかにpageLoadedにaleat掛ければこんなに時間を費やすことはなかった…。長くお付き合い頂きましてありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15314questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • C#

    6566questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    481questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。