Holen Sie sich das geklickte Element TextBox in Repeater Control angezeigt ASP.Net

Question

Ich brauche Diskussionsforum zu implementieren, so verwende ich derzeit asp.net Repeater-Steuerelement. Ich habe ein Textfeld, um eine Antwort für jeden Repeater hinzuzufügen. Zurzeit verwende ich ein Java Script und Stile dafür.

Beim ersten Laden ist das Antwortfenster nicht sichtbar. Wenn Sie auf die Linkverknüpfungsschaltfläche klicken, sollte nur das angeklickte Elementtextfenster angezeigt werden. ZZ zeigt es nur den ersten Wiederholungsgegenstand sogar irgendeinen Antwortknopf geklickt?

Irgendwas falsch daran oder wie bekomme ich die genaue Artikel-ID, die ich im Repeater angeklickt habe?

<div id="ViewDiscussion_Panel" runat="server" style="width: 100%; float: left;"> 
      <asp:Repeater ID="rptDiscussionFolders" runat="server" OnItemCommand="rptDiscussionFolders_ItemCommand" > 
    <ItemTemplate> 

    <div id="ContentArea" style="float: left; width: 92%; min-height: 80px; height: auto; margin-left: 10px; margin-bottom: 10px;"> 

     <div id="EditReplyItemArea" class="EditReplyItemArea" runat="server" style="margin: 15px 10px 10px 0px"> 
            <asp:TextBox ID="txtCommentItemReply" runat="server" Style="width: 98.8%; height: 1.5em; border: 1px solid gray" title="Add a reply" data-bind="value: text1, valueUpdate: 'keyup'"></asp:TextBox> 
            <div style="float: right;"> 
             <asp:Button ID="ItemReplySubmit" data-bind="enable: isFormValid" runat="server" Text="Reply" OnClick="ItemReplySubmit_Click" CommandArgument='<%# Eval("ParentFolderID")%>' BackColor="DarkBlue" ForeColor="White" /> 
            </div> 
            <div style="float: right;"> 
             <asp:Button ID="ItemReplyEdit" data-bind="enable: isFormValid" runat="server" Text="Edit" OnClick="ItemReplyEdit_Click" CommandArgument='<%# Eval("ListID")%>' BackColor="DarkBlue" ForeColor="White" /> 
            </div> 
           </div> 

    </div> 

</ItemTemplate> 
      </asp:Repeater> 
     </div> 

Script ...

function EnbaleReplyPanel() { 
     $("#ContentArea").addClass("showDivs"); 
     return false; 
    } 

Style ...

<style type="text/css"> 
#ContentArea .EditReplyItemArea 
{ 
    display: none; 
} 
#ContentArea.showDivs .EditReplyItemArea 
{ 
    display: block; 
} 
</style> 

Answer 1

Grundsätzlich benötigen Sie einen Index auf die Funktion zu übergeben, und auch eine eindeutige ID geben Sie Ihre div basierend auf diese Indexwerte ...

so werden die Änderungen wie folgt sein:

Div eindeutigen Namen:

<div class="CArea" id="ContentArea_<%# Container.ItemIndex + 1 %>" style="float: left; 


function EnbaleReplyPanel(indx) { 
    $("#ContentArea_" + indx).toggleClass("showDivs"); 
    return false; 
} 

bin nicht sicher, wo rufst du EnbaleReplyPanel aus, aber Sie müssen von dort die gleiche Sache passieren, so wird es sein:

EnbaleReplyPanel(<%# Container.ItemIndex + 1 %>); 

Für die CSS-Klasse Namen, wird sein:

<style type="text/css"> 
.CArea .EditReplyItemArea 
{ 
display: none; 
} 
.CArea .showDivs .EditReplyItemArea 
{ 
    display: block; 
} 
</style>