QA@IT

GridView内の行毎に配置した隠しボタンのクリックイベントについて

4542 PV

【環境】
VisualStudio2012(あまり関係ないかもしれません)

【状況】
現在visualstudioでweb画面の開発を行っているのですが、
GridView内の行毎に配置した隠しボタンのクリックイベントを、行クリック時に行いたいのですがうまくいきません。
クリック行のボタンの情報まで取得はできているようなのですが、C#側のクリックイベントが実行されないのです。
どなたか回答いただけないでしょうか?

以下、ソースです。
[aspx]

<script type="text/javascript">
$(function () {
    $(document).on("click", "#GridA tr.dataRow", function () {
        // 行クリック時の隠しボタン押下イベント設定。
        $("#ButtonHiddenA", this).click();
    });
);
</script>
(中略)
<asp:GridView ID="GridA" runat="server" AutoGenerateColumns="False"ShowHeaderWhenEmpty="True" AllowPaging="true" RowStyle-CssClass="dataRow" PagerStyle-CssClass="pager-text" OnPageIndexChanging="GridA_PageIndexChanging" PageSize="100">
    <PagerSettings Mode="NextPreviousFirstLast" FirstPageText="<<最初" LastPageText="最後>>" NextPageText="次へ>" PreviousPageText="<前へ" Position="Bottom" />
    <Columns>
        <asp:TemplateField HeaderText="No." HeaderStyle-CssClass="h1" ItemStyle-CssClass="c1">
            <ItemTemplate>
                <asp:Literal ID="LiteralNo" runat="server" Text="<%# Container.DataItemIndex + 1 %>"></asp:Literal>
                              <%--このボタンのクリックイベントを発生させたい--%>
                <asp:Button ID="ButtonHiddenA" runat="server" CssClass="c8"  TabIndex="-1" OnClick="ButtonHiddenA_Click" CausesValidation="false" CommandArgument='<%# Eval("KirokuNo") %>'/>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField HeaderStyle-CssClass="h2" HeaderText="個人名" DataField="KozinName" />
    </Columns>
</asp:GridView>

[C#]

// このイベントが発生しない
protected void ButtonHiddenA_Click(object sender, EventArgs e) {
    long KirokuNo = long.Parse((sender as Button).CommandArgument);

}

回答

【追記3】
クライアントスクリプトで click() してもポストバックがかからない理由が分かりました。

tr 要素の click イベントにリスナーを設定して、そのリスナーの中で tr 要素の中の input 要素をクリックするのでバブリングで無限ループになるのがダメな原因でした。

以下のようにバブリングを止めればうまく行くと思います。ただし、IE8 以前の DOM Level 3 Events をサポートしていないブラウザまでうまく行くかどうかは未検証です。お試しください。

$(function () {
$(document).on("click", "#<%=GridA.ClientID%> tr.dataRow", function () {
var ele = $(this).find('input:submit');
ele.click(function (event) {
event.stopPropagation();
});
ele.click();
});
});

編集 履歴 (0)

【環境】
VisualStudio2012(あまり関係ないかもしれません)

「環境」には、Visual Studio のバージョンだけでなく、OS, IIS, .NET のバージョン、IIS を使っていないのなら何を使っているのか(IIS Express or ASP.NET 開発サーバ?)、使っているブラウザが何かなども書いてください、

それから、作っているアプリのプラットフォーム(ASP.NET Web Forms なのか MVC なのか、それともそれ以外?)もお願いします。GridView を使っているとのことなので、Web Forms であろうと想像していますが、その場合でも Web サイトプロジェクトか Web アプリケーションプロジェクトの違いがあります。

今回の質問とはあまり関係ないと思われるかもしれませんが、できるだけ詳しく書くことをお勧めします。

クリック行のボタンの情報まで取得はできているようなのですが、C#側のクリック
イベントが実行されないのです。

ポストバックはかかっているのでしょうか?

追加しているクライアントスクリプトの目的は分かりませんが、それを全部コメントアウトしたらポストバックがかかって、サーバー側で ButtonHiddenA_Click メソッドに制御が飛ぶのではないですか?・・・・・【追記2】ボタンを隠すのであればこれはダメですね。すみませんこれは忘れてください。

$("#ButtonHiddenA", this).click();

ButtonHiddenA の ClientID は "ButtonHiddenA" ではないはずです。

"#ButtonHiddenA" を "#<%=ButtonHiddenA.ClientID%>" としたらどうなりますか?・・・・・【追記2】これもダメでした。$(this).find('input:submit') とすれば jQuery オブジェクトは取得できるようですが、それをに click() を設定してもポストバックはかからないようです。やはり、【追記1】で紹介したページのサンプルのように GetPostBackEventReference メソッドと RaisePostBackEvent メソッドを使って実現するのをお勧めします。

【追記1】
・・・と、ここまで書いてアップしてしまってから気がつきましたが「隠しボタン」ということは css で display:none; とかしてあるのでしょうか?

そうした理由はボタンはユーザーに見せず、ユーザーが行をクリックした時にポストバックしてサーバー側で何らかの処置をするということが目的でしょうか?

であれば、以下のページのようにしてはいかがですか? 実際に動かして試せるサンプルもありますので見てください。

__doPostBack を使ってはいけません
http://surferonwww.info/BlogEngine/post/2012/04/21/How-to-use-GetPostBackEventReference-and-RaisePostBackEvent-methods.aspx

編集 履歴 (2)
ウォッチ

この質問への回答やコメントをメールでお知らせします。