Web Technology > Visual Studio for Designers

DataGrid内の文字データをリンクスイッチにする

DataGridに表示されているデータからリンクを張りたい場合、LinkButtonを置く列を別個に設けて、GIF画像のアイコンを貼る方法は、とても便利です。
lzhとzip、htmlとpdfなど、複数の列を作り、各々の列にアイコンを貼ってリンクしたい場合には、便利な方法です。
しかし、1種類のファイルや、1箇所のリンク先に対してリンクを張る場合、ヴィジュアルデザインの観点から見れば、DataGridの任意の列に縦にズラリと並ぶアイコンは、目立ちすぎて、ページのイメージを壊す場合があります。
そのような場合は、あれこれ考えるのではなく、オーソドックスなヴィジュアルデザインにした方がよいです。
DataGrid内の文字データをリンクスイッチにしてみましょう。
それにはまず、非表示(Visible="False)にしたBoundColumn列を作って、DataFieldに、プログラムコード中で定義したDataColumnオブジェクトの値を指定します。そして、その値を利用して、DataNavigateUrlFieldのリンク先URIを指定します。デバッグの際は、BoundColumn列を非表示(Visible="True")にしておけば、正しいリンク先が取得できているかどうか、確認が容易です。
DBからの値の取得については、ヴィジュアルには関係ないので、ここでは触れません。というか、書くのが面倒だから省略しちゃいます。

画像のアイコンからリンクするコード(aspx)

<asp:HyperLinkColumn Text="<img src='画像アイコンのURI' alt='リンク先へジャンプ' border='none'>" Target="_blank" DataNavigateUrlField="URI" HeaderText="ヘッダの項目名"></asp:HyperLinkColumn>

DataGrid内の文字データからリンクするコード(aspx)

<asp:HyperLinkColumn Target="_blank" DataNavigateUrlField="BoundColumn列に指定したDataFieldの値" DataTextField="このフィールドに対するDataColumnオブジェクトの値" HeaderText="項目名"></asp:HyperLinkColumn>
<asp:BoundColumn Visible="False" DataField="このフィールドに対するDataColumnオブジェクトの値" HeaderText="任意の項目名"></asp:BoundColumn>

もどる