webdatalist.aspx

书籍教程 >> .Net教程 >> asp.net编程精彩百例

<%@ Register TagPrefix="Acme" Namespace="Acme" Assembly="QSTools" %>
<%@ Register TagPrefix="Acme" TagName="SourceRef" Src="/quickstart/aspplus/util/SrcRef.ascx"%>

<!-- #include virtual="/quickstart/aspplus/include/header.inc" -->

<h4>数据访问和自定义</h4>
<p>

<div class="indent" style="font-family:Verdana; font-size:8pt;">
    <b> <img align="middle" src="/quickstart/images/bullet.gif">&nbsp;&nbsp;</b><a class="toc2" href="#templates">模板控件介绍</a><br>
    <b> <img align="middle" src="/quickstart/images/bullet.gif">&nbsp;&nbsp;</b><a class="toc2" href="#postback">从模板处理回发</a><br>
    <b> <img align="middle" src="/quickstart/images/bullet.gif">&nbsp;&nbsp;</b><a class="toc2" href="#selectandedit">使用选择模板和编辑模板</a><br>
    <b> <img align="middle" src="/quickstart/images/bullet.gif">&nbsp;&nbsp;</b><a class="toc2" href="#finding">查找模板内的控件</a><br>
    <b> <img align="middle" src="/quickstart/images/bullet.gif">&nbsp;&nbsp;</b><a class="toc2" href="#summary">本节小结</a><p>
</div><p>
<hr>

<!--BEGIN SECTION--> <a name="templates"><span class="subhead">模板控件介绍</span>
<p>
虽然上一节中说明的 <b>DataGrid</b> 服务器控件对许多适于采用网格样式数据表示形式的 Web 应用程序方案很适合，但许多情况下，数据表示形式需要丰富得多。ASP.NET 提供两个控件 <b>DataList</b> 和 <b>Repeater</b>，这两个控件为呈现列表样式的数据提供了更大的灵活性。这些控件基于模板，因此没有自己的默认呈现形式。数据的呈现方式完全取决于控件模板的实现，而控件模板描述如何表示数据项。
<p>
与 <b>DataGrid</b> 控件一样，<b>DataList</b> 和 <b>Repeater</b> 也支持 <b>DataSource</b> 属性，该属性可设置为任何 <b>ICollection</b>、<b>IEnumerable</b> 或 <b>IListSource</b> 类型。此 <b>DataSource</b> 中的数据通过其 <b>DataBind</b> 方法绑定到控件。绑定了数据后，每个数据项的格式都由模板描述。
<p>
<b>ItemTemplate</b> 属性控制 DataSource 集合中每一项的呈现形式。在 <b>ItemTemplate</b> 内，可以定义任何任意表示代码（HTML 或其他）。使用 ASP.NET 数据绑定语法，可以将数据绑定中的值插入 <b>DataList</b> 或 <b>Repeater</b> 控件，如下例所示。
<p>

<div class="code"><pre>
&lt;ASP:Repeater id="MyRepeater" runat="server"&gt;

    &lt;ItemTemplate&gt;
        Hello &lt;%# DataBinder.Eval(Container.DataItem, "name") %&gt; !
    &lt;/ItemTemplate&gt;

&lt;/ASP:Repeater&gt;
</pre></div>

<p>
<b>Container</b> 表示直接层次结构中支持 <b>System.Web.UI.INamingContainer</b> 标记接口的第一个控件。本例中，<b>Container</b> 解析为 <b>System.Web.UI.WebControls.RepeaterItem</b> 类型的对象，而该类型具有 <b>DataItem</b> 属性。当 <b>Repeater</b> 在 DataSource 集合上迭代时，<b>DataItem</b> 随之包含该集合的当前项。例如，如果将数据源设置为 Employee 对象的 <b>ArrayList</b>，则 <b>DataItem</b> 是 Employees 类型。当绑定到 <b>DataView</b> 时，<b>DataItem</b> 是 <b>DataRowView</b> 类型。
<p>
下面的示例说明绑定到 <b>DataView</b>（从 SQL 查询返回的）的 <b>Repeater</b> 控件。还定义了 <b>HeaderTemplate</b> 和 <b>FooterTemplate</b>，它们分别在列表的开头和末尾呈现。
<p>

