ASP.NET Tutorial/Data Binding/ListView — различия между версиями

Текущая версия на 11:59, 26 мая 2010

Содержание

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>

ASP.NET Tutorial/Data Binding/ListView — различия между версиями

Текущая версия на 11:59, 26 мая 2010

Содержание

Creating a Custom User Interface for Paging

Displaying a photo gallery with a ListView control.

Editing Database Data

Inserting new records with the ListView control.

Selecting a Row

Sorting data with the ListView control.

Use a ListView control to render an HTML table.

Using a DataPager control with the ListView control.

Using the LayoutTemplate and ItemTemplate

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Инструменты

Навигация

Текущая версия на 11:59, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 11:59, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)