aspxで<ul><li>タグを動的に生成したい

お世話になっています。

現在、以下環境下にてWebサイトの開発をしております。
・VisualStuido2015
・C#
・aspx　Webフォームを利用してWebサイトの開発
・FrameWork　ヴァージョン：4.5

今までは、データベースからデータを取得→検索結果を表示する際、
GridViewを使用してtableとして表示していましたが、
tableではなく ulとliタグを使用した出力結果にしないといけなくなりました。

ulとliをWebフォーム上に
動的に書く方法は何かありますでしょうか？
現状、tableの作成は、GridViewにDataTableｂのデータをBindして作成しています。

※現状出力されるタグと、要求事項を下記に追記しました。

現状：

<table> <tr> <td>メーカー1</td> <td>商品1</td> <td><a href="#" class="">商品リンク</a></td> </tr> <tr> <td>メーカー2</td> <td>商品2</td> <td><a href="#" class="">商品リンク</a></td> </tr> </table>

要求事項：
<ul >
<li>
<div class="value value--maker">メーカー1</div>
<div class="value value--type">商品1</div>
<div >
<a href="#" class="">商品リンク</a>
</div>
</li>
<li>
<div class="value value--maker">メーカー2</div>
<div class="value value--type">商品2</div>
<div >
<a href="#" class="">商品リンク</a>
</div>
</li>
</ul>

宜しくお願い致します。

退会済みユーザー

2020/10/19 01:59

.NET Framework のバージョンを書いてください。2.0, 3.5, 4, 4.5 以降で大きな違いがあります。具体的に、元のデーターベースのテーブルの構造・データと、それを ul と li タグを使ってどのように表示したいのかのサンプルを書いてください。質問欄を編集して追記してください。

退会済みユーザー

2020/10/19 02:25

Repeater か ListView を使うのは OK ですか？　ページングなどは必要ですか？

deranail

2020/10/19 02:47

ページングは必要ありません。 Repeater、ListViewもどちらも使うのは問題ないと思います。両コンポーネントを調べてみましたが、ページングが不要であればどちらが推奨とかありますでしょうか？ ListViewの方が今回の件だとコーディング量は少なそうですが。

退会済みユーザー

2020/10/19 02:54

> Repeater、ListViewもどちらも使うのは問題ないと思います。それも質問欄を編集して追記お願いします。 > ページングが不要であればどちらが推奨とかありますでしょうか？ ASP.NET 3.5 以降が使えるなら ListView がお勧めです。回答欄に案を書いておきます。

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

回答1件

ベストアンサー

ASP.NET 3.5 以降が使えるなら ListView を使うのがお勧めですので、以下にその場合のやり方を書いておきます。

SqlDataSource と ListView を使った例です。データベースは Microsoft のサンプルデータベース Northwind を使っています。

質問者さんの DB は不明ですが、LocalDB, Access, MySQL, Oracle などでも SqlDataSource は使えるので、とにかくまずは SqlDataSource + ListView で作ってみてください。カスタム化が必要ならそれを見てから考えることをお勧めします。

SqlDataSource と ListView をツールボックスからドラッグ＆ドロップしたら、まず SqlDataSource の設定を行ってください。それがないと Visual Studio のデザイナが動きませんので。

SqlDataSource の設定が完了したら、Visual Studio のデザイン場面で ListView タスクを開き、［データソースの選択］を設定してから［ListView の構成］ダイアログを開き［レイアウトの選択］に「箇条書き」を選択します。「箇条書き」は ul, li 要素での表示になります。