ASP.NET　HTMLタグを動的に生成する方法がわからない

実現したいこと

ASP.NET で以下のようにボタンを表示したいんですが、うまくいきません。
何が間違っているのかご教授して頂きたいです。（ASP.NETは少しかじった程度のレベルです。）

・ボタンを指定した個数表示する（例：５個）
・表示するボタン数は可変なので、ASP.NET側で実装ではなく、C#側で作成する。（ループさせる？）

ソースコード

※実装①（試しにASP.NET側で表示する個数分、タグを書いてみた）

・CSSコード

.box1 {
    width: 150px;
    height: 50px;
    background: blue;
    border-radius: 30px;
    margin-left: 10px;
    margin-top: 20px;
    font-size: 13px;
    text-align: center;
}

.msg1 {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

・ASP.NETコード

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!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>Sample</title>
    <link rel="stylesheet" type="text/css" href="./StyleSheet.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
                <asp:Button ID="button1" class="box1" runat="server" Text="テスト００１" OnClick="btn1_Click" />
                <asp:Button ID="button2" class="box1" runat="server" Text="テスト００２" OnClick="btn1_Click" />
                <asp:Button ID="button3" class="box1" runat="server" Text="テスト００３" OnClick="btn1_Click" />
                <asp:Button ID="button4" class="box1" runat="server" Text="テスト００４" OnClick="btn1_Click" />
                <asp:Button ID="button5" class="box1" runat="server" Text="テスト００５" OnClick="btn1_Click" />
            </div>
        </div>
    </form>
</body>
</html>

・C#コード（特に実装するものがないため枠だけ）

using System;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) { }

        protected void btn1_Click(object sender, EventArgs e) { }
    }
}

※実装②

・CSSコードは、実装①と同じ

・ASP.NETコード

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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>Sample</title>
    <link rel="stylesheet" type="text/css" href="./StyleSheet.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="button0" class="box1" runat="server"></div>
        </div>
    </form>
</body>
</html>

・C#コード

using System;
using System.Text;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            StringBuilder sb = new StringBuilder();

            const string TAG_FORMAT = "<asp:Button ID=\"button1\" class=\"box1\" runat=\"server\" Text=\"{0}\" OnClick=\"btn1_Click\" />";

            for (int i=0; i<5; i++)
            {
                string moji = "テスト" + i.ToString();

                sb.AppendLine("<div>");
                sb.AppendLine(string.Format(TAG_FORMAT, moji));
                sb.AppendLine("</div>");
            }

            button0.InnerHtml = sb.ToString();
        }

        protected void btn1_Click(object sender, EventArgs e) { }
    }
}

実行結果
・ボタンが５個表示されない。
・ボタンの文字が表示されない。

Web画面を右クリックして、ソースを確認したら、タグは５個生成されていました。(見にくくてすみません。)

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
	Sample
</title><link rel="stylesheet" type="text/css" href="./StyleSheet.css" /></head>
<body>
    <form method="post" action="./WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="maC+FZCBHKxCcRCjWnjUwCW+n3XoHPbAYmTG0d5g7lFv6f1Yd+C1vMo5/9fNer8LVnQdWFTWi/sGfVEX9aJ3ud1cXA16n/LX2YNPyBJ00V9q/SOmac3+gclbYVisivkDY5+1Dvj16nr63l2sUmGvCwVyIoyvbTsVStqJRzBxJ7/wrCdd2ySUdjQ7CB+tw2SEKX6x/xgOwlvdr7f1AZucoBdsvf827tYhknE8Slr2lWeY5cRzkj0oHyIpgmVZyUMRtbXSjuTcBAVdVwbb/gIag86epeOP/p3ASQmR+t5f5cSL44fjroe+PhTLqH1XIpUoQ7Pkk88FkbSTpxpBE9CY7NNBk2IomDTvWW8Y+sNZE6I0q1948tIoqEFUlArR4+eBvz7AWNsGnc/xUW73FpmT9MKV4rQ5QnvNm5SFwXSENNM7zeY2q8HXSLGk1RCqTr3B34tR5JSDR5nJeQNwkZ0uyoApbVVxO5JcuQ/H6MLmJvvd+3WGO3CimET2mx+jChaYMVXILW0WsR5MIHNQxjR+uK76kFMkgiLl/loLZn0WSfoenR80fXD6oW1JolnhzS4YRw+GHiNAya/DMCATlDKoHm5fQH6pbC4tRZJhfuOWkCrC6HF47a76kV1BtSUSSeo16fYKSGwYpDywiu2gLGxwbRa+bJltMq6fo9NIH2tuRoRdAJgJUm5LQb3z1rAvrbkkXC8nStBRGQDJazeHzkbfSqVcy5fdHUYSLvM01QKt+eP/Zk1jWNXkBz56M6jnE7CYJZCuYKAfEdr6BNtiZoZsuTE9n+xkA0HRHqU6RPc8JVbo12DcV+keLDM3xswsVA2S/RgSygqePJ+pn9meItrUpo4LVzlA6mKjhKGHjMSYvio=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="B6E7D48B" />