<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/datalist1.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist1.src"
  Icon="/quickstart/aspplus/images/datalist1.gif"
  Caption="C# DataList1.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/datalist1.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist1.src"
  Icon="/quickstart/aspplus/images/datalist1.gif"
  Caption="VB DataList1.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/datalist1.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist1.src"
  Icon="/quickstart/aspplus/images/datalist1.gif"
  Caption="JScript DataList1.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<p>
<b>Repeater</b> 控件只是在绑定数据上迭代，为 DataSource 集合中的每一项呈现一次 <b>ItemTemplate</b>。除了其模板中包含的元素外，它不呈现任何内容。<b>Repeater</b> 是一个通用用途的迭代程序，而 <b>DataList</b> 提供了一些控制列表布局的附加功能。与 <b>Repeater</b> 不同，<b>DataList</b> 呈现模板定义外的其他元素（如表行及包含样式属性的单元格和跨距），以启用这种更丰富的格式设置。例如，<b>DataList</b> 支持 <b>RepeatColumns</b> 和 <b>RepeatDirection</b> 属性，这两个属性指定数据是否应在多列中呈现，以及数据项的呈现方向（垂直方向或水平方向）。<b>DataList</b> 还支持样式属性，如下例所示。
<p>

<div class="code"><pre>
&lt;ASP:DataList runat="server" DataSource="&lt;%#MyData%&gt;"
    RepeatColumns="2"
    RepeatDirection="Horizontal"
    ItemStyle-Font-Size="10pt"
    ItemStyle-Font-Name="Verdana"
&gt;
    ...
&lt;/ASP:DataList&gt;
</pre></div>

<p>
<b>注意：</b>本节的其余部分集中描述 <b>DataList</b> 控件的许多功能。有关 <b>Repeater</b> 控件的更多信息，请参考本教程 <a href="webcontrolsref.aspx">Web 窗体控件引用</a>一节中的 <a href="/quickstart/aspplus/samples/webforms/ctrlref/webctrl/repeater/doc_repeater.aspx">Repeater</a> 主题。
<p>

下面的示例说明 <b>DataList</b> 控件的用法。注意上一示例中的数据项外观已更改，仅仅是通过更改控件的 <b>ItemTemplate</b> 属性的内容。<b>RepeatDirection</b> 和 <b>RepeatColumns</b> 属性确定 <b>ItemTemplates</b> 的布局。
<p>

<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/datalist2.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist2.src"
  Icon="/quickstart/aspplus/images/datalist2.gif"
  Caption="C# Datalist2.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/datalist2.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist2.src"
  Icon="/quickstart/aspplus/images/datalist2.gif"
  Caption="VB Datalist2.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/datalist2.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist2.src"
  Icon="/quickstart/aspplus/images/datalist2.gif"
  Caption="JScript Datalist2.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<p>
下面的示例通过再次更改 <b>ItemTemplate</b> 进一步说明模板的无限灵活性。这一次，<b>DataItem</b> 的一个值已替换为 <b>&lt;img&gt;</b> 标记的“src”属性。<b>DataBinder.Eval</b> 的 <i>格式</i> <b>String</b> 参数也已用于将查询字符串中的 <b>DataItem</b> 值替换为 URL。
<p>

<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/datalist3.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist3.src"
  Icon="/quickstart/aspplus/images/datalist3.gif"
  Caption="C# Datalist3.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/datalist3.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist3.src"
  Icon="/quickstart/aspplus/images/datalist3.gif"
  Caption="VB Datalist3.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/datalist3.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist3.src"
  Icon="/quickstart/aspplus/images/datalist3.gif"
  Caption="JScript Datalist3.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<!--BEGIN SECTION--> <br> <a name="postback"><br> <span class="subhead">从模板处理回发</span>
