目次

HyperLinkコントロールを動的に作成する - ASP.NET

HyperLinkコントロールを動的に作成するコードを紹介します。

概要

こちらの記事では、Webフォームに配置したHyperLinkコントロールのリンク文字列やリンク先URLを動的に変更するコードを紹介しました。しかし、HyperLinkコントロールの個数や位置が変わる場合はあらかじめHyperLinkコントロールをWebフォームに配置できません。この記事では、動的にHyperLinkコントロールを作成するコードを紹介します。

プログラム

UI

下図のUIを作成します。見出しとPlaceHolderを3つ配置します。


aspxファイルのXMLは以下になります。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicLink.aspx.cs" Inherits="HyperLinkDemo.DynamicLink" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div>セクション1</div>
      <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    <div>セクション2</div>
      <asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
    <div>セクション3</div>
      <asp:PlaceHolder ID="PlaceHolder3" runat="server"></asp:PlaceHolder>
    </div>
    </form>
</body>
</html>

コード

Webフォームのロジック部に下記のコードを記述します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace HyperLinkDemo
{
  public partial class DynamicLink : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      string opt=Request.QueryString["option"];
      if (opt == "1") {
        HyperLink hLink = new HyperLink();
        hLink.Text = "iPentec";
        hLink.NavigateUrl = "http://www.ipentec.com";
        PlaceHolder1.Controls.Add(hLink);
      }
      else if (opt == "2") {
        HyperLink hLink = new HyperLink();
        hLink.Text = "Yahoo";
        hLink.NavigateUrl = "http://www.yahoo.co.jp";
        PlaceHolder2.Controls.Add(hLink);
      }
      else if (opt == "3") {
        HyperLink hLink = new HyperLink();
        hLink.Text = "Google";
        hLink.NavigateUrl = "http://www.google.co.jp";
        PlaceHolder3.Controls.Add(hLink);
      }
    }
  }
}

解説

URLのオプションの値によりリンクの表示位置が動的に変わる例です。optionパラメータの値が"1"の場合はセクション1に、"2"の場合はセクション2に"3"の場合はセクション3にHyperLinkコントロールを表示します。
同様の処理で動的にリンクの個数が変化する動作も実装できます。

実行結果

プロジェクトを実行します。
実行直後は下図の画面が表示されます。画面にリンクはありません。


URLの末尾に"?option=1"を追加してアクセスします。セクション1に"http://www.ipentec.com"へのリンクが表示されます。


"?option=2"に変更してアクセスします。セクション2に"http://www.yahoo.co.jp"へのリンクが表示されます。


"?option=3"に変更すると、セクション3に"http://www.google.co.jp"へのリンクが表示されます。


動的にリンクの表示場所を変更できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-06
作成日: 2015-04-20
iPentec all rights reserverd.