asp.net学习之Repeater控件

简介: 原文:asp.net学习之Repeater控件    Repeater控件和DataList控件,可以用来一次显示一组数据项。比如,可以用它们显示一个数据表中的所有行。     Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出格式。
原文: asp.net学习之Repeater控件

    Repeater控件和DataList控件,可以用来一次显示一组数据项。比如,可以用它们显示一个数据表中的所有行。
    Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出格式。DataList控件也由模板驱动,和Repeater不同的是,DataList默认输出是HTML表格,DataList将数据源中的记录输出为HTML表格一个个的单元格。

1. Repeater控件显示数据

    要使用Repeater控件显示数据,必须创建ItemTemplate。如下所示:
例1:使用ItemTemplate显示数据

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    
<ItemTemplate>
        
<div class="movies">
            
<h1><%#Eval("Title"%></h1>
        
</div>
        
<b>Directed by:</b><%#Eval("Director"%>
        
<br />
        
<b>Description:</b><%#Eval("Description"%>
    
</ItemTemplate>
</asp:Repeater> 

    以上代码,通过浏览器可以看到,.net不会改变里面的结构,模板里面怎么排列,数据显示也怎么样显示。它的HTML如下所示:、

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<div class="movies">
     
<h1>史密斯行动</h1>
</div>
<b>Directed by:</b>Doug Liman
<br />
<b>Description:</b>约翰(布拉德?皮特 Brad Pitt 饰)和
<div class="movies">
     
<h1>暴力街区</h1>
</div>
<b>Directed by:</b>Luc Besson
<br />
<b>Description:</b>卧虎藏龙而又凌乱不堪的13区… 

    所以,Repeater的灵活性就在这个上面,完全可以自由发挥,想怎么显示就怎么显示。例如,都可以把它放在Javascript代码中

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<script type=”text/javascript”>
    
<asp:Repeater id=”rptPhotos” Runat=”server”>
         
<ItemTemplate>
              
<%# Eval(“Name”, "photos.push(‘Photos/{0}’)"%>
         
</ItemTemplate>
    </asp:Repeater>
</script> 

   以上,photos是一个Javscript数组对象。Repeater生成的数据,最后就像以下这样:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<script type="text/javascript">
        photos.push(
'Photos/1.jpg');
        photos.push(
'Photos/2.jpg');
        photos.push(
'Photos/3.jpg');
        photos.push(
'Photos/4.jpg');
        …
</script> 


2. Repeater中使用模板

    Repeater支持以下5种模板
      ● ItemTemplate : 对每一个数据项进行格式设置 【Formats each item from the data source.】
      ● AlternatingItemTemplate : 对交替数据项进行格式设置
      ● SeparatorTemplate : 对分隔符进行格式设置
      ● HeaderTemplate : 对页眉进行格式设置
      ● FooterTemplate : 对页脚进行格式设置
   以上,英文中使用了Formats item from datasource这样的话,就说明Repeater控件主要是用来对数据进行Format的,控制数据怎么样排列,怎么样显示。
   Repeater必须使用的是Itemtemplate,其它的类型模板按需添加。
例2:以下通过CSS控制,显示了一个比较不错的列表项:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<style type="text/css">
    html 
{
        background-color
:Silver
    
}
    .content 
{
        width
:600px;
        border
:soild 1px black;
        background-color
:White;
    
}
    .movies 
{
        border-collapse
:collapse;
    
}
    .movies th,.movies td 
{
        padding
:10px;
        border-bottom
:1px solid black;
    
}
    .alternating 
{
        background-color
:#eeeeee;
        
}
</style>

<div class="content">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    
<HeaderTemplate> <!-- 显示头部 -->
        
<table class="movies"> <!-- table头部声明-->
         
<tr>
            
<th>Movie Title</th>
            
<th>Movie Director</th>
            
<th>Box Office Totals</th>
         
</tr>
    
</HeaderTemplate>
    
<ItemTemplate>  <!-- 数据行 -->
        
<tr>
            
<td><%#Eval("Title"%></td>
            
<td><%#Eval("Director"%></td>
            
<td><%#Eval("BoxOfficeTotals","{0:c}"%></td> <!-- 格式化为货币形式 -->
        
</tr>
    
</ItemTemplate>
    
<AlternatingItemTemplate> <!-- 交错行 -->
        
<tr class="alternating">
            
<td><%#Eval("Title"%></td>
            
<td><%#Eval("Director"%></td>
            
<td><%#Eval("BoxOfficeTotals","{0:c}"%></td>
        
