Question

我有一个带有类标题和详细信息的转发器。单击行（标题）详细信息将使用链接按钮进行扩展（编辑，更新/取消）。一旦按下编辑 - >更新和取消按钮将可见。这工作正常。除了下面提到的一个

我的问题是 - ＆gt;每当我点击编辑按钮，细节都会折叠，我必须再次单击行（标题）以查看更新和取消链接按钮。当编辑被激活时，我想看到更新和取消按钮。现在我每次都有扩展以进行更新。

编辑我使用的是asp.net链接按钮和切换功能是javascript，是不是因为那个......？请提供有关此问题的任何建议。提前谢谢。

 <style>
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
   background-color:#cccccc; font-family: Verdana; }
.details { display:none; visibility:hidden; 
     font-family: Verdana; }
</style>

&nbsp;<div style="overflow: scroll; overflow-x: hidden; overflow-y: auto;background-     color:gray;     height: 500px; width: 895px">

  <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

  <ItemTemplate>


 <div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
 onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);' style="border-style:   none;">
<asp:Panel ID="Panel3" runat="server" Height="30px" BorderStyle="None" BackColor="#79FFFF">

<%# DataBinder.Eval(Container.DataItem, "License")%> 
<%# DataBinder.Eval(Container.DataItem, "Name")%>

<%# DataBinder.Eval(Container.DataItem," Date")%>

<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">

<asp:Panel ID="Panel2" runat="server" Height="195px" BackColor="Gray" Font-Bold="False"    ForeColor="Maroon">
<br />
<asp:Label ID="Label1" runat="server" Text="LicenseID"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;

         <asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval    (Container.DataItem,"LicenseID") %>' Enabled="False" BackColor="Gray"    BorderStyle="None"></asp:TextBox>
 <asp:Label ID="Label2" runat="server" Text="License  Name"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <asp:TextBox ID="TextBox2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LicenseName")%>' Enabled="false" BackColor="Gray" BorderStyle="None"></asp:TextBox>

     </asp:Panel>

 </div>

  </ItemTemplate>

切换显示

    <script>
  function ToggleDisplay(id) {
    var allDetails = document.getElementsByClassName('details');
    var detaisToShow = document.getElementById('d' + id);
    for (var i = 0; i < allDetails.length; i++) {
        allDetails[i].style.display = 'none';
        allDetails[i].style.visibility = 'hidden';
    }
    detaisToShow.style.display = 'block';
    detaisToShow.style.visibility = 'visible';

    detaisToShow.style.display = 'visible';
  }

 </script>

Answer 1

我不得不对标记进行一些更改并添加了一个隐藏字段。还清理了脚本。标记可能看起来像：

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"  OnItemCommand="Repeater1_ItemCommand_ItemCommand" >
  <ItemTemplate>
     <div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
     onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);' style="border-style:   none;">
        <asp:HiddenField ID="hdnItemIndex" runat ="server" Value='<%# DataBinder.Eval(Container, "ItemIndex") %>' />
        <asp:Panel ID="Panel3" runat="server" Height="30px" BorderStyle="None" BackColor="#79FFFF">
            <%# DataBinder.Eval(Container.DataItem, "License")%> 
            <%# DataBinder.Eval(Container.DataItem, "Name")%>
            <%# DataBinder.Eval(Container.DataItem," Date")%>
        </asp:Panel>
        <div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">
            <asp:Panel ID="Panel2" runat="server" Height="195px" BackColor="Gray" Font-Bold="False"    ForeColor="Maroon">
                <br />
                <asp:Label ID="Label1" runat="server" Text="LicenseID"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval    (Container.DataItem,"LicenseID") %>' Enabled="False" BackColor="Gray"    BorderStyle="None"></asp:TextBox>
                <asp:Label ID="Label2" runat="server" Text="License  Name"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:TextBox ID="TextBox2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LicenseName")%>' Enabled="false" BackColor="Gray" BorderStyle="None"></asp:TextBox>
            </asp:Panel>
            <asp:LinkButton ID="lnkEdit" runat="server" CommandName="edit" 
                             CommandArgument='<%#  DataBinder.Eval(Container.DataItem, "LicenseID") %>'
                             Font-Bold="True"  OnClientClick="false">Edit</asp:LinkButton> 
         </div>
    </div>
</ItemTemplate>
... ... ...

脚本和风格：

<style>
    .header {
        font-size: larger;
        font-weight: bold;
        cursor: hand;
        cursor: pointer;
        background-color: #cccccc;
        font-family: Verdana;
    }

    .details {
        display: none;
        visibility: hidden;
        font-family: Verdana;
    }
</style>
<script>
    function ToggleDisplay(id) {
        var allDetails = document.getElementsByClassName('details');
        var detaisToShow = document.getElementById('d' + id);
        for (var i = 0; i < allDetails.length; i++) {
            allDetails[i].style.display = 'none';
        }
        detaisToShow.style.display = 'block';
    }
</script>

现在在代码中，repeater的itemcommand：

protected void Repeater1_ItemCommand_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName.ToLower() == "edit")
    {
        HiddenField hdnItemIndex = (HiddenField)((LinkButton)e.CommandSource).NamingContainer.FindControl("hdnItemIndex");
        string myScript = "ToggleDisplay(" + hdnItemIndex.Value + ");";
        Page.ClientScript.RegisterStartupScript(this.GetType(), "RegisterStartupScript", myScript, true);       

    }
}

我已经测试了代码，所以如果您有任何问题，请告诉我。

转发器内的按钮

1 个答案: