Remove From My Forums

How to handle div onclick in code behind C# ASP.NET?

Question

User102575017 posted

Hello,

I have a Panel that is not visible (visible = false), and a Div that is designed like a box. on div click, it should do "panel.visible = true".

I tried to do this:

protected void Page_Load(object sender, EventArgs e)
{
     div1.Attributes["onClick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");
}

#region IPostBackEventHandler Members
public void RaisePostBackEvent(string eventArgument)
{
     if (!string.IsNullOrEmpty(eventArgument))
     {
          if (eventArgument == "ClickDiv")
          {
               Div_Click();
          }
     }
}
#endregion
protected void Div_Click()
{
     Panel1.Visible = true;
}

<asp:Panel ID="Panel1" runat="server" CssClass="Panel1Class" Visible="false">//somecontent//</asp:Panel>
<div runat="server" id="div1" class="box"></div>

But unfortunately, it did not work.

Best regards,

Majid Abu Rmelah.

Sunday, May 12, 2019 10:51 PM

Answers

User283571144 posted

Hi Majid,

The div that I want to click on to make Panel1.Visible = true is inside a DataList. How can I find the div? or tell me if there is a better way to do this.

As far as I know, we could use foreach to loop the datalist item and use findcontrol method to find the div, then we could set its onclick function in the page load event.

More details, you could refer to below codes and result:

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivWebFormTest.aspx.cs" Inherits="AspNetNormalIssue.Webform.DivWebFormTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .box {
          width:30px;
          height:30px;
          background-color:blue;
       
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DataList ID="DataList1" runat="server" DataKeyField="MyId" DataSourceID="SqlDataSource1">
                <ItemTemplate>
                    MyId:
                    <asp:Label ID="MyIdLabel" runat="server" Text='<%# Eval("MyId") %>' />
                  <div runat="server" id="div1" class="box" ></div>
                    <br />
                    FriendId:
                    <asp:Label ID="FriendIdLabel" runat="server" Text='<%# Eval("FriendId") %>' />
                    <br />
                    FriendStatus:
                    <asp:Label ID="FriendStatusLabel" runat="server" Text='<%# Eval("FriendStatus") %>' />
                    <br />
                    idname:
                    <asp:Label ID="idnameLabel" runat="server" Text='<%# Eval("idname") %>' />
                    <br />
                    PostedDate:
                    <asp:Label ID="PostedDateLabel" runat="server" Text='<%# Eval("PostedDate") %>' />
                    <br />
<br />
                </ItemTemplate>
            </asp:DataList>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:aspnet-MVCApplication-20180424014300ConnectionString %>" SelectCommand="SELECT * FROM [Friends]"></asp:SqlDataSource>
 

            <asp:Panel ID="Panel1" runat="server" CssClass="Panel1Class" Visible="false">//somecontent//</asp:Panel>
        </div>
    </form>
</body>
</html>

Code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace AspNetNormalIssue.Webform
{
    public partial class DivWebFormTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            foreach (DataListItem item in DataList1.Items)
            {
                HtmlControl re =  (HtmlControl)item.FindControl("div1");
                re.Attributes["onClick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");
            }

             if (Page.IsPostBack)
            {
                if (Request["__EVENTTARGET"] == "__Page" &&
                    Request["__EVENTARGUMENT"] == "ClickDiv")
                {
                    Div_Click();
                }
            }
        }

        //public void RaisePostBackEvent(string eventArgument)
        //{
        //    if (!string.IsNullOrEmpty(eventArgument))
        //    {
        //        if (eventArgument == "ClickDiv")
        //        {
        //            Div_Click();
        //        }
        //    }
        //}

        protected void Div_Click()
        {
            Panel1.Visible = true;
        }
    }
}

Result:

Best Regards,

Brando

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, May 14, 2019 7:57 AM

All replies

User283571144 posted

Hi Majid Abu Rmelah,

I have a Panel that is not visible (visible = false), and a Div that is designed like a box. on div click, it should do "panel.visible = true

As far as I know, if you just set the ClientScript.GetPostBackEventReference(this, "ClickDiv") for the div, it will not raise the RaisePostBackEvent method.

I suggest you could try to use Request["__EVENTTARGET"] and Request["__EVENTARGUMENT"] to get the parameter to make sure the div button click event is fired.

Then you could modify the panel visable attribute.

Codes as below:

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivWebFormTest.aspx.cs" Inherits="AspNetNormalIssue.Webform.DivWebFormTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .box {
          width:30px;
          height:30px;
          background-color:blue;
       
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server" CssClass="Panel1Class" Visible="false">//somecontent//</asp:Panel>
<div runat="server" id="div1" class="box" ></div>
        </div>
    </form>
</body>
</html>

Code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AspNetNormalIssue.Webform
{
    public partial class DivWebFormTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            div1.Attributes["onClick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");

            if (Page.IsPostBack)
            {
                if (Request["__EVENTTARGET"] == "__Page" &&
                    Request["__EVENTARGUMENT"] == "ClickDiv")
                {
                    Div_Click();
                }
            }
        }

        //public void RaisePostBackEvent(string eventArgument)
        //{
        //    if (!string.IsNullOrEmpty(eventArgument))
        //    {
        //        if (eventArgument == "ClickDiv")
        //        {
        //            Div_Click();
        //        }
        //    }
        //}

        protected void Div_Click()
        {
            Panel1.Visible = true;
        }
    }
}

