ASP.NET Tutorial/Data Binding/ListView
Содержание
- 1 Creating a Custom User Interface for Paging
- 2 Displaying a photo gallery with a ListView control.
- 3 Editing Database Data
- 4 Inserting new records with the ListView control.
- 5 Selecting a Row
- 6 Sorting data with the ListView control.
- 7 Use a ListView control to render an HTML table.
- 8 Using a DataPager control with the ListView control.
- 9 Using the LayoutTemplate and ItemTemplate
Creating a Custom User Interface for Paging
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void pg_PagerCommand(object sender, DataPagerCommandEventArgs e)
{
e.NewMaximumRows = e.Item.Pager.MaximumRows;
switch (e.rumandName)
{
case "Previous":
if (e.Item.Pager.StartRowIndex > 0)
e.NewStartRowIndex = e.Item.Pager.StartRowIndex - 2;
break;
case "Next":
e.NewStartRowIndex = e.Item.Pager.StartRowIndex + 2;
break;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>DataPager Template</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView
ID="lstProducts"
DataSourceId="srcProducts"
runat="server">
<LayoutTemplate>
<ul>
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</ul>
<asp:DataPager
id="pg"
PageSize="2"
Runat="server">
<Fields>
<asp:TemplatePagerField
OnPagerCommand="pg_PagerCommand">
<PagerTemplate>
<asp:LinkButton
id="lnkPrevious"
Text="Previous"
CommandName="Previous"
Runat="server" />
<asp:LinkButton
id="lnkNext"
Text="Next"
CommandName="Next"
Runat="server" />
</PagerTemplate>
</asp:TemplatePagerField>
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<li>
<%# Eval("Title") %>
</li>
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource
id="srcProducts"
SelectCommand="SELECT Id, Title, Director FROM Product"
ConnectionString="<%$ ConnectionStrings: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>
Displaying a photo gallery with a ListView control.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
void Page_Load()
{
List<string> photos = new List<string>();
photos.Add( "~/Images/A.jpg" );
photos.Add( "~/Images/B.jpg" );
photos.Add( "~/Images/C.jpg" );
photos.Add( "~/Images/D.jpg" );
photos.Add( "~/Images/E.jpg" );
photos.Add( "~/Images/F.jpg" );
photos.Add( "~/Images/G.jpg" );
lstPhotos.DataSource = photos;
lstPhotos.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Photo Gallery</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView
ID="lstPhotos"
GroupItemCount="3"
runat="server">
<LayoutTemplate>
<asp:Placeholder
id="groupPlaceholder"
runat="server" />
</LayoutTemplate>
<GroupTemplate>
<div>
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</div>
</GroupTemplate>
<ItemTemplate>
<asp:Image
id="imgPhoto"
ImageUrl="<%# Container.DataItem %>"
Width="200px"
Runat="server" />
</ItemTemplate>
</asp:ListView>
</div>
</form>
</body>
</html>
Editing Database Data
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.product
{
border: solid 1px black;
padding:5px;
margin:3px;
}
.edit
{
background-color:lightyellow;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Edit ListView</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView
ID="lstProducts"
DataSourceId="srcProducts"
DataKeyNames="Id"
runat="server">
<LayoutTemplate>
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</LayoutTemplate>
<ItemTemplate>
<div class="product">
<strong><%# Eval("Title") %></strong>
<br />
<em>Directed by <%# Eval("Director") %></em>
<br />
<asp:LinkButton
id="lnkEdit"
Text="{Edit}"
CommandName="Edit"
Runat="server" />
<asp:LinkButton
id="lnkDelete"
Text="{Delete}"
CommandName="Delete"
OnClientClick="return confirm("Delete this product?")"
Runat="server" />
</div>
</ItemTemplate>
<EditItemTemplate>
<div class="product edit">
<asp:Label
id="lblTitle"
Text="Title:"
AssociatedControlID="txtTitle"
Runat="server" />
<br />
<asp:TextBox
id="txtTitle"
Text="<%# Bind("Title") %>"
Runat="server" />
<br /><br />
<asp:Label
id="lblDirector"
Text="Director:"
AssociatedControlID="txtDirector"
Runat="server" />
<br />
<asp:TextBox
id="txtDirector"
Text="<%# Bind("Director") %>"
Runat="server" />
<br /><br />
<asp:LinkButton
id="lnkUpdate"
Text="Save"
CommandName="Update"
Runat="server" />
<asp:LinkButton
id="lnkCancel"
Text="Cancel"
CommandName="Cancel"
Runat="server" />
</div>
</EditItemTemplate>
</asp:ListView>
<asp:SqlDataSource
id="srcProducts"
SelectCommand="SELECT Id, Title, Director FROM Product"
UpdateCommand="Update Product SET Title=@Title, Director=@Director
WHERE Id=@Id"
DeleteCommand="Delete Product WHERE Id=@Id"
ConnectionString="<%$ ConnectionStrings:con %>"
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>
Inserting new records with the ListView control.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form id="form1" runat="server">
<div>
<asp:ListView
ID="lstFeedback"
DataSourceId="srcFeedback"
InsertItemPosition="FirstItem"
runat="server">
<LayoutTemplate>
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</LayoutTemplate>
<ItemTemplate>
<div class="comment">
<%# Eval("Comment") %>
</div>
</ItemTemplate>
<InsertItemTemplate>
<div>
Please enter any comments
about our website here:
<br />
<asp:Label
id="lblComments"
Text="Comments:"
AssociatedControlID="txtComment"
Runat="server" />
<br />
<asp:TextBox
id="txtComment"
Text="<%# Bind("Comment") %>"
TextMode="MultiLine"
Columns="40"
Rows="3"
Runat="server" />
<br />
<asp:Button
id="lnkInsert"
Text="Add Comment"
CommandName="Insert"
Runat="server" />
</div>
</InsertItemTemplate>
</asp:ListView>
<asp:SqlDataSource
id="srcFeedback"
SelectCommand="SELECT Id, Comment FROM Feedback"
InsertCommand="INSERT Feedback (Comment) VALUES (@Comment)"
ConnectionString="<%$ ConnectionStrings: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>
Selecting a Row
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Master/Detail</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView
ID="lstProductCategories"
DataSourceId="srcProductCategory"
DataKeyNames="Id"
runat="server">
<LayoutTemplate>
<div class="categoryContainer">
<asp:PlaceHolder
id="itemPlaceholder"
Runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div>
<asp:LinkButton
id="lnkSelect"
Text="<%# Eval("Name") %>"
CommandName="Select"
Runat="server" />
</div>
</ItemTemplate>
<SelectedItemTemplate>
<div id="selected">
<%# Eval("Name") %>
</div>
</SelectedItemTemplate>
</asp:ListView>
<br style="clear:both" /><br />
<asp:ListView
ID="lstProducts"
DataSourceId="srcProducts"
runat="server">
<LayoutTemplate>
<ol>
<asp:PlaceHolder
id="itemPlaceholder"
runat="server" />
</ol>
</LayoutTemplate>
<ItemTemplate>
<li><%# Eval("Title") %></li>
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource
id="srcProductCategory"
SelectCommand="SELECT Id, Name FROM ProductCategory"
ConnectionString="<%$ ConnectionStrings:con %>"
Runat="server" />
<asp:SqlDataSource
id="srcProducts"
SelectCommand="SELECT Title FROM Product
WHERE CategoryId=@CategoryId"
ConnectionString="<%$ ConnectionStrings:Products %>"
Runat="server">
<SelectParameters>
<asp:ControlParameter
Name="CategoryId"
ControlID="lstProductCategories" />
</SelectParameters>
</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>
Sorting data with the ListView control.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Sort ListView</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView
ID="lstProducts"
DataSourceId="srcProducts"
runat="server">
<LayoutTemplate>
<table>
<thead>
<tr>
<td>
<asp:LinkButton
id="lnkTitle"
Text="Title"
CommandName="Sort"
CommandArgument="Title"
Runat="server" />
</td>
<td>
<asp:LinkButton
id="LinkButton1"
Text="Director"
CommandName="Sort"
CommandArgument="Director"
Runat="server" />
</td>
</tr>
</thead>
<tbody>
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Title") %></td>
<td><%# Eval("Director") %></td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
No records found
</EmptyDataTemplate>
</asp:ListView>
<asp:SqlDataSource
id="srcProducts"
SelectCommand="SELECT Id, Title, Director FROM Product"
ConnectionString="<%$ ConnectionStrings: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>
Use a ListView control to render an HTML table.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Table ListView</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView
ID="lstProducts"
DataSourceId="srcProducts"
runat="server">
<LayoutTemplate>
<table>
<thead>
<tr>
<td>Title</td>
<td>Director</td>
</tr>
</thead>
<tbody>
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Title") %></td>
<td><%# Eval("Director") %></td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
No records found
</EmptyDataTemplate>
</asp:ListView>
<asp:SqlDataSource
id="srcProducts"
SelectCommand="SELECT Id, Title, Director FROM Product"
ConnectionString="<%$ ConnectionStrings: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>
Using a DataPager control with the ListView control.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>DataPager ListView</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView
ID="lstProducts"
DataSourceId="srcProducts"
runat="server">
<LayoutTemplate>
<ol>
<asp:PlaceHolder
id="itemPlaceholder"
runat="server" />
</ol>
<asp:DataPager
id="pg"
PageSize="2"
Runat="server">
<Fields>
<asp:NextPreviousPagerField
ShowFirstPageButton="true"
ShowPreviousPageButton="true"
ShowNextPageButton="false"
ShowLastPageButton="false" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField
ShowFirstPageButton="false"
ShowPreviousPageButton="false"
ShowNextPageButton="true"
ShowLastPageButton="true" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<li>
<%# Eval("Title") %>
</li>
</ItemTemplate>
</asp:ListView>
<asp:SqlDataSource
id="srcProducts"
SelectCommand="SELECT Id, Title, Director FROM Product"
ConnectionString="<%$ ConnectionStrings:con %>"
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>
Using the LayoutTemplate and ItemTemplate
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Simple ListView</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ListView
ID="lstProducts"
DataSourceId="srcProducts"
runat="server">
<LayoutTemplate>
<div style="border:dashed 1px black">
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div style="border:solid 1px black">
<%# Eval("Title") %>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div style="border:solid 1px black;background-color:Silver">
<%# Eval("Title") %>
</div>
</AlternatingItemTemplate>
<EmptyDataTemplate>
No records found
</EmptyDataTemplate>
</asp:ListView>
<asp:SqlDataSource
id="srcProducts"
SelectCommand="SELECT Id, Title, Director FROM Product"
ConnectionString="<%$ ConnectionStrings:Products %>"
Runat="server" />
</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>