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
<source lang="csharp">
<%@ 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">
<asp:ListView ID="lstProducts" DataSourceId="srcProducts" runat="server"> <LayoutTemplate>
-
<asp:Placeholder
id="itemPlaceholder"
runat="server" />
<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>
</ItemTemplate> </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></source>
Displaying a photo gallery with a ListView control.
<source lang="csharp">
<%@ 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">
<asp:ListView ID="lstPhotos" GroupItemCount="3" runat="server"> <LayoutTemplate> <asp:Placeholder id="groupPlaceholder" runat="server" /> </LayoutTemplate> <GroupTemplate>
<asp:Placeholder id="itemPlaceholder" runat="server" />
</GroupTemplate> <ItemTemplate> <asp:Image id="imgPhoto" ImageUrl="<%# Container.DataItem %>" Width="200px" Runat="server" /> </ItemTemplate> </asp:ListView>
</form>
</body> </html></source>
Editing Database Data
<source lang="csharp">
<%@ 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">
<asp:ListView ID="lstProducts" DataSourceId="srcProducts" DataKeyNames="Id" runat="server"> <LayoutTemplate> <asp:Placeholder id="itemPlaceholder" runat="server" /> </LayoutTemplate> <ItemTemplate>
<%# Eval("Title") %>
Directed by <%# Eval("Director") %>
<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" />
</ItemTemplate> <EditItemTemplate>
<asp:Label id="lblTitle" Text="Title:" AssociatedControlID="txtTitle" Runat="server" />
<asp:TextBox id="txtTitle" Text="<%# Bind("Title") %>" Runat="server" />
<asp:Label id="lblDirector" Text="Director:" AssociatedControlID="txtDirector" Runat="server" />
<asp:TextBox id="txtDirector" Text="<%# Bind("Director") %>" Runat="server" />
<asp:LinkButton id="lnkUpdate" Text="Save" CommandName="Update" Runat="server" /> <asp:LinkButton id="lnkCancel" Text="Cancel" CommandName="Cancel" Runat="server" />
</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" />
</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></source>
Inserting new records with the ListView control.
<source lang="csharp">
<%@ 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">
<asp:ListView ID="lstFeedback" DataSourceId="srcFeedback" InsertItemPosition="FirstItem" runat="server"> <LayoutTemplate> <asp:Placeholder id="itemPlaceholder" runat="server" /> </LayoutTemplate> <ItemTemplate>
</ItemTemplate> <InsertItemTemplate>
Please enter any comments about our website here:
<asp:Label id="lblComments" Text="Comments:" AssociatedControlID="txtComment" Runat="server" />
<asp:TextBox id="txtComment" Text="<%# Bind("Comment") %>" TextMode="MultiLine" Columns="40" Rows="3" Runat="server" />
<asp:Button id="lnkInsert" Text="Add Comment" CommandName="Insert" Runat="server" />
</InsertItemTemplate> </asp:ListView> <asp:SqlDataSource id="srcFeedback" SelectCommand="SELECT Id, Comment FROM Feedback" InsertCommand="INSERT Feedback (Comment) VALUES (@Comment)" 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></source>
Selecting a Row
<source lang="csharp">
<%@ 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">
<asp:ListView ID="lstProductCategories" DataSourceId="srcProductCategory" DataKeyNames="Id" runat="server"> <LayoutTemplate>
<asp:PlaceHolder id="itemPlaceholder" Runat="server" />
</LayoutTemplate> <ItemTemplate>
<asp:LinkButton id="lnkSelect" Text="<%# Eval("Name") %>" CommandName="Select" Runat="server" />
</ItemTemplate> <SelectedItemTemplate>
<%# Eval("Name") %>
</SelectedItemTemplate> </asp:ListView>
<asp:ListView ID="lstProducts" DataSourceId="srcProducts" runat="server"> <LayoutTemplate>
-
<asp:PlaceHolder
id="itemPlaceholder"
runat="server" />
</LayoutTemplate> <ItemTemplate>
</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>
</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></source>
Sorting data with the ListView control.
<source lang="csharp">
<%@ 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">
<asp:ListView ID="lstProducts" DataSourceId="srcProducts" runat="server"> <LayoutTemplate>
<asp:LinkButton id="lnkTitle" Text="Title" CommandName="Sort" CommandArgument="Title" Runat="server" /> |
<asp:LinkButton id="LinkButton1" Text="Director" CommandName="Sort" CommandArgument="Director" Runat="server" /> |
</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" />
</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></source>
Use a ListView control to render an HTML table.
<source lang="csharp">
<%@ 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">
<asp:ListView ID="lstProducts" DataSourceId="srcProducts" runat="server"> <LayoutTemplate>
Title | Director |
</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" />
</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></source>
Using a DataPager control with the ListView control.
<source lang="csharp">
<%@ 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">
<asp:ListView ID="lstProducts" DataSourceId="srcProducts" runat="server"> <LayoutTemplate>
-
<asp:PlaceHolder
id="itemPlaceholder"
runat="server" />
<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>
</ItemTemplate> </asp:ListView> <asp:SqlDataSource id="srcProducts" SelectCommand="SELECT Id, Title, Director FROM Product" ConnectionString="<%$ ConnectionStrings:con %>" 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></source>
Using the LayoutTemplate and ItemTemplate
<source lang="csharp">
<%@ 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>
<asp:Placeholder id="itemPlaceholder" runat="server" />
</LayoutTemplate> <ItemTemplate>
<%# Eval("Title") %>
</ItemTemplate> <AlternatingItemTemplate>
<%# Eval("Title") %>
</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></source>