QA@IT

ASP.NETのGridViewのセルに設けたCommandField(Buttonタイプ)のテキスト、色を制御したい。

4676 PV

環境

VWD2010で開発しております。

  • OSはWindows8
  • .NET Framework4
  • IISは7.0
  • ブラウザはGoogleChrome

状況

  • SqlDataSource と GridView1 を組み合わせてバインドしています。
  • CommandFieldでレコードの列[商品名]を表示しています。
  • CommandFieldのButtonTypeはButtonです。

したいこと

1) GridView1の外側に設けたButton1を押すと、例えば2行目の表示を、バインドしたレコード由来ではないテキスト(例えば"ボタン押下済み")に置き換えて表示したいです。
直接テキストを表示させることはできましたが、セルのボタンの機能は無くなってしまいました。セルのボタンを押せる機能は保ったまま、表示内容を変えたいということです。
そもそもできないならば、TempleteFieldにButtonを貼り付け、それを制御すれば良いのでしょうか。
2) 上記のボタンの色や輪郭を、Button1を押したときに特定の色を指定して表示したいです。
これも、TempleteFieldにButtonを貼り付けた方が良いのでしょうか。
【追記】
分かりづらくて申し訳ありません。
上記の例では、GridViewに表示されている列は一列のみです。それがCommandFieldで、バインド直後には「商品名」が表示されています。
その表示されているテキストそのものを、GridViewとは直接関係のないボタンをクリックするイベントで変えることはできないかということです。
そのとき、CommandFieldのテキストの表示は変わっても、クリックはできるままになっていなくてはいけません。

  • イメージがわきません。特に「外側に設けたButton1」と「2 行目の表示」の関係。GirdView の各行の外側に Button があって、クリックすると、その Button の横の行の中の CommandField のボタンの隣に "ボタン押下済み" と表示するんですか? その後 CommandField のボタンはクリックできてもいいんですか? 何がしたいのか全体的なシナリオを書けませんか? -
  • GridView には CommandField が一列のみで、それがレコードの数だけ複数行あって、ボタンにはレコードの[商品名]が表示されている。Button1 は一個だけ GridView の外に配置されていて、それをクリックするとボタンの[商品名]の表示を"ボタン押下済み"に変えるということ? -
  • すみません、もう一つ質問です。Button1 をクリックして、CommandField のボタンの表示やスタイルを変更するのは、すべてクライアントスクリプトでやっていいのですか? -
  • 1)そうです。
    2)スクリプトについては、クライアントサイドのみでもかまいません。

    -

回答

CommandField のボタンにどうやって[商品名]を表示するようにしたのか分かりませんが、CommandField のボタンは ButtonType が Button の場合 html コードになると

<input type="button" ... /> 

になりますので、以下のようなクライアントスクリプト(jQuery 使用)で value 属性とスタイルを書き換えられます。

<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () {
        $('#Button1').click(function () {
            $('#<%=GridView1.ClientID%> input:button').each(function () {
                $(this).val('ボタン押下済み');
                $(this).css('color', 'red');
            });
        });
    });
//]]>
</script>

(注)
Button1 はサーバーコントロールの Button ではなく、html の

<input type="button" id="Button1" ... /> 

を使ってください。そうしないとポストバックされてしまいます。

また、ポストバックして同じページを再描画する場合は元に戻ってしまいます。また、クライアントスクリプトで元に戻すことは考慮してません。それらが NG なら別の手段を考える必要があります。

編集 履歴 (0)
ウォッチ

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