</tr>
    
</AlternatingItemTemplate>
    
<FooterTemplate> <!-- 脚注行 -->
        
</table>    <!-- table尾 -->
    
</FooterTemplate>
</asp:Repeater>
</div> 

    以上,显示的样式如下所示:

repeater

3. Repeater控件的事件处理

    Repeater控件有以下事件:
      ● DataBinding : Repeater控件绑定到数据源时触发
      ● ItemCommand : Repeater控件中的子控件触发事件时触发
      ● ItemCreated : 创建Repeater每个项目时触发 
      ● ItemDataBound : Repeater控件的每个项目绑定数据时触发
例3:使用Repeater控件的事件支持编辑、更新、删除
=== 后台代码 ===

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<script runat=”server”>
    
// The name of the primary key column
    string DataKeyName = "Id";

    
/// 把每个列的ID存储在ViewState["Keys"]对象中,ViewState["Keys"]是一个HashTable对象。
    Hashtable Keys
    {
        get
        {
            
if (ViewState["Keys"== null)
                ViewState[
"Keys"= new Hashtable();
            
return (Hashtable)ViewState["Keys"];
        }
    }

    
/// Repeater控件绑定到数据源时触发
    /// 每次更新,删除,增加后,都会触发这个事件,Keys中的值都会被清除。
    /// 在ItemDataBound事件发生时,被新的值填充
    protected void rptMovies_DataBinding(object sender, EventArgs e)
    {
        Keys.Clear();
    }

    
/// 每个项目绑定数据时触发
    protected void rptMovies_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        
// 如果是数据列,把ID列取出来,加入到ViewState["Keys"]中
        // DataBinder.Eval是在运行时计算数据绑定表达式。这样的用法要记住.
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==ListItemType.AlternatingItem)
        {
            Keys.Add(e.Item.ItemIndex, DataBinder.Eval(e.Item.DataItem, 
"Id"));
        }
    }

    
/// 当点击Update,Insert,Delete按钮时触发
    protected void rptMovies_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        
switch (e.CommandName)
        {
            
case "Update":
                UpdateMovie(e);
                
break;
            
case "Insert":
                InsertMovie(e);
                
break;
            
case "Delete":
                DeleteMovie(e);
                
break;
        }
    }
    
/// Update a movie record
    protected void UpdateMovie(RepeaterCommandEventArgs e)
    {
        
// 从一个数据项中获得相应的控件
        TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle");
        TextBox txtDirector 
= (TextBox)e.Item.FindControl("txtDirector");
        CheckBox chkInTheaters 
= (CheckBox)e.Item.FindControl("chkInTheaters");
        
// 填充sqlDataSource的UpdateParameters值
        srcMovies.UpdateParameters["Id"].DefaultValue =
        Keys[e.Item.ItemIndex].ToString();
        srcMovies.UpdateParameters[
"Title"].DefaultValue = txtTitle.Text;
        srcMovies.UpdateParameters[
"Director"].DefaultValue = txtDirector.Text;
        srcMovies.UpdateParameters[
"InTheaters"].DefaultValue =
        chkInTheaters.Checked.ToString();
        
// 进行Update
        srcMovies.Update();
    }

    
/// Insert a movie record
    protected void InsertMovie(RepeaterCommandEventArgs e)
    {
        
// 从一个数据项中获得相应的控件
        TextBox txtTitle = (TextBox)e.Item.FindControl("txtTitle");
        TextBox txtDirector 
= (TextBox)e.Item.FindControl("txtDirector");
        CheckBox chkInTheaters 
= (CheckBox)e.Item.FindControl("chkInTheaters");
        
// 填充sqlDataSource的InsertParameters值
        srcMovies.InsertParameters["Title"].DefaultValue = txtTitle.Text;
        srcMovies.InsertParameters[
"Director"].DefaultValue = txtDirector.Text;
        srcMovies.InsertParameters[
"InTheaters"].DefaultValue =
        chkInTheaters.Checked.ToString();
        
// Fire the InsertCommand
        srcMovies.Insert();
    }

    
/// Delete a movie record
    protected void DeleteMovie(RepeaterCommandEventArgs e)
    {
        
// 设置sqlDataSource的DeleteParameters值
        srcMovies.DeleteParameters["Id"].DefaultValue =  Keys[e.Item.ItemIndex].ToString();
        
// Fire the DeleteCommand
        srcMovies.Delete();
    }
</script> 

