• 【转载】Repeater控件里的大智慧 天高地厚


    目 录

    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”是没用

     
     
     
  • 相关阅读:
    深入理解计算机系统 第七章
    第七周 可执行程序的卸载
    Linux内核设计与实现 第三章
    第六周 进程的描述和进程的创建
    第五周 扒开系统调用的三层皮(下)
    UIWebView和Js交互
    CocoaPods的版本升级
    ios图片添加文字或者水印
    Objective-C 关联
    NSString进行urlencode编码
  • 原文地址:https://www.cnblogs.com/net2012/p/3096520.html
Copyright © 2020-2023  润新知