<p>
与 <b>DataGrid</b> 中一样，可以从 <b>DataList</b> 模板内激发传递到与 <b>DataList</b> 本身连接的事件处理程序的命令。例如，<b>ItemTemplate</b> 内的 <b>LinkButton</b> 可以激发 <b>Select</b> 命令。通过设置 <b>DataList</b> 的 <b>OnSelectedIndexChanged</b> 属性，可以调用事件处理程序响应此命令。下面的示例说明此过程。

<p>

<div class="code"><pre>
&lt;ASP:DataList id="MyDataList" OnSelectedIndexChanged="MyDataList_Select" runat="server"&gt;

    &lt;ItemTemplate&gt;

        &lt;asp:linkbutton CommandName="Select" runat="server"&gt;
            &lt;%# DataBinder.Eval(Container.DataItem, "title") %&gt;
        &lt;/asp:linkbutton&gt;

    &lt;/ItemTemplate&gt;

&lt;/ASP:DataList&gt;
</pre></div>

<p>
下面的示例说明此代码的运行。在 <code>MyDataList_Select</code> 事件处理程序中，用特定选定项的详细内容填充其他若干服务器控件。
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/datalist4.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist4.src"
  Icon="/quickstart/aspplus/images/datalist4.gif"
  Caption="C# Datalist4.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/datalist4.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist4.src"
  Icon="/quickstart/aspplus/images/datalist4.gif"
  Caption="VB Datalist4.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/datalist4.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/datalist4.src"
  Icon="/quickstart/aspplus/images/datalist4.gif"
  Caption="JScript Datalist4.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<p>
注意，虽然 <b>DataList</b> 识别少数特殊命令（如 <b>Select</b> 和 <b>Edit/Update/Cancel</b>），但是在模板内激发的命令字符串可以是任意字符串。对于所有命令都激发 <b>DataList</b> 的 <b>OnItemCommand</b>。如前例所示，可以将该事件与处理程序连接。下面的示例说明如何完成此操作。

<p><Acme:TabControl runat="server">
<Tab Name="C#">
&lt;script runat="server"&gt;

    protected void MyDataList_ItemCommand(Object sender, DataListCommandEventArgs e) {
        String command = e.CommandName;

        switch(command) {
          case "Discussions":
            ShowDiscussions((DataRowView)e.Item.DataItem);  break;
          case "Ratings":
            ShowRatings((DataRowView)e.Item.DataItem);  break;
        }
    }

&lt;/script&gt;

&lt;ASP:DataList id="MyDataList" OnItemCommand="MyDataList_ItemCommand" runat="server"&gt;

    &lt;ItemTemplate&gt;

        &lt;asp:linkbutton CommandName="Ratings" runat="server"&gt;
            View Ratings
        &lt;/asp:linkbutton&gt;
        |
        &lt;asp:linkbutton CommandName="Discuss" runat="server"&gt;
            View Discussions
        &lt;/asp:linkbutton&gt;

    &lt;/ItemTemplate&gt;

&lt;/ASP:DataList&gt;
</Tab>

<Tab Name="VB">
&lt;script runat="server"&gt;

    Protected Sub MyDataList_ItemCommand(Sender As Object, E As DataListCommandEventArgs)
        Dim Command As String = E.CommandName

        Select Case Command
            Case "Discuss"
                ShowDiscussions(E.Item.DataItem)
            Case "Ratings"
                ShowRatings(E.Item.DataItem)
        End Select
    End Sub

&lt;/script&gt;

&lt;ASP:DataList id="MyDataList" OnItemCommand="MyDataList_ItemCommand" runat="server"&gt;

    &lt;ItemTemplate&gt;

        &lt;asp:linkbutton CommandName="Ratings" runat="server"&gt;
            View Ratings
        &lt;/asp:linkbutton&gt;
        |
        &lt;asp:linkbutton CommandName="Discuss" runat="server"&gt;
            View Discussions
        &lt;/asp:linkbutton&gt;