中繼器內部的按鈕

Question

我有一個帶類頭和細節的中繼器。點擊行（標題）細節將通過鏈接按鈕展開（編輯，更新/取消）。一旦編輯被按下 - >更新並取消按鈕將可見。 這工作正常。除了下面提到的一個之外

我的問題是 - >每當我點擊編輯按鈕，細節崩潰，我必須再次單擊行（標題）才能看到更新和取消鏈接按鈕。當編輯被選中時，我想要看到更新和取消按鈕。現在每次我必須擴展更新。

編輯我使用的是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> 

現在在代碼中，中繼器的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);  

    } 
} 

我已經測試的代碼，所以如果你是有任何問題，請讓我知道。