How can fetch multiple table dynamically with table category (Header) and table content using asp.net c# webforms

Question

I am trying to fetch table category and based on that table category the multiple details of that category will have to automatically fetch under this following category but unfortunately multiple table is created under this single category.

First of all I have created tbl_category(ID{PK}, catName) table on DB. Then created tbl_categoryDetails(ID{PK}, catId{FK}, catDetails). So I have needed multiple categoryDetails fields under single category.

So then I have to fetch this catName with their details part by part. I have attached of the static table, I need this way table data will be fetched Static Table Image.

But Unfortunately I am getting data this way My Dynamic Table Image. The categoryName fetch multiple time but I want single time. I am using repeater control to fetch data from DB. please help me to solve this problem.

My Forms.aspx code is here:

                <asp:Repeater ID="rptr_form" runat="server">
                    <ItemTemplate>
                         <section class="about">
                            <div class="container">
                                <div class="row no-gutters d-flex justify-content-center">
                                    <div class="flex-column justify-content-center about-content minwidth">
                                        <div class="section-title">
                                            <div class="mycontent-center">
                                                <h2 style="margin-bottom: -5px;" data-toggle="collapse" role="button" href="#collapseExample19" aria-expanded="false" aria-controls="collapseExample19"><%#Eval("form_categoryname") %>  &nbsp <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h2>
                                                <br />
                                                <div class="content-style collapse tbl-scroll" id="collapseExample19">
                                                    <table class="table table-striped">
                                                        <thead>
                                                            <tr>
                                                                <th scope="col"></th>
                                                                <th scope="col">No</th>
                                                                <th scope="col">Bangla</th>
                                                                <th scope="col">English</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr class="table-info">
                                                                <td><%#Eval("form_details") %></td>
                                                                <td><%#Eval("form_no") %></td>
                                                                <td><a href="<%# "../" + Eval("form_bengali_path") %>" target="_blank">
                                                                    <img src="assets/image/pdf.jpg" style="height: 30px; width: 48px;" /></a></td>
                                                                <td class="center"><a href="<%# "../" + Eval("form_english_path") %>" target="_blank">
                                                                    <img src="assets/image/pdf.jpg" style="height: 30px; width: 48px;" /></a>
                                                                </td>
                                                            </tr>
                                                        </tbody>

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

My Forms.aspx.cs code is here:

protected void AllFormLoad()
        {
            try
            {
                using (SqlConnection con = new SqlConnection(strcon))
                {
                    SqlCommand cmd = new SqlCommand("spFormDetailsFetch", con);
                    cmd.CommandType = CommandType.StoredProcedure;
                    con.Open();
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    DataTable dt = new DataTable();
                    sda.Fill(dt);
                    rptr_form.DataSource = dt;
                    rptr_form.DataBind();
                }
            }
            catch (Exception ex)
            {
                Response.Write("<script>alert('" + ex.Message + "');</script>");
            }
        }

Sql Query

select D.ID, C.form_categoryname, D.form_details, D.form_no, D.form_bengali_path, D.form_english_path from tbl_form_details D inner join tbl_form_category C on D.form_categoryId = C.ID order by form_categoryname

erastl · Answer 1 · 2021-08-18T13:23:00.103

Sounds like you really need two nested loops here, one for categories and one for each category's details. You should add the SQL statement that is pulling the data to your question so we can tell for sure, but I'm guessing the duplication is because of the join.

This isn't a wonderful solution, but what I've done before in this scenario is to use the ItemDataBound event in codebehind to show the header only for the first row of each category. So you keep track of the category id somewhere, maybe in a hidden field, and as itemdatabound loops through the records, when the category id changes, you show the header for that item record, and then update the category id. Then as long as the category id stays the same, you keep hiding the header. When it changes again, you know you've hit the records for the next category and it's time to show the header again.

Below is a simplified example, note that you need to wrap a placeholder around the header and foot sections so you can hide them as needed. In your case that would be everything above and below the tr.

Repeater code:

<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
    <asp:PlaceHolder ID="pnlHead" runat="server">
        <section>
            <h2><%#DataBinder.Eval(Container.DataItem, "form_categoryname").ToString()%></h2>
    </asp:PlaceHolder>
    <div>
        <%#DataBinder.Eval(Container.DataItem, "form_details").ToString()%>
        <asp:HiddenField ID="HiddenFieldID" runat="server" Value='<%# DataBinder.Eval(Container.DataItem,"form_categoryname") %>' />
    </div>
    <asp:PlaceHolder ID="pnlFoot" runat="server">
        </section>
    </asp:PlaceHolder>
</ItemTemplate>
</asp:Repeater>

Page Load:

    public string CurrentCategory = "";
    
    protected void Page_Load(object sender, EventArgs e)
    {
        using (SqlConnection con = new SqlConnection(DB.GetDBConn()))
        {
            con.Open();
            using (IDataReader rs = DB.GetRS("select D.ID, C.form_categoryname, D.form_details, D.form_no, D.form_bengali_path, D.form_english_path from tbl_form_details D inner join tbl_form_category C on D.form_categoryId = C.ID order by form_categoryname", con))
            {
                Repeater1.DataSource = rs;
                Repeater1.DataBind();

            }
        }

        int idx = 0;
        // where head is visible, show the foot for the previous row
        foreach (RepeaterItem item in Repeater1.Items)
        {
            if (idx > 0)
            {
                bool headvisible = item.FindControl("pnlHead").Visible;

                if (headvisible)
                {
                    Repeater1.Items[idx - 1].FindControl("pnlFoot").Visible = true;
                }
            }
            idx++;
        }
    }

OnItemDataBound:

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        HiddenField HiddenFieldID = e.Item.FindControl("HiddenFieldID") as HiddenField;

        string itemCategory = HiddenFieldID.Value;

        if (itemCategory == CurrentCategory)
        {
            PlaceHolder pnlHead = e.Item.FindControl("pnlHead") as PlaceHolder;
            PlaceHolder pnlFoot = e.Item.FindControl("pnlFoot") as PlaceHolder;
            pnlHead.Visible = false;
            pnlFoot.Visible = false;
        }
        else
        {
            //Now we're in a new category, so show header
            PlaceHolder pnlHead = e.Item.FindControl("pnlHead") as PlaceHolder;
            PlaceHolder pnlFoot = e.Item.FindControl("pnlFoot") as PlaceHolder;
            pnlHead.Visible = true;
            pnlFoot.Visible = false;


            CurrentCategory = itemCategory;
        }
        
    }

please give the solution about ItemDataBound, how to implement. — Koushik Roy, Aug 18 '21 at 11:26
It is indeed your join that is causing the problem. I added some sample code to demonstrate how you can work with that sql and the itemdatabound event to get the result you want. — erastl, Aug 18 '21 at 13:25

How can fetch multiple table dynamically with table category (Header) and table content using asp.net c# webforms

1 Answers1