=== 前台页面 ===

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<asp:Repeater id="rptMovies" DataSourceID="srcMovies" Runat="server"
      OnItemCommand
="rptMovies_ItemCommand" OnItemDataBound="rptMovies_ItemDataBound" OnDataBinding="rptMovies_DataBinding">
    
<HeaderTemplate>
        
<table class="movies">
        
<tr> <th>Title</th><th>Director</th><th>In Theaters</th> </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="chkInTheaters" Checked='<%#Eval("InTheaters")%>'Runat="server" /></td>
            
<td><asp:LinkButton id="lnkUpdate" CommandName="Update" Text="Update" Runat="server" />
                
&nbsp;|&nbsp;<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="chkInTheaters" Runat="server" /></td>
            
<td><asp:LinkButton id="lnkInsert" CommandName="Insert" Text="Insert" Runat="server" /></td>
        
</tr>
        
</table>
    
</FooterTemplate>
</asp:Repeater>

<asp:SqlDataSource id="srcMovies" ConnectionString="<%$ ConnectionStrings:Movies %>"
    SelectCommand
="SELECT Id,Title,Director,InTheaters FROM Movies"
    UpdateCommand
="UPDATE Movies SET Title=@Title,Director=@Director,InTheaters=@InTheaters WHERE Id=@Id"
    InsertCommand
="INSERT Movies(Title,Director,InTheaters) VALUES(@Title,@Director,@InTheaters)"
    DeleteCommand
="DELETE Movies WHERE Id=@Id" Runat="server">
    
<UpdateParameters>
        
<asp:Parameter Name="Id" />
        
<asp:Parameter Name="Title" />
        
<asp:Parameter Name="Director" />
        
<asp:Parameter Name="InTheaters" />
    
</UpdateParameters>
    
<InsertParameters>
        
<asp:Parameter Name="Title" />
        
<asp:Parameter Name="Director" />
        
<asp:Parameter Name="InTheaters" />
    
</InsertParameters>
    
<DeleteParameters>
        
<asp:Parameter Name="Id" />
    
</DeleteParameters>
</asp:SqlDataSource>

 


目录
相关文章
|
19天前
|
Java 物联网 C#
C#/.NET/.NET Core学习路线集合,学习不迷路!
C#/.NET/.NET Core学习路线集合,学习不迷路!
|
4月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
49 8
|
2月前
|
开发者 Windows
.NET 开源扁平化、美观的 C/S 控件库
【10月更文挑战第23天】介绍了三款适用于 .NET 平台的开源扁平化、美观的 C/S 控件库:MaterialSkin 采用 Google Material Design 风格,适合现代感界面;Krypton Toolkit 提供丰富控件,界面易于定制;Fluent Ribbon Control Suite 模仿 Office 界面,适合复杂功能应用。每款控件库均附有示例代码及 GitHub 链接。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
|
2月前
|
开发框架 缓存 算法
开源且实用的C#/.NET编程技巧练习宝库(学习,工作,实践干货)
开源且实用的C#/.NET编程技巧练习宝库(学习,工作,实践干货)
|
2月前
|
C# Android开发 iOS开发
一组.NET MAUI绘制的开源控件 - AlohaKit
一组.NET MAUI绘制的开源控件 - AlohaKit
|
3月前
|
开发框架 JavaScript 前端开发
|
Web App开发 前端开发 .NET
艾伟_转载:学习 ASP.NET MVC (第五回)理论篇
本系列文章导航 学习 ASP.NET MVC (第一回)理论篇 学习 ASP.NET MVC (第二回)实战篇 学习 ASP.NET MVC (第三回)实战篇 学习 ASP.NET MVC (第四回)实战篇 学习 ASP.NET MVC (第五回)理论篇 通过前几篇文章,我们通过ASP.NET MVC创建了一个简单的应用程序,学习了ASP.NET MVC的基本框架和工作流程。
1090 0
|
Web App开发 前端开发 .NET
艾伟_转载:学习 ASP.NET MVC (第一回)理论篇
本系列文章导航 学习 ASP.NET MVC (第一回)理论篇 学习 ASP.NET MVC (第二回)实战篇 学习 ASP.NET MVC (第三回)实战篇 学习 ASP.NET MVC (第四回)实战篇 学习 ASP.NET MVC (第五回)理论篇 MVC三种角色:--Model:用于存储数据的组件--View:根据Model数据进行内容展示的组件--Controller:接受并处理用户指令(操作Model),选择一个View并输出内容。
1088 0
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
44 7