ASP.NET Tutorial/Data Binding/Repeater
Содержание
- 1 Automatically displays all the pictures in a folder named Photos
- 2 Declarative databinding is used to bind the Repeater to the SqlDataSource
- 3 Displaying a tab strip with the Repeater control.
- 4 Displaying Data with the Repeater Control
- 5 Handling Repeater Control Events
- 6 Using Templates with the Repeater Control
Automatically displays all the pictures in a folder named Photos
<%@ Page Language="C#" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
void Page_Load()
{
if (!Page.IsPostBack)
{
Repeater1.DataSource = GetPhotos();
Repeater1.DataBind();
}
}
public List<String> GetPhotos()
{
List<string> photos = new List<string>();
string photoPath = MapPath("~/Photos");
string[] files = Directory.GetFiles(photoPath);
foreach (string photo in files)
photos.Add("~/Photos/" + Path.GetFileName(photo));
return photos;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Show Photos</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater
id="Repeater1"
runat="server">
<ItemTemplate>
<asp:Image
id="Image1"
Width="200px"
ImageUrl="<%# Container.DataItem %>"
Runat="server" />
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Declarative databinding is used to bind the Repeater to the SqlDataSource
<%@ Page Language="C#" %>
<%@ Import Namespace="System.IO" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
void Page_Load()
{
if (!Page.IsPostBack)
{
DirectoryInfo dir = new DirectoryInfo(MapPath("~/Photos"));
rptPhotos.DataSource = dir.GetFiles("*.jpg");
rptPhotos.DataBind();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<script type="text/javascript">
var photos = new Array();
window.setInterval(showImage, 5000);
function showImage()
{
if (photos.length > 0)
{
var index = Math.floor(Math.random() * photos.length);
var image = document.getElementById("imgPhoto");
image.src = photos[index];
if (image.filters)
{
image.filters[0].Apply();
image.filters[0].Play();
}
}
}
</script>
<title>Show Repeater Photos</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="imgPhoto" alt="" class="photo" />
<script type="text/javascript">
<asp:Repeater
id="rptPhotos"
Runat="server">
<ItemTemplate>
<%# Eval("Name", "photos.push("Photos/{0} ")") %>
</ItemTemplate>
</asp:Repeater>
showImage();
</script>
</div>
</form>
</body>
</html>
File: Web.config
<configuration>
<connectionStrings>
<add name="Products"
connectionString="Data Source=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|MyDatabase.mdf;Integrated Security=True;User Instance=True" />
</connectionStrings>
</configuration>
Displaying a tab strip with the Repeater control.
File: ShowSeparatorTemplate.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
html
{
background-color:silver;
}
.content
{
width:600px;
height:400px;
padding:10px;
border:solid 1px black;
background-color:white;
}
a
{
color:blue;
}
</style>
<title>Show SeparatorTemplate</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:Repeater
id="rptProductCategories"
DataSourceID="srcProductCategories"
Runat="server">
<ItemTemplate>
<asp:HyperLink
id="lnkMenu"
Text="<%#Eval("Name")%>"
NavigateUrl="<%#Eval("Id","ShowSeparatorTemplate.aspx?id={0} ")%>"
Runat="server" />
</ItemTemplate>
<SeparatorTemplate>
|
</SeparatorTemplate>
</asp:Repeater>
<asp:Repeater
id="rptProducts"
DataSourceID="srcProducts"
Runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li><%#Eval("Title")%></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource
id="srcProductCategories"
ConnectionString="<%$ ConnectionStrings:Products %>"
SelectCommand="SELECT Id, Name
FROM ProductCategories"
Runat="server" />
<asp:SqlDataSource
id="srcProducts"
ConnectionString="<%$ ConnectionStrings:Products %>"
SelectCommand="SELECT Title FROM Products
WHERE CategoryId=@CategoryId"
Runat="server">
<SelectParameters>
<asp:QueryStringParameter
Name="CategoryId"
QueryStringField="Id" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Displaying Data with the Repeater Control
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<form id="form1" runat="server">
<div class="content">
<asp:Repeater
id="rptProducts"
DataSourceID="srcProducts"
Runat="server">
<ItemTemplate>
<div class="products">
<h1><%#Eval("Title") %></h1>
<b>Directed by:</b> <%# Eval("Director") %>
<br />
<b>Box Office Totals:</b> <%# Eval("Totals","{0:c} ") %>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource
id="srcProducts"
ConnectionString="<%$ ConnectionStrings:Products %>"
SelectCommand="SELECT Title,Director,Totals
FROM Products"
Runat="server" />
</div>
</form>
</body>
</html>
File: Web.config
<configuration>
<connectionStrings>
<add name="Products"
connectionString="Data Source=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|MyDatabase.mdf;Integrated Security=True;User Instance=True" />
</connectionStrings>
</configuration>
Handling Repeater Control Events
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
string DataKeyName = "Id";
Hashtable Keys
{
get
{
if (ViewState["Keys"] == null)
ViewState["Keys"] = new Hashtable();
return (Hashtable)ViewState["Keys"];
}
}
protected void rptProducts_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
ListItemType.AlternatingItem)
{
Keys.Add(e.Item.ItemIndex, DataBinder.Eval(e.Item.DataItem, "Id"));
}
}
protected void rptProducts_DataBinding(object sender, EventArgs e)
{
Keys.Clear();
}
protected void rptProducts_ItemCommand(object source, RepeaterCommandEventArgs e)
{
switch (e.rumandName)
{
case "Update":
UpdateProduct(e);
break;
case "Insert":
InsertProduct(e);
break;
case "Delete":
DeleteProduct(e);
break;
}
}
void UpdateProduct(RepeaterCommandEventArgs e)
{
TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle");
TextBox txtDirector = (TextBox)e.Item.FindControl("txtDirector");
CheckBox chkInStock = (CheckBox)e.Item.FindControl("chkInStock");
srcProducts.UpdateParameters["Id"].DefaultValue = Keys[e.Item.ItemIndex].ToString();
srcProducts.UpdateParameters["Title"].DefaultValue = txtTitle.Text;
srcProducts.UpdateParameters["Director"].DefaultValue = txtDirector.Text;
srcProducts.UpdateParameters["InStock"].DefaultValue = chkInStock.Checked.ToString();
srcProducts.Update();
}
void InsertProduct(RepeaterCommandEventArgs e)
{
TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle");
TextBox txtDirector = (TextBox)e.Item.FindControl("txtDirector");
CheckBox chkInStock = (CheckBox)e.Item.FindControl("chkInStock");
srcProducts.InsertParameters["Title"].DefaultValue = txtTitle.Text;
srcProducts.InsertParameters["Director"].DefaultValue = txtDirector.Text;
srcProducts.InsertParameters["InStock"].DefaultValue = chkInStock.Checked.ToString();
srcProducts.Insert();
}
void DeleteProduct(RepeaterCommandEventArgs e)
{
srcProducts.DeleteParameters["Id"].DefaultValue = Keys[e.Item.ItemIndex].ToString();
srcProducts.Delete();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<form id="form1" runat="server">
<div class="content">
<asp:Repeater
id="rptProducts"
DataSourceID="srcProducts"
Runat="server" OnItemCommand="rptProducts_ItemCommand" OnItemDataBound=
"rptProducts_ItemDataBound" OnDataBinding="rptProducts_DataBinding">
<HeaderTemplate>
<table class="products">
<tr>
<td>Title</td>
<td>Director</td>
<td>In Theaters</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:TextBox
id="txtTitle"
Text="<%#Eval("Title")%>"
Runat="server" />
</td>
<td>
<asp:TextBox
id="txtDirector"
Text="<%#Eval("Director")%>"
Runat="server" />
</td>
<td>
<asp:CheckBox
id="chkInStock"
Checked="<%#Eval("InStock")%>"
Runat="server" />
</td>
<td>
<asp:LinkButton
id="lnkUpdate"
CommandName="Update"
Text="Update"
Runat="server" />
|
<asp:LinkButton
id="lnkDelete"
CommandName="Delete"
Text="Delete"
OnClientClick="return confirm("Are you sure?");"
Runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tr>
<td>
<asp:TextBox
id="txtTitle"
Runat="server" />
</td>
<td>
<asp:TextBox
id="txtDirector"
Runat="server" />
</td>
<td>
<asp:CheckBox
id="chkInStock"
Runat="server" />
</td>
<td>
<asp:LinkButton
id="lnkInsert"
CommandName="Insert"
Text="Insert"
Runat="server" />
</td>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource
id="srcProducts"
ConnectionString="<%$ ConnectionStrings:Products %>"
SelectCommand="SELECT Id,Title,Director,InStock
FROM Products"
UpdateCommand="UPDATE Products SET Title=@Title,
Director=@Director,InStock=@InStock
WHERE Id=@Id"
InsertCommand="INSERT Products (Title,Director,InStock)
VALUES (@Title,@Director,
DeleteCommand="DELETE Products WHERE Id=@Id"
Runat="server">
<UpdateParameters>
<asp:Parameter Name="Id" />
<asp:Parameter Name="Title" />
<asp:Parameter Name="Director" />
<asp:Parameter Name="InStock" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Title" />
<asp:Parameter Name="Director" />
<asp:Parameter Name="InStock" />
</InsertParameters>
<DeleteParameters>
<asp:Parameter Name="Id" />
</DeleteParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
File: Web.config
<configuration>
<connectionStrings>
<add name="Products"
connectionString="Data Source=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|MyDatabase.mdf;Integrated Security=True;User Instance=True" />
</connectionStrings>
</configuration>
Using Templates with the Repeater Control
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
.content
{
width:600px;
border:solid 1px black;
background-color:white;
}
.products
{
border-collapse:collapse;
}
.products th,.products td
{
padding:10px;
border-bottom:1px solid black;
}
.alternating
{
background-color:#eeeeee;
}
</style>
<title>Show Repeater Table</title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:Repeater
id="rptProducts"
DataSourceID="srcProducts"
Runat="server">
<HeaderTemplate>
<table class="products">
<tr>
<td>Product Title</td>
<td>Product Director</td>
<td>Box Office Totals</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("Title") %></td>
<td><%#Eval("Director") %></td>
<td><%#Eval("Totals","{0:c} ") %></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr class="alternating">
<td><%#Eval("Title") %></td>
<td><%#Eval("Director") %></td>
<td><%#Eval("Totals","{0:c} ") %></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource
id="srcProducts"
ConnectionString="<%$ ConnectionStrings:Products %>"
SelectCommand="SELECT Title,Director,Totals
FROM Products"
Runat="server" />
</div>
</form>
</body>
</html>
File: Web.config
<configuration>
<connectionStrings>
<add name="Products"
connectionString="Data Source=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|MyDatabase.mdf;Integrated Security=True;User Instance=True" />
</connectionStrings>
</configuration>