</div>
        <div>
            <div id="button0" class="box1"><div>
<asp:Button ID="button1" class="box1" runat="server" Text="テスト0" OnClick="btn1_Click" />
</div>
<div>
<asp:Button ID="button1" class="box1" runat="server" Text="テスト1" OnClick="btn1_Click" />
</div>
<div>
<asp:Button ID="button1" class="box1" runat="server" Text="テスト2" OnClick="btn1_Click" />
</div>
<div>
<asp:Button ID="button1" class="box1" runat="server" Text="テスト3" OnClick="btn1_Click" />
</div>
<div>
<asp:Button ID="button1" class="box1" runat="server" Text="テスト4" OnClick="btn1_Click" />
</div>
</div>
        </div>
    </form>
</body>
</html>

C#側でタグを動的に生成する方法がよくわかりません。タグの自動生成する方法が他にあるのでしょうか？
ASP.NETかC#で実装する方法を教えていただきたいです。（JavaScriptでも可能だとネットで見ましたが、今回は無し）

また、
このサイトに書かれているような方法も見つけたのですが、このやり方以外で実装方法はありますか？
https://www.ipentec.com/document/csharp-asp-net-create-simple-dynamic-control

補足情報

・Visual Stadio 2019 (ASP.NET Webアプリケーション　.NET Framework)
・.NET Framework 4.7
・Windows10

退会済みユーザー

2023/06/02 21:31

開発環境を質問欄を編集して追記してください。（例: Windows 10 の Visual Studio 2022 で ASP.NET Web Forms アプリをターゲットフレームワーク .NET Framework 4.8 で作っています・・・とか）

退会済みユーザー

2023/06/03 00:08

ASP.NET Web API は関係ないのでタグを外してください。

行動規範の内容に同意します

回答1件

ベストアンサー

ASP.NET　HTMLタグを動的に生成する方法がわからない

生成するのは静的な html タグではなくてサーバーコントロールですよね。Button コントロールであれば、ブラウザに表示されたボタンをクリックするとポストバックがかかり、サーバー側の C# のコードで Click イベントが発生するものだと理解して回答します。

以下は ASP.NET Web Forms アプリのページに動的にコントロールを生成して追加する基本です。

(1) 動的にコントロールを追加したいページ上の場所に PlaceHolder をツールボックスからドラッグ＆ドロップする。

PlaceHolder クラス
https://docs.microsoft.com/ja-jp/dotnet/api/system.web.ui.webcontrols.placeholder?view=netframework-4.8

(2) コントロールの動的作成のタイミングとして Microsoft が推奨しているのは Page.Init イベントです。

特に、静的に配置したコントロールと同じ動きを期待するなら Page.Init イベントを使います。Page.Load イベントでは遅すぎます。(LoadViewState メソッド ⇒ LoadPostData メソッドのタイミングの問題)

なので、コードビハインドのコード内に Page_Init メソッド（Init イベントのハンドラ）を追加し、そこで必要なコントロールを生成し、ID, Text などのプロパティの設定、Click イベントのハンドラの設定などを行ってから、PlaceHolder に追加します。

なお、動的に追加したコントロールはポストバック時にも必ず再度上記の通り追加する必要があります。そうしないと、ポストバックされた後の応答では消えてしまいます。

質問に書いてあった Button コントロールの動的な追加は、上記 (1), (2) の要領に従って以下のようにしてできます。

.aspx.cs

C#
1using System;
2using System.Web.UI.WebControls;
3
4namespace WebForms1
5{
6    public partial class WebForm25 : System.Web.UI.Page
7    {
8        protected void Page_Init(object sender, EventArgs e)
9        {
10            for (int i = 0; i < 5; i++)
11            {
12                var button = new Button();
13                button.ID = "button" + (i + 1);
14                button.CssClass = "box1";
15                button.Text = "テスト00" + (i + 1);
16                button.Click += Button_Click;
17                PlaceHolder1.Controls.Add(button);
18            }
19        }
20
21        private void Button_Click(object sender, EventArgs e)
22        {
23            
24        }
25
26        protected void Page_Load(object sender, EventArgs e)
27        {
28        }
29    }
30}

.aspx

html
1<%@ Page Language="C#" AutoEventWireup="true"
2    CodeBehind="WebForm25.aspx.cs" Inherits="WebForms1.WebForm25" %>
3
4<!DOCTYPE html>
5
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head runat="server">
8    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9    <title></title>
10    <style type="text/css">
11        .box1 {
12            width: 150px;
13            height: 50px;
14            background: blue;
15            border-radius: 30px;
16            margin-left: 10px;
17            margin-top: 20px;
18            font-size: 13px;
19            text-align: center;
20        }
21    </style>
22</head>
23<body>
24    <form id="form1" runat="server">
25        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
26    </form>
27</body>
28</html>