DataGridのHyperLinkColumnの使い方

 

●  DataGridのHyperLinkColumnを使用したサンプル

 

図 DataGridのHyperLinkColumnを使用したサンプル

 

このサンプルは、DataGridにHyperLinkColumnを表示させています。ハイパーリンクをクリックすると、クリックした得意先の詳細が表示されます。得意先の詳細は、iframeを使用して同じページに表示させています。

 

このサンプルでは、以下のノウハウを習得することができます。

 

▲  DataGridのHyperLinkColumnの使い方

▲  iframeの使い方

 

このサンプルでは、得意先名をハイパーリンクで表示させています。行46-51では、HyperLinkColumnを定義しています。行47では、HeaderTextプロパティに「得意先名」を設定してカラムヘッダに表示しています。行48では、DataNavigateUrlFieldプロパティに得意先テーブルの得意先ID(CustomerID)を設定しています。ここで設定した得意先IDは、行49で参照します。行49では、DataNavigateUrlFormatStringプロパティに得意先の詳細を表示する.aspxファイル(DataGridHyperLinkDetail.aspx)を設定しています。?id={0}では、QueryStringを指定して選択した得意先のIDを渡しています。{0}のプレースホルダーには、行48で設定した得意先IDが挿入されます。行50では、DataTextFieldプロパティに得意先テーブルの得意先名(CompanyName)を設定しています。この場合、得意先名がハイパーリンクとして表示されます。

 

行51では、行49で設定した.aspxファイルが表示されるフレーム名を設定しています。Targetプロパティには、行56で定義しているiframeを設定しています。これで、ハイパーリンクをクリックするとDataGridHyperLinkDetail.aspxのページがiframe上に表示されます。

 

35:   <td valign="top" width="30%" >
 36:     <asp:DataGrid id="dgrdCustomers" runat="server"
 37:       AutoGenerateColumns="False"
           ::: >

:::
 45:       <Columns>
 46:         <asp:HyperLinkColumn
 47:           HeaderText="得意先名"
 48:           DataNavigateUrlField="CustomerID"
 49:           DataNavigateUrlFormatString="DataGridHyperLinkDetail.aspx?id={0}"
 50:           DataTextField="CompanyName"
 51:           Target="frDetail" />
 52:       </Columns>
 53:     </asp:DataGrid>
 54:   </td>
 55:   <td width="70%">
 56:     <iframe frameborder="no" name="frDetail">
 57:     </iframe>
 58:   </td>