Result:

Best Regards,

Brando

Monday, May 13, 2019 5:50 AM

User288213138 posted

Hi Majid Abu Rmelah,

Div has no click event in code behind, onclick () is its html click event, so you want to trigger Panel1.Visible, can only be triggered by the events of other controls. Here I used a LinkButton click event to make a demo.

The code:

Aspx:
<div>           
            <asp:Panel ID="Panel1" runat="server" CssClass="Panel1Class"  Visible="false" >//somecontent//</asp:Panel>
            <div runat="server" id="div1" class="box">
              click here
            </div>
            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"  style="display:none">LinkButton</asp:LinkButton>
        </div>
<script type="text/javascript">
    $(function () {
        $("#div1").click(function () {
     
            __doPostBack("LinkButton1",'');
      
      })
    })
  </script>

ASpx.cs:
protected void LinkButton1_Click(object sender, EventArgs e)
        {
            Panel1.Visible = true;
         
        }

The result:

Best Regards,

Sam

Monday, May 13, 2019 7:29 AM

0

Sign in to vote

User102575017 posted

The div that I want to click on to make Panel1.Visible = true is inside a DataList. How can I find the div? or tell me if there is a better way to do this.

Monday, May 13, 2019 11:16 AM

User283571144 posted

Hi Majid,

The div that I want to click on to make Panel1.Visible = true is inside a DataList. How can I find the div? or tell me if there is a better way to do this.

As far as I know, we could use foreach to loop the datalist item and use findcontrol method to find the div, then we could set its onclick function in the page load event.

More details, you could refer to below codes and result:

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivWebFormTest.aspx.cs" Inherits="AspNetNormalIssue.Webform.DivWebFormTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .box {
          width:30px;
          height:30px;
          background-color:blue;
       
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DataList ID="DataList1" runat="server" DataKeyField="MyId" DataSourceID="SqlDataSource1">
                <ItemTemplate>
                    MyId:
                    <asp:Label ID="MyIdLabel" runat="server" Text='<%# Eval("MyId") %>' />
                  <div runat="server" id="div1" class="box" ></div>
                    <br />
                    FriendId:
                    <asp:Label ID="FriendIdLabel" runat="server" Text='<%# Eval("FriendId") %>' />
                    <br />
                    FriendStatus:
                    <asp:Label ID="FriendStatusLabel" runat="server" Text='<%# Eval("FriendStatus") %>' />
                    <br />
                    idname:
                    <asp:Label ID="idnameLabel" runat="server" Text='<%# Eval("idname") %>' />
                    <br />
                    PostedDate:
                    <asp:Label ID="PostedDateLabel" runat="server" Text='<%# Eval("PostedDate") %>' />
                    <br />
<br />
                </ItemTemplate>
            </asp:DataList>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:aspnet-MVCApplication-20180424014300ConnectionString %>" SelectCommand="SELECT * FROM [Friends]"></asp:SqlDataSource>
 

            <asp:Panel ID="Panel1" runat="server" CssClass="Panel1Class" Visible="false">//somecontent//</asp:Panel>
        </div>
    </form>
</body>
</html>

Code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace AspNetNormalIssue.Webform
{
    public partial class DivWebFormTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            foreach (DataListItem item in DataList1.Items)
            {
                HtmlControl re =  (HtmlControl)item.FindControl("div1");
                re.Attributes["onClick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");
            }

             if (Page.IsPostBack)
            {
                if (Request["__EVENTTARGET"] == "__Page" &&
                    Request["__EVENTARGUMENT"] == "ClickDiv")
                {
                    Div_Click();
                }
            }
        }

        //public void RaisePostBackEvent(string eventArgument)
        //{
        //    if (!string.IsNullOrEmpty(eventArgument))
        //    {
        //        if (eventArgument == "ClickDiv")
        //        {
        //            Div_Click();
        //        }
        //    }
        //}

        protected void Div_Click()
        {
            Panel1.Visible = true;
        }
    }
}

Result:

Best Regards,

Brando

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Tuesday, May 14, 2019 7:57 AM

User102575017 posted

Perfectly worked, thank you.

If you don't mind, I still have one more thing to do. Inside the Div that is functioned to click on has content.

                    <div class="Div1Class" runat="server" id="Div1">
                        <div>
                            <div><%# DataBinder.Eval(Container.DataItem, "Field1") %></div>
                            <div><%# DataBinder.Eval(Container.DataItem, "Field2") %></div>
                        </div>
                        <div>
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Field3") %>' Width="100%" Height="400px" style="object-fit: cover;" />
                        </div>
                        <div>'<%# DataBinder.Eval(Container.DataItem, "Field4") %>'</div>
                        <div>Read More</div>
                    </div>

How can I get the values of these fields in DataBinder when I click on that div so I can put them in the panel?

Tuesday, May 14, 2019 9:26 AM

0

Sign in to vote

User283571144 posted

Hi Majid Abu Rmelah,

Since this case is mainly talking about the div onclick method, I suggest you could start a new threa to talk about new issue.

This will help other people who faces the same issue be more easily to find the answer.

Thank you.

Best Regards,

Brando

Tuesday, May 14, 2019 9:34 AM

Answered by:

How to handle div onclick in code behind C# ASP.NET?

Question

Answers

All replies