How to get DataBinder Fields when clicking on a Div that is inside a DataList?

Question

User102575017 posted

Hello,

I have a div inside a DataList, and inside this div there are DataBinder Fields, how can I get these fields when I click on this div?

To clarify the image:

            <asp:DataList ID="DataList1" runat="server" RepeatColumns="3" OnItemDataBound="DataList1_ItemDataBound" OnItemCommand="DataList1_ItemCommand">
                <ItemTemplate>
                    <div class="box" runat="server" id="BoxDiv">
                        <div class="boxheader">
                            <div class="boxfield1"><%# DataBinder.Eval(Container.DataItem, "Field1") %></div>
                            <div class="boxfield2"><%# DataBinder.Eval(Container.DataItem, "Field2") %></div>
                        </div>
                        <div class="boxfield3">
                            <asp:Image ID="image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Field3") %>' Width="100%" Height="400px" style="object-fit: cover;" />
                        </div>
                        <div class="boxfield4">'<%# DataBinder.Eval(Container.DataItem, "Field4") %>'</div>
                        <div class="boxfooter">Read More</div>
                    </div>
                </ItemTemplate>
            </asp:DataList>

I want to open a Panel when clicking on the div "BoxDiv", the panel has the data that is in the fields (1,2,3,4).

Best regards,

Majid Abu Rmelah.

Answer 1

User665608656 posted

Hi Majid Abu Rmelah,

According to your question, I suggest you could to bind the datalist to the data source firstly, loop each group of data in the datalist when the page is loaded, then store each group of data in a string.

At the same time, create a click event of BoxDiv and pass the string as a parameter to the onClick event of BoxDiv.

Then, when postback, it requests the parameters currently passed, and displays the hidden panel.

Finally, creates a div to store the parameter data, and adds the div to the panel control.

For more details, please refer the following code

<form id="form1" runat="server">
        <div>
            <asp:DataList ID="DataList1" runat="server" RepeatColumns="3"  DataKeyField="RowNumber" DataSourceID="SqlDataSource1">
                <ItemTemplate>
                    <div class="box" runat="server" id="BoxDiv">
                        <div class="boxheader">
                            <div class="boxfield1">
                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("RowNumber") %>' /></div>
                            <div class="boxfield2">
                                <asp:Label ID="Label2" runat="server" Text='<%# Eval("FruitName") %>' /></div>
                        </div>
                        <div class="boxfield4">
                            <asp:Label ID="Label3" runat="server" Text='<%# Eval("UnitPrice") %>' /></div>
                        <div class="boxfield4">
                            <asp:Label ID="Label4" runat="server" Text='<%# Eval("Quantity") %>' /></div>
                        <div class="boxfooter">Read More</div>
                    </div>

                </ItemTemplate>
            </asp:DataList>
            <asp:Panel ID="Panel1" runat="server" CssClass="Panel1Class" Visible="false"></asp:Panel>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TestConnectionString1 %>" SelectCommand="SELECT * FROM [Fruits]"></asp:SqlDataSource>
        </div>

code behind:

protected void Page_Load(object sender, EventArgs e)
        {
            foreach (DataListItem item in DataList1.Items)
            {
                HtmlControl re = (HtmlControl)item.FindControl("BoxDiv");
                Label field1 = (Label)item.FindControl("Label1");
                Label field2 = (Label)item.FindControl("Label2");
                Label field3 = (Label)item.FindControl("Label3");
                Label field4 = (Label)item.FindControl("Label4");
                string param = field1.Text + "@" + field2.Text + "@" + field3.Text + "@" + field4.Text;
                re.Attributes["onClick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv|" + param);
            }
            if (Page.IsPostBack)
            {
                if (Request["__EVENTTARGET"] == "__Page" &&
                    Request["__EVENTARGUMENT"].StartsWith("ClickDiv"))
                {
                    Div_Click(Request["__EVENTARGUMENT"].Split('|')[1].ToString());
                }
            }
        }
        protected void Div_Click(string param)
        {
            Panel1.Visible = true;
            HtmlGenericControl createDiv = new HtmlGenericControl("DIV");
            createDiv.ID = "createDiv";
            createDiv.Style.Add(HtmlTextWriterStyle.BackgroundColor, "Yellow");
            createDiv.Style.Add(HtmlTextWriterStyle.Color, "Red");
            createDiv.Style.Add(HtmlTextWriterStyle.Height, "100px");
            createDiv.Style.Add(HtmlTextWriterStyle.Width, "400px");
            createDiv.InnerHtml = param.Split('@')[0] + " " + param.Split('@')[1] + " " + param.Split('@')[2] + " " + param.Split('@')[3] + " ";
        
            Panel1.Controls.Add(createDiv);
        } 

The result of my work demo: 

Best Regards,

YongQing.

Answer 2

User102575017 posted

Loved it, it worked exactly as I want.

Thank you so much Yangqing Yu.