質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

1回答

2549閲覧

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

f_tonakai

総合スコア15

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2023/06/02 13:06

編集2023/06/03 03:41

実現したいこと

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

・ボタンを指定した個数表示する(例:5個)
・表示するボタン数は可変なので、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="テスト001" OnClick="btn1_Click" /> <asp:Button ID="button2" class="box1" runat="server" Text="テスト002" OnClick="btn1_Click" /> <asp:Button ID="button3" class="box1" runat="server" Text="テスト003" OnClick="btn1_Click" /> <asp:Button ID="button4" class="box1" runat="server" Text="テスト004" OnClick="btn1_Click" /> <asp:Button ID="button5" class="box1" runat="server" Text="テスト005" 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) { } } }

実行結果
・ボタンが5個表示されない。
・ボタンの文字が表示されない。
イメージ説明

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

<!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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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 は関係ないのでタグを外してください。
guest

回答1

0

ベストアンサー

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>

投稿2023/06/03 04:42

編集2023/06/03 06:20
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問