zoukankan      html  css  js  c++  java
  • Repeater控件里的大智慧

    Repeater?一个只会绑定数据并显示数据的低级控件?哦~谁告诉你的?

    Repeater因为他的灵活性和扩展性很高,备受很多程序员青睐。我的一个.net群成员曾因为比较Repeater和GridView而争得面红耳赤。我个人也是因为GridView有些功能无法实现,才开始研究Repeater的。

    当然了,我对GridView也不是太熟悉。无法客观的比较两者的优劣,但因为GridView的高度封装性注定了他的灵活性不及Repeater,而且Repeater做出来的东西比较“干净”(个人觉得)。

    本着分享为原则,特此将自己这段时间的研究成果在年前展现给大家。

    这里我将整合很多Repeater的应用,内容长是一定的(我会尽量以最简单明了的形式展现,我知道读者希望这样。因为我在学别人东西的时候也希望这样。呵呵)。但每个内容板块都是可以独立的。OK,现在就开始了。

    目 录

    1.Repeater的嵌套使用

    2.Repeater里的按钮单击事件

    3.获取子Repeater里的控件

    4.Repeater里单选按钮互斥问题

    5.Repeater中记录单选按钮选择状态并显示

    1.Repeater的嵌套使用:

    参考代码:

    前台:

    <asp:Repeater ID="questionTable" runat="server"
    onitemdatabound="questionTable_ItemDataBound">
    <itemtemplate>
    <%#DataBinder.Eval (Container.DataItem ,"FID") %>
    <asp:Repeater ID="questionOption" runat="server">
    <itemtemplate>
    <%#DataBinder.Eval (Container.DataItem ,"OPTIONNAME") %>

    </itemtemplate>
    </asp:Repeater>
    </itemtemplate>
    </asp:Repeater>

    如果你仔细看了下结构,你是否会思考一个问题。如何对里面嵌套的Repeater进行数据绑定呢?

    接下来看后台代码。

    后台:

    //用Repeater的ItemDataBound事件

    protected void questionTable_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
    System.Web.UI.WebControls.Repeater questionOption = (System.Web.UI.WebControls.Repeater)e.Item.FindControl("questionOption"); //获取嵌套中的Repeater 这是关键

    //接下来就可以把你的数据源给子Repeater了
    questionOption.DataSource = "......" ; //给出要绑定的数据
    questionOption.DataBind();
    }
    }

    小结:

    什么时候用嵌套呢?当要绑定的数据存在主子表时,嵌套的Repeater就可以帮大忙了。外面的绑定主表数据,里面的绑定子表数据。这样显示出来的 情况是主表记录显示一行接着显示一行子表记录。以此类推。这是不是给人一种耳目一新的感觉呢?如果是多层嵌套也没关系,就是不断获得子Repeater对 象即可。

    PS:要主表记录行下面显示对应主表的子表记录,就看你给子Repeater绑定怎样的数据源了。这里就是看你如何传值了,给怎样的数据源了。

    2.Repeater里的按钮单击事件

    参考代码:

    前台:

    <asp:Button ID="delete" runat="server" Text="删除" OnCommand="deletequestionOption_Click"></asp:Button>

    后台:
    protected void deletequestionOption_Click(object sender,CommandEventArgs e)
    {

    if ((sender as System.Web.UI.WebControls.Button).Text == "删除")
    {

    //如何获取控件对象呢,彩色的代码就是获取的方法
    }
    }

    小结:

    你想过用Repeater来编辑显示出来的数据吗?比如删除或修改数据。在Repeater里面放入Button。通过OnCommand属性来产生一个事件,以便达到编辑数据的效果。

    3.获取子Repeater里的控件

    参考代码:

    前台:

    <asp:Repeater ID="questionTable" runat="server"
    onitemdatabound="questionTable_ItemDataBound">
    <itemtemplate>
    <asp:Repeater ID="questionOption" runat="server">
    <itemtemplate>
    <asp:TextBox ID="option" runat="server" Text='<%#DataBinder.Eval (Container.DataItem ,"OPTIONNAME") %>'></asp:TextBox>
    </itemtemplate>
    </asp:Repeater>
    </itemtemplate>
    </asp:Repeater>

    后台:
    //ItemCommand事件是Repeater中生成事件时激发(也就是Repeater里面的事件都会触发此事件)
    protected void questionTable_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
    System.Web.UI.WebControls.TextBox Toption = null;
    string toption = null;

    System.Web.UI.WebControls.Repeater rptchild = (System.Web.UI.WebControls.Repeater)e.Item.FindControl("questionOption");

    //先获取子Repeater
    for (int j = 0; j < rptchild.Items.Count; j++) //通过循环遍历来获取

    {
    //找到子级Repeater中的控件
    Toption = (System.Web.UI.WebControls.TextBox)rptchild.Items[j].FindControl("Toption");
    toption = Toption.Text;
    }
    }

    4.Repeater里单选按钮互斥问题

    有时需要往Repeater中加入单选按钮,当我们加入<asp:radioButton/>这个控件后,发现无论自己如何设置GroupName属性也无法使其互斥(每个单选都能被选中)。为什么会这样呢?

    这是因为放入Repeater中的单选按钮控件自动生成的RadioButton的 GroupName不是唯一的,是依据“模板行ID+radiobutton的ID” (如:Repeater1_ctl02_CustomerRadio1,Repeater1_ctl03_CustomerRadio1)

    了解原因后,所以解决方法有两种,一种是重写<asp:radioButton/>控件(重写,估计你会崩溃的)。令一种就是用<input type="radio"/>来解决。

    我选择最简单的第二种,真的很简单。网上有一种方法也用到了<input type="radio"/>但是都用到了大量的JavaScript。很头疼的说,都挺复杂的。

    我们知道<input type="radio"/>分组的属性是name。所以当你设置name属性后,就会发现所有行的单选按钮都互斥(因为所有的name都相同), 正好与<asp:radioButton/>走了另一个方向的极端。所以必须综合思考下。

    我们可以通过获取Repeater显示行的行号来表示name,那样就可以让每行的单选按钮互斥了。所以获取行号的方法如下:

    <input type="radio" id="Radio" name="<%#Container..ItemIndex%>"/>

    Container.ItemIndex是获取Repeater的行号

    如果你运用了嵌套Repeater,而且你的单选按钮在子Repeater。那么你的radio必须获取父Repeater行号才行。方法如下:

    <input type="radio" id="Radio" name="<%#((RepeaterItem)Container.Parent.Parent).ItemIndex%>"/>

    5.Repeater中记录单选按钮选择状态并显示

    为什么要记录,当你的Repeater具有分页功能的时候。你每次点击其它的页面时,会将原来已被选中的radio全部还原成为选中状态。所以记录下每页的radio选择情况就很有必要了。这里用JavaScript来解决。

    代码如下:

    function AddRemoveValues(oChk) {
    var HdnSelectedValues = document.getElementById("ctl00_cphPostback_HdnSelectedValues"); //这里隐藏控件的id是通过查看源码获得的 原因可能是因为每个母版也里面包含了其它自带的隐藏控件
    var names = document.getElementsByName(oChk.name); //这里是获取一行中的所有单选按钮 为下面来分别判断那个是被选中的
    for (var i = 0; i < names.length; i++)
    if (names[i].checked) {
    if (HdnSelectedValues.value.indexOf(oChk.value) < 0) { //如果隐藏控件里面有这个值了,就不进行添加(防止用户多次点击已选中的单选按钮)
    HdnSelectedValues.value += "," + oChk.value;
    }
    }
    else {
    HdnSelectedValues.value = HdnSelectedValues.value.replace("," + names[i].value, ""); //没有被选择,则替换掉原来进去的值
    }

    }

    <input type="radio" id="option" onclick="AddRemoveValues(this)" value='<%# Eval("FID") %>' name="<%#((RepeaterItem)Container.Parent.Parent).ItemIndex%>"/>
    <asp:HiddenField ID="HdnSelectedValues" runat="server" />

    延伸:

    虽然每次点击的radio都被记录了下来。那怎么样利用这些记录的值来显示出来呢?下面我们就谈论这个问题。

    同样通过激发某个事件来激发一个脚本。脚本代码如下:

    function SelectStatus() {
    var HdnSelectedValues = document.getElementById("<%=HdnSelectedValues.ClientID%>");
    var radios = document.getElementsByTagName("input"); //获取当前页面所有的radio

    for (var i = 0; i < radios.length; i++) {
    if (radios[i].type == "radio") {
    if (HdnSelectedValues.value.indexOf(radios[i].value) >= 0) { //如果该单选按钮的值在隐藏控件里则单选为被选状态
    radios[i].checked = true;
    }
    }
    }
    }

    PS: 值得注意的是,通过“HdnSelectedValues.ClientID”来获取客户端ID。比如我这里查看到源代码中的客户端是ID的"ctl00_cphPostback_HdnSelectedValues",这就是为什么直接获取“HdnSelectedValues”是没用

    ps:http://blog.csdn.net/sanjiawan/article/details/6750385

  • 相关阅读:
    Siege 3.0 正式版发布,压力测试工具
    Pomm 1.1.2 发布,专为 PG 设计的 ORM 框架
    Whonix 0.5.6 发布,匿名通用操作系统
    国内开源 java cms,Jspxcms 2.0 发布
    EZNamespaceExtensions.Net v2013增加对上下文菜单、缩略图、图标、属性表的支持
    GNU Guile 2.0.9 发布,Scheme 实现
    jdao 1.0.4 发布 轻量级的orm工具包
    OpenSearchServer 1.4 RC4 发布
    Percona Server for MySQL 5.5.3030.2
    Samba 4.0.5 发布
  • 原文地址:https://www.cnblogs.com/LifeKingcn/p/2804365.html
Copyright © 2011-2022 走看看