QA@IT

ASP.NETにおいて、JavascriptにてRadioButtonListの選択値の取得

9329 PV

開発環境:ASP.NET(VS2010(SP1) C#.NET .NETFramework4.0)

いつもお世話になっております。

現在、マスタの項目をradiobuttonlistにて表示し、1項目のみ選択する画面を作成しています。
元々はWebフォームにて作成しておりましたが、ポップアップ画面にて表示することとなり
ModalPopupExtenderにて表示するようにしました。
初めてModalPopupExtenderを使用するのですが、OK時の処理をOnOkScriptに割り当てた関数にて処理し、
その関数はJavaScriptで記載するのだと認識しています。
JavaScriptで、SelectedItem.Text及びValueにあたる内容を取得し、
画面の項目に設定するにはどのようにしたらいいのでしょうか?
または、.csファイルに記載している関数をModalPopupExtenderにて割り当てている
Panel内のボタンに割り当てることはできないのでしょうか?

追記

<asp:Table ID="Table1" runat="server" Border="0" Width ="700" >
<asp:TableRow>
<asp:TableCell>
<asp:Button ID="btnBSearch" Text="条件選択" runat="server" OnClick="btnBSearch_Click" />
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txtSearchData" runat="server" ></asp:TextBox>
</asp:TableCell>
<asp:TableCell>
<asp:Button ID="btnSearch" runat="server" Text="検索" OnClick="btnSearch_Click" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<br />

<asp:Panel ID="Panel1" runat="server" ScrollBars="Auto">
<asp:GridView ID="gvList" runat="server" AllowPaging="True" PageSize="20" ShowHeaderWhenEmpty="True" AutoGenerateColumns="False"
OnRowDataBound=gvList_RowDataBound" OnPreRender="gvList_PreRender" >
<Columns>
<asp:TemplateField HeaderText="No" >
<ItemTemplate >
<%# Container.DisplayIndex + 1%>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" Visible="False" />
<asp:BoundField DataField="名称" HeaderText="備考" />
<asp:BoundField DataField="備考" HeaderText="備考" />
</Columns>
<PagerSettings FirstPageText="先頭" LastPageText="最後" Mode="NumericFirstLast"
PageButtonCount="5" Position="TopAndBottom" />
<PagerTemplate>
<asp:Label ID="lblSumCount" runat="server" Text = "該当件数○○件"></asp:Label>
<asp:LinkButton ID="LinkButtonP" runat="server" OnClick="LinkButtonPrev_Click"> << </asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">1</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">2</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" OnClick="LinkButton3_Click">3</asp:LinkButton>
<asp:LinkButton ID="LinkButton4" runat="server" OnClick="LinkButton4_Click">4</asp:LinkButton>
<asp:LinkButton ID="LinkButton5" runat="server" OnClick="LinkButton5_Click">5</asp:LinkButton>
<asp:LinkButton ID="LinkButtonN" runat="server" OnClick="LinkButtonNext_Click">>></asp:LinkButton>
</PagerTemplate>

</asp:GridView>
</asp:Panel>

<asp:Panel ID="pnlDialog" runat="server" Width="600px">
<asp:Panel ID="pnlDialogDetail" runat="server"
BackColor="White" ForeColor="Black" BorderColor="Black"
Height="400px" ScrollBars="Auto"

<div>
<asp:Button ID="btnModalOK" runat="server" Text="OK" OnClick="btnModalOK_Click" />
 

<asp:Button ID="btnModalCancel" runat="server" Text="キャンセル" OnClick="btnModalCancel_Click" />
 

<asp:Button ID="btnModalClear" runat="server" Text="クリア" OnClick="btnModalClear_Click" />
 

選択してください。
</div>
<div>
<asp:RadioButtonList ID="rdList1" runat="server" RepeatColumns="3" CellPadding="10" RepeatDirection="Horizontal" >
</asp:RadioButtonList>
</div>
</asp:Panel>
</asp:Panel>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" />
<ajaxToolkit:ModalPopupExtender ID="mpeDialog"
runat="server"
TargetControlID="btnBSearch"
PopupControlID="pnlDialog"
PopupDragHandleControlID="pnlDialogDetail"
OkControlID="btnModalOK"
CancelControlID="btnModalCancel"
DropShadow="true"
Drag="true"

</ajaxToolkit:ModalPopupExtender>

  • コードはエディタの上部の一番右に表示されているボタンをクリックしてそれに入れていただけませんか。 -
  • あと、コードをアップする際は、問題・課題を伝えるための必要最小限にとどめていただけませんか。例えば、スタイル関係の設定などはアップするコードに含める必要はないですよね。 -
  • コードを見ました。はっきり言わせていただくと、アップされているコードは中途半端すぎてコメントできるレベルではないです。ModalPopup を使わないで 1 ページに全て実装できますか? まずはそれをやってみて、きちんと動いて期待した結果が得られてから、ModalPopup の機能を実装することをお勧めします。 -

回答

質問の「JavascriptにてRadioButtonListの選択値の取得」については以下の記事に回答が含まれていますので見てください。

リストコントロール上の選択結果を取得
http://surferonwww.info/BlogEngine/post/2012/11/09/how-to-obtain-text-and-value-of-selected-listitem-in-list-control-at-client-side.aspx

でも、たぶん、

OK時の処理をOnOkScriptに割り当てた関数にて処理し、
その関数はJavaScriptで記載するのだと認識しています。

というところに誤解があるようで、上の疑問に対する回答が得られても、全体的な解決にはつながらないような気がします。

なぜ「1項目のみ選択する画面」を別に作りたいのか分かりませんが、ModalPopup を使用する場合は同一ページに「1項目のみ選択」する部分を含めて全て実装し、必要ならそのページでポストバックしてサーバーで処置を行い、最終結果を得るのが基本です。

その過程で、ModalPopup の機能を利用して特定の部分(「1項目のみ選択」の部分)の表示・非表示を切り替えると考えてください。

そう考えると解が見えてくるのではないでしょうか。

なお、質問する際は、できれば局部的な質問だけでなく、全体のストーリー/シナリオを含めて何がしたいのかも書いていただくようお願いします。初心者の方は特に。そうしていただけると、局所的な質問の部分は実現が無理もしくは的外れでも「やりたいことはこうすれば実現できる」というような案が出てくるかもしれませんので。

面倒なことを言うと思うかもしれませんが、タイムリーに的を得た回答が得やすくなるということで、質問者さんにメリットのあることです。(前回の例で理解いただけるのではと思いますが)

編集 履歴 (0)
  • いつもお世話になっております。
    今回イメージしているのは、画面A(一覧表出力画面)において、検索条件が2項目あり、その1項目(マスタの内容)のみポップアップ画面を表示し、RadioButtonList(別画面ではCHeckBoxListの場合もあり)より、項目を取得し、画面Aの条件欄に値を返したいと思っています。
    この1項目のみを選択する画面に関しては、客先要望となっております。
    -
  • ただ、私自身がそもそもの理解がまだ出来ておらず、単純にVBでModalDialogを表示し、その値を取得するというイメージしか持っていません。
    同一ページに実装との意味は、同じaspxファイル内に一覧画面の部分もModalPopupExtenderの部分も記載しているという理解であっていますでしょうか?
    それで間違えていなければ、記載はしています。
    -
  • 一応、aspxファイルの内容を記載しました。
    やりたいことは、「条件検索」ボタン押下で、ポップアップ画面を表示し、1項目選択して、「OK」ボタン押下でtxtSearchDataに選択した項目のValue及びTextを表示したいと思っています。
    -
  • ポップアップ画面では、OKとキャンセル以外にクリアボタンもあり、こちらは選択解除(RadioButtonListでは不要ですが、CheckBoxList時に必要となります。
    それもあり、ポップアップ画面のボタンそれぞれのOnClickで処理が出来ればと思っています。

    このようなことを実現したいと思っています。
    -
  • 一応、最初に質問に対しての回答はしているつもりですが、それは見ていただけたでしょうか? まずは回答を見て、それで問題は解決したか否か、解決しなかったら何故かを書いてください。 -
ウォッチ

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