サーチ…
構文
- <asp:TextBox runat = "server" ID = "" TextMode = "" Text = "" />
- <asp:Repeater runat = "server" ID = "" OnItemDataBound = "">
<HeaderTemplate></HeaderTemplate>
<ItemTemplate></ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:Repeater>
備考
すべてのASP.Net WebFormコントロールでは、CodeBehindと通信するためにrunat="server"
が必要です。
リピータを使用してHTMLテーブルを作成する
リピーターがバインドされると、データ内の各項目に対して新しい表の行が追加されます。
<asp:Repeater ID="repeaterID" runat="server" OnItemDataBound="repeaterID_ItemDataBound">
<HeaderTemplate>
<table>
<thead>
<tr>
<th style="width: 10%">Column 1 Header</th>
<th style="width: 30%">Column 2 Header</th>
<th style="width: 30%">Column 3 Header</th>
<th style="width: 30%">Column 4 Header</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr runat="server" id="rowID">
<td>
<asp:Label runat="server" ID="mylabel">You can add ASP labels if you want</asp:Label>
</td>
<td>
<label>Or you can add HTML labels.</label>
</td>
<td>
You can also just type plain text like this.
</td>
<td>
<button type="button">You can even add a button to the table if you want!</button>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
ItemDataBound
メソッドはオプションですが、より複雑なデータの書式設定やItemDataBound
役立ちます。この例では、このメソッドは各<tr>
に一意のIDを動的に与えるために使用されます。このIDは、特定の行にアクセスまたは変更するためにJavaScriptで使用できます。 tr
はPostBackに動的ID値を保持しないことに注意してください。このメソッドでは、各行の<asp:Label>
のテキストも設定されていました。
protected void repeaterID_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
MyItem item = (MyItem)e.Item.DataItem;
var row = e.Item.FindControl("rowID");
row.ClientIDMode = ClientIDMode.Static;
row.ID = "rowID" + item.ID;
Label mylabel = (Label)e.Item.FindControl("mylabel");
mylabel.Text = "The item ID is: " + item.ID;
}
}
CodeBehindとの多くのコミュニケーションを計画している場合は、GridViewの使用を検討することをお勧めします。しかし、リピータは一般にGridViewよりもオーバーヘッドが少なく、基本的なID操作ではGridViewと同じ機能を実行できます。
リストビューでのグループ化
asp:ListView
ASP.NET WebForms Framework 3.5で導入されたasp:ListView
は、フレームワーク内のすべてのDataPresentationコントロールの中で最も柔軟性があります。 ListViewを使用したグループ化の例(これは画像ギャラリーとして便利です)
目的 : asp:ListView
を使用して3つのイメージを連続して表示する
マークアップ
<asp:ListView ID="SportsImageList" runat="server"
GroupItemCount="3">
<LayoutTemplate>
<span class="images-list">
<ul id="groupPlaceholder" runat="server"></ul>
</span>
</LayoutTemplate>
<GroupTemplate>
<ul>
<li id="itemPlaceholder" runat="server"></li>
</ul>
</GroupTemplate>
<ItemTemplate>
<li>
<img src='<%# Container.DataItem %>' />
</li>
</ItemTemplate>
</asp:ListView>
コードの背後
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
SportsImageList.DataSource = GetImages();
SportsImageList.DataBind();
}
}
private static IEnumerable<string> GetImages()
{
var images = Enumerable.Range(1, 9) //get numbers 1 to 9
.Select(i =>
string.Format("http://lorempixel.com/100/100/sports/{0}/", i)
); //convert the numbers to string
return images;
}
CSS
.images-list ul{
clear: both;
list-style-type: none;
}
.images-list ul li{
float: left;
padding: 5px;
}
レンダリングされた出力
例
<script language="VB" runat="server">
Sub SubmitBtn_Click(sender As Object, e As EventArgs)
Label1.Text = "Text1.Text = " & Text1.Text
End Sub
</script>
<h3><font face="Verdana">TextBox Sample</font></h3>
<form runat="server">
<asp:TextBox id="Text1" Text="Copy this text to the label" Width="200px" runat="server"/>
<asp:Button OnClick="SubmitBtn_Click" Text="Copy Text to Label" Runat="server"/>
<p>
<asp:Label id="Label1" Text="Label1" runat="server"/>
</form>
ハイパーリンク
HyperLinkコントロールは、クライアントから別のページにナビゲートするために使用されます。
<html>
<script language="VB" runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
' Set hyperlink to "~", which indicates application root.
HyperLink1.NavigateUrl = "~"
End Sub
</script>
<body>
<h3><font face="Verdana">Simple asp:hyperlink Sample</font></h3>
<form runat=server>
<p>
<asp:hyperlink id=HyperLink1 runat="server">
Go To QuickStart
</asp:hyperlink>
</form>
</body>
</html>
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow