javascriptでGridViewから行番号を取得する方法を教えてください。

Question

いつも拝見させていただいています。
今回asp.netで疑問が生じたため投稿させていただきました。

【問題点】
gridviewにlinkbuttonを配置し、javascriptでlinkbuttonがクリックされた
行番号を取得したいと考えています。

linkbuttonはitem templateに入れているので、RowCreateで
動的に行番号を付与しています。
下記ソースのshowGroupメソッド内でlinkbuttonがクリックされた際に
その行番号取得を試みていますが、どうもうまく取得できないでいます。

行番号の取得方法について何かアドバイスを頂けないでしょうか。
よろしくお願いします。

【ソース】

Protected Sub GridView1_RowCreated(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowCreated

		If e.Row.RowType = DataControlRowType.DataRow Then
			'グリッドビュー作成時に行番号を仕込む
			Dim lnkBtn_Search As LinkButton = CType(e.Row.FindControl("lnkBtnExchangeDate_Search"), LinkButton)
			lnkBtn_Search.CommandArgument = e.Row.RowIndex.ToString
		End If
	End Sub

<asp:GridView ID="GridView1" runat="server">
	<Columns>
		<asp:TemplateField HeaderText="グループ名">
			<ItemTemplate>
				<asp:LinkButton ID="lnkBtn_Search" Text='<%# Bind("GroupName") %>' runat="server"　OnClientClick="return showGroup();" CommandName="ShowGroup"></asp:LinkButton>
			</ItemTemplate>
			<ItemStyle Width="150px" Font-Size="11" />
		</asp:TemplateField>

function showGroup() {
	var mordal = $find('BehaviorID_ShareGroup');
	mordal.show()
	//document.getElementById("hfRecordIndex").value = ??? ←ここでhiddenに行番号を渡したい
	document.getElementById("btnGetGridData_ShareGroup").click(); //隠しボタンを押下してクリックイベント発生
	return false;
}

【追記：実装したい処理について】
〇処理の全体像について
GridView1ではあるグループ情報を表示しています。
具体的にはグループ名、グループ概要、グループ作成日時、グループ作成者を表示しており、
グループ名がリンクボタンとなっております。

実装したい処理としては、このグループ名をクリックしたときモーダルウィンドウで
グループに所属しているメンバー一覧を表示したいと考えています。

そこで下記のような処理を実装したいと考えております。
１）グリッドビューのリンクボタンをクリックする
２）モーダルを表示、またhiddenに行番号を格納
３）隠しボタンを押下してクリックイベントを発生させサーバーの処理へ
４）サーバー側ではhiddenに格納した行番号を利用して
押下したグループ名をキーにメンバーを取得

※JavaScript中のbtnGetGridData_ShareGroupはモーダルに仕掛けた隠しボタンで
これjavascriptで押下することでイベントを発生させております。

【開発環境】
IDE：visual studio 2015 pro
言語：vb.net(web form)

Comments

[退会済みユーザー]

> javascriptでlinkbuttonがクリックされた 行番号を取得したいと考えています。← 「javascriptで」とはどういうことですか？　質問には JavaScript のコードは一切ありませんが？？？？？？？？？？？？

[退会済みユーザー]

上のコメントを理解いただいているでしょうか？　具体的に言うと「showGroupメソッド」の中身はどこまで書けているか、どこでつまづいているか、何が分かれば質問者さんの問題・課題が解決できるかが書いてないので、それをきちんと書いてほしいのですが。あと、「どうもうまく取得できない」では第三者には分かりません。そこを具体的に書くのが、ここに書いてないこと以外は知り得ない回答者に状況を理解してもらうために必須です。JavaScript のコードをアップして説明してもらえると分かりやすくなると思います。

[退会済みユーザー]

もう一つ、「GridViewから行番号を取得」とのことですが、GridView の行 Index ではなくて当該行のレコードの主キー値が必要なのではないですか？　そのあたりも確認してください。全体的なシナリオ・ストーリーを含めて何をしたいのかを書いてもらえると第三者にも理解しやすいです。

[devbgn]

三連休中、業務PCでの作業ができず返信が遅くなり申し訳ありませんでした。また上記のご指摘ありがとうございました。JavaScriptのコードを追記させていただきました。

[退会済みユーザー]

最初の質問にあった OnClientClick="return showGroup();" と追記した JavaScript の関数名 showShareGroup が違いますけど？

[devbgn]

申し訳ありません。ご指摘の部分を訂正させていただきました。

[退会済みユーザー]

ModalPopup を使って何かしているのですか？　btnGetGridData_ShareGroupr とは何ですか？　先にもお願いしましたが、全体的なシナリオ・ストーリーを含めて何をしたいのかを書いてもらえませんか？　Index の渡し方だけレスしても、質問者さんが最終的にやりたいことはできないような気がしますので。

[退会済みユーザー]

ホントに Index の渡し方さえわかれば良い、それ以外のことは回答者には考えてもらわなくてよいということであれば、itita さんの回答を試してはいかがですか？

[退会済みユーザー]

全ての情報は DB にあるようですが、そうなんですか？　であれば、その DB は何ですか？　SQL Server? Access? その他？　そして DB には「グループ」テーブルと「メンバー」テーブルがあって、「メンバー」テーブルからグループ名で検索してレコードを抽出できると理解していいのでしょうか？

[退会済みユーザー]

そして、ページに GridView1 と GridView2 の 2 つを配置し、GridView1 には「グループ」テーブルからグループ情報の一覧を表示、GridView1 の LinkButton をクリックすると当該行のグループ名に属するメンバーを「メンバー」テーブルから抽出し GridView2 に表示するということでいいのですか？

[退会済みユーザー]

さらに、GridView2 は ModalPopup を使って、GridView1 の LinkButton がクリックされた時だけ表示するということですか？　以上、違ったらどこがどのように違うのか詳しく書いてください。

[devbgn]

DBについてですが、DBはsql serverを使用しています。またDBに関してSurferOnWwwさんが述べている認識で合っております。

[devbgn]

GridView1と2の関係もご認識の通りです。私のつたない説明でかなりのところまでご理解くださりありがとうございます。

[devbgn]

また実際に動作させたかった処理ですが、ご助言の通りititaさんのコードを参考に記述したところ行番号を取得することができました。そして取得した行番号にてサーバーサイドでgridviewのグループ名を取得できました。

[devbgn]

ベストアンサーとしてはititaさんの回答がピンポイントだったので、そちらにさせていただければと思います。ただSurferOnWwwさんからいろいろご質問頂くうちに頭の中がとても整理されました。ご助言ありがとうございました。

[退会済みユーザー]

質問者さんとしてはすでに解決済みかもしれませんが、GridView の Index を取得するところ、使う必要のない JavaScript を使っているところなど、見直すべきところが多々あります。今さらながらですが、そのあたりを回答欄に書いておきます。今後の参考にしていただければ幸いです。

Answer 1

javascriptを引数ありにしてOnClientClickの引数に行番号を与えることで解決できると思います。
実行はしていないので、参考程度にどうぞ。

OnClientClick=<%# "return InputCheck(" + ((GridViewRow) Container).RowIndex + ");"%>

Comments

[devbgn]

>ititaさん
ご回答ありがとうございました。
開発はvb.netでしたので、上記コードをvb.netに置き換えることで
狙い通り行番号を取得することができました。
ありがとうございました。

Answer 2

質問者さんとしてはすでに解決済みかもしれませんが、GridView の Index を取得するところ、使う必要のない JavaScript を使っているところなど、見直すべきところが多々あります。今さらながらですが、そのあたりを書いておきます。参考にしていただければ幸いです。

まず、上の質問に対するコメントでも確認させていただきましたが、以下の (1) ～ (3) の条件で考えます。

(1) 全ての情報は DB にある。DB は SQL Server。DB には「グループ」テーブルと「メンバー」テーブルがあって、「メンバー」テーブルからグループ名で検索してグループに属するメンバーのレコードを抽出できる。

(2) ページに GridView1 と GridView2 の 2 つを配置し、GridView1 には「グループ」テーブルからグループ情報の一覧を表示、GridView1 の LinkButton をクリックすると当該行のグループ名に属するメンバーを「メンバー」テーブルから抽出し GridView2 に表示する。

(3) GridView2 は ModalPopup を使って、GridView1 の LinkButton がクリックされた時だけ表示する。

GridView1 の LinkButton クリックで当該行の Index を取得するよりは、グループ名を取得する方がよさそうです。 グループ名で「メンバー」テーブルを検索してグループに属するメンバーを抽出するわけですから。

そのためには LinkButton の CommandArgument プロパティにグループ名を設定します（質問者さんが Text プロパティに設定したのと同様に）。以下のような感じです。JavaScript は使わないので OnClientClick の設定は不要です。

<asp:TemplateField HeaderText="グループ名">
    <ItemTemplate>
        <asp:LinkButton ID="lnkBtn_Search" runat="server" 
            Text='<%#Eval("GroupName")%>' 
            CommandArgument='<%#Eval("GroupName")%>'>
        </asp:LinkButton>
    </ItemTemplate>
</asp:TemplateField>

メンバーを表示する GridView2 のデータソースには SqlDataSource を使い、以下のように（あくまで例です）SelectCommand, SelectParameters を設定します。

<asp:SqlDataSource ID="SqlDataSource2" runat="server" 
    ConnectionString="<%$ ConnectionStrings:xxxxx %>" 
    SelectCommand="SELECT * FROM [メンバー] WHERE ([グループ名] = @GroupName)">
    <SelectParameters>
        <asp:Parameter Name="GruopName" Type="String" />
    </SelectParameters>
</asp:SqlDataSource>

GridView2 は Panel 内に実装し、ModalPopup で Panel の表示・非表示を切り替えられるようにします。

GridView1 の LinkButton をクリックするとポストバックされ、RowCommand イベントが発生します。そのハンドラの引数の GridViewCommandEventArgs オブジェクトから、上のコードで設定した CommandArgument プロパティの設定値、即ち、クリックされた行のグループ名を取得できます。

なので、以下のようにすれば期待通りの動きになるはずです。

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    string groupName = (string)e.CommandArgument;
    SqlDataSource2.SelectParameters["GroupName"].DefaultValue = groupName;
    ModalPopupExtender1.Show();
}

以下の画像は、DB に Microsoft のサンプルデータベース Northwind の Categories, Products テーブルを使った例です。

Comments

[devbgn]

>SurferOnWwwさん
コメントありがとうございます。
まさかこんな丁寧に解説を頂けるとは。

実はSurferOnWwwさんの上記のロジックも検討はしたものの、
自力でうまく実装ができなかったため本件のロジックに至りました。

独力で解決しなくてはならない環境なのでご意見が頂けて
大変勉強になりました。ありがとうございました。