how to show or hide div on button click in repeater in asp.net?

Question

question

Dikshadudi-8186 asked Apr 28, '22 Dikshadudi-8186 commented Apr 29, '22

how to show or hide div on button click in repeater in asp.net?

i want to show the content on button click and hide on again button click, button and div is in repeater. Here is the code I tried , and also want the current div status hidden.

dotnet-aspnet-general dotnet-aspnet-webforms dotnet-aspnet-webpages

screenshot-101.png (255.5 KiB)

screenshot-102.png (259.9 KiB)

screenshot-103.png (253.9 KiB)

screenshot-104.png (320.6 KiB)

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2022-04-28T10:09:29.477Z

LanHuang-MSFT answered Apr 28, '22 Dikshadudi-8186 commented Apr 29, '22

Hi @Dikshadudi-8186,
In the repeater you can use FindControl to find the div.
Dim sample As HtmlGenericControl = TryCast(b.Parent.FindControl("div1"), HtmlGenericControl)
Page.FindControl(String) Method:searches the page naming container for a server control with the specified identifier.
https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.page.findcontrol?view=netframework-4.8
You can refer to the example below.

 Protected Sub OnMyCommand1(ByVal sender As Object, ByVal e As CommandEventArgs)
     Dim b As LinkButton = TryCast(sender, LinkButton)
     Dim sample As HtmlGenericControl = TryCast(b.Parent.FindControl("div1"), HtmlGenericControl)
    
     If b IsNot Nothing Then
         Dim c As Label = CType(b.Parent.FindControl("Label1"), Label)
    
         If c IsNot Nothing Then
             sample.Visible = False
             c.Text = "text changed in handler"
             c.ForeColor = System.Drawing.Color.Green
         End If
     End If
 End Sub

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

2.jpg (110.1 KiB)

19.gif (44.2 KiB)

· 4

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Dikshadudi-8186 · Apr 29 at 03:15 AM

I tried this but this is only making it false

 Protected Sub showhide(ByVal sender As Object, ByVal e As CommandEventArgs)
         Dim b As Button = TryCast(sender, Button)
         Dim detail As HtmlGenericControl = TryCast(b.Parent.FindControl("detail"), HtmlGenericControl)
    
            
         If b IsNot Nothing Then
             detail.Visible = False
         End If
            
     End Sub

0 ·

screenshot-105.png (223.1 KiB)

LanHuang-MSFT Dikshadudi-8186 · Apr 29 at 06:08 AM

Hi @Dikshadudi-8186,
The first method I provided requires two buttons to achieve what you want,
I wrote another example in JavaScript that will search for "brother" DIV element of the clicked link, and show or hide it.
Note: Each item (in the repeater) needs to be wrapped with a DIV element.
You can refer to this.

 <head runat="server">  
     <title></title>
      <scri pt>
          fu nction show(oLink, targetDivID) {
              var arrDIVs = oLink.parentNode.getElementsByTagName("div");
              for (var i = 0; i < arrDIVs.length; i++) {
                  var oCurDiv = arrDIVs[i];
                  if (oCurDiv.id.indexOf(targetDivID) >= 0) {
                      var blnHidden = (oCurDiv.style.display == "none");
                      oCurDiv.style.display = (blnHidden) ? "block" : "none";
                  }
              }
              return false;
          }
      </sc ript>
 </head>

Best regards,
Lan Huang

1 ·

1.jpg (134.5 KiB)

99.gif (62.0 KiB)

Dikshadudi-8186 LanHuang-MSFT · Apr 29 at 03:55 PM

Thanks for the reply , I tried this but on clicking one button content of all div is showing .

 <script>
    
         function show(oLink, targetDivID)
         {
               var arrDIVs = oLink.parentNode.getElementsByTagName("div");
    
               for (var i = 0; i < arrDIVs.length; i++) 
               {
                   var oCurDiv = arrDIVs[i];
    
                   if (oCurDiv.id.indexOf(targetDivID) >= 0) 
                   {
                       var blnHidden = (oCurDiv.style.display == "none");
                       oCurDiv.style.display = (blnHidden) ? "block" : "none";
                   }
               }
    
               return false;
         }
       </script>

0 ·

screenshot-106.png (263.8 KiB)

Show more comments

question