.NET TIPS

［ASP.NET］DataGridコントロールでハイパーリンクを表示するには？

デジタルアドバンテージ
2003/09/26

　DataGridコントロールの特定の列にハイパーリンクを使用するには、<asp:HyperLinkColumn>要素をDataGridコントロールの<Columns>要素に追加すればよい。このような列は「ハイパーリンク列」と呼ばれる。

　<asp:HyperLinkColumn>要素の最も基本的な記述は次のようになる。

  <asp:DataGrid ……>
    <Columns>
      <asp:HyperLinkColumn
          DataTextField="title"
          DataNavigateUrlField="link"
          HeaderText="タイトル" />
      ……
    </Columns>
  </asp:DataGrid>

　DataTextField属性とDataNavigateUrlField属性には、連結するデータソースの要素のフィールドを指定する。データソースがデータテーブル（DataTableオブジェクト）の場合には、これらの属性にはデータテーブル内のカラムの名前を指定する。DataTextField属性に指定した項目がリンクを設定されたテキストとなり、一方DataNavigateUrlField属性の項目がリンク先となるURL（最終的に<a>タグのhref属性に記述される文字列）となる。

　「TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？」では、Build Insiderの新着記事を記述したRSS情報をデータソースとして、記事タイトルと記事概要の一覧をDataGridコントロールで表示していた。そのデータソースには記事へのリンクが記述された「link」カラムも含まれているので、これを利用して記事タイトルの列で表示されているテキストをハイパーリンクにしてみよう。

　「TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？」で掲載している2番目のサンプル・プログラム（bounddg2.aspx）の2つの<asp:BoundColumn>要素のうち、最初の要素を<asp:HyperLinkColumn>要素に書き換えたサンプル・プログラムは次のようになる。太字部分が修正した個所だ。

<%@ Page Language="C#" EnableViewState="false" %>
<%@ Import Namespace="System.Data" %>

<html>
<head>
  <script runat="server">
    void Page_Load(object sender, EventArgs e) {
      DataSet ds = new DataSet();
      ds.ReadXml("http://www.buildinsider.net/rss");

      MyGrid.DataSource = ds.Tables["item"];
      MyGrid.DataBind();
    }
  </script>
</head>

<body>
  <form runat="server">
    <asp:DataGrid id="MyGrid"
        AutoGenerateColumns="false"
        CellPadding="4"
        runat="server" >

      <HeaderStyle BackColor="#BB2255" ForeColor="white"/>
      <ItemStyle   BackColor="#FFEEEE" />
      <AlternatingItemStyle BackColor="#FFDDDD" />

      <Columns>
        <asp:HyperLinkColumn
            DataTextField="title"
            DataNavigateUrlField="link"
            HeaderText="タイトル" />
        <asp:BoundColumn
            DataField="encoded" HeaderText="概要" />
      </Columns>

    </asp:DataGrid>
  </form>
</body>
</html>
ハイパーリンク列を表示するC#のサンプル・プログラム（linkdg.aspx）

　このサンプル・プログラムの実行結果は次のようになる。

サンプル・プログラム（linkdg.aspx）の実行結果

URLの書式を指定するには

　上記のサンプル・プログラムでは、ハイパーリンクのリンク先として連結するデータを単純なURLとしていた。しかし業務システムなどでは、グリッドでの表示項目に基づいたデータをクエリ文字列とした特定ページへのリンクが必要となることがよくある。つまり、URLが「result.aspx?target=123」といった形式で、「target=123」の「123」の部分を行ごとに設定するような場合だ。

　このような書式を指定したURLを使用する場合には、DataNavigateUrlFormatString属性を指定する。この属性を加えた<asp:HyperLinkColumn>タグの記述例は次のようになる。

  <asp:HyperLinkColumn
      DataTextField="name"
      DataNavigateUrlField="id"
      DataNavigateUrlFormatString="result.aspx?target={0}"
      HeaderText="商品名" />

　DataNavigateUrlFormatString属性には、データ連結により置き換えられる部分を「{0}」により指定した文字列を、リンク先のURLとして記述する。このような場合、ハイパーリンクのURLはDataNavigateUrlField属性で指定した項目ではなく、その項目のデータで「{0}」の部分を置き換えたDataNavigateUrlFormatString属性の文字列となる。

　なお、テキストに対してもその書式を指定するためのDataTextFormatString属性が用意されている。End of Article

カテゴリ：Webフォーム　処理対象：DataGridコントロール
使用ライブラリ：DataGridコントロール（System.Web.UI.WebControls名前空間）
使用ライブラリ：HyperLinkColumnクラス（System.Web.UI.WebControls名前空間）
関連TIPS：［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］DataGridコントロールのハイパーリンク列で複数のパラメータをデータ連結するには？
［ASP.NET］DataGridコントロールで特定のカラムのみを表示するには？
［ASP.NET］DataGridコントロールの行にデータを埋め込むには？
［ASP.NET］DataGridコントロールの行に通し番号を付けるには？
［ASP.NET］DataGridコントロールにソート機能を追加するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT