Dynamic HTML Elements using data from a Database

Question

I am currently trying to create a website that dynamically displays items when a certain Make, Model, Year is chosen using dropdown lists. The item information was retrieved using web crawling which utilized the HtmlAgilityPack.

So I currently have a database table that is full of thousands of items which contain the columns: id, Make, Model, Year, PartCategory, PartUrl, ImageUrl, PartBrand, PartName, PartPrice.

What I'm attempting to do is separate each site into divs so the user can easily tell which site the item they are looking at is from. Example:

<div id="siteOne">
  <table>
    <tr>
      <td>
        <img url="ImageUrl">
        <a href="PartUrl">PartBrand & PartName & PartPrice</a>
      </td>
    </tr>
    <tr>
      <td>
        <img url="ImageUrl">
        <a href="PartUrl">PartBrand & PartName & PartPrice</a>
      </td>
    </tr>
  </table>
</div>
<div id="siteTwo">
  .............
</div>
<div id=""siteThree>
  .............
</div>

I am currently only using three sites total, and I can easily pull the data into a DataTable and then see how many rows were returned, so that number will be how many dynamic instances I need to create. I'm pretty sure Jquery can handle this job, however I cannot find any examples of people using a DataTable's DataRows to control the dynamic part, usually it is with a button event or something of the sort.

I imagine the code will look something like this:

//this foreach statement will be in the last dropdown list's SelectedIndexChanged event
//when the last dropdown is chosen, a datatable will be returned with all the items that match that particular make/model/year
foreach (DataRow tempRow in tempDataTable)
{
  //this should pull data from each column one at a time
  //column: 0 = id, 1 = Make, 2 = Model, 3 = Year, don't think I'll need these right now
  string partCategory = tempRow[4].ToString();
  string partUrl = tempRow[5].ToString();
  string imageUrl = tempRow[6].ToString();
  string partBrand = tempRow[7].ToString();
  string partName = tempRow[8].ToString();
  string partPrice = tempRow[9].ToString();

  //this is where the jquery would generate the dynamic elements in the table. 
  //three main divs can be hard coded for now, only using 3 sites currently
  //this means the <table></table> in each will most likely be hard coded as well
  //the <tr></tr>, <td></td>, <img>, and <a></a> will need to be generated dynamically each loop iteration
}

I've been working on this one step for a while so I figured I would post to see if anyone had any tips or similar examples while I continue to try and solve it myself. Anything would be greatly appreciated. Cheers!

Kevin D · Accepted Answer · 2017-04-25 18:24:20Z

I figured it out, and its quite easy.

heres how my function is setup

    protected void drpdwnYear_SelectedIndexChanged(object sender, EventArgs e)
    {
        //get the data for the specific make/model/year from the database
        DataTable dt = new DataTable();
        string tempYear = drpdwnYear.SelectedItem.ToString();
        string tempManufacturer = Globals.myManufacturer;
        string tempModel = Globals.myModel;
        Globals.myQuery = "SELECT * FROM CrawlerInfo WHERE Model = '" + tempModel + "' AND Year ='" + tempYear + "'";
        try
        {
            using (SqlConnection con = new SqlConnection(Globals.myConStr))
            {
                using (SqlCommand cmd = new SqlCommand(Globals.myQuery, con))
                {
                    using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                    {
                        da.Fill(dt);
                    }
                }
            }
        }
        catch (Exception ex)
        {
            handleTheError(ex);
        }

        //put the data into HTML elements
        try
        {
            int tempflag = 0;
            foreach (DataRow tempRow in dt.Rows)
            {
                string tempCategory = tempRow[4].ToString();
                string tempPartUrl = tempRow[5].ToString();
                string tempImageUrl = tempRow[6].ToString();
                string tempPartBrand = tempRow[7].ToString();
                string tempPartName = tempRow[8].ToString();
                string tempPrice = tempRow[9].ToString();
                string tempStoreName = tempRow[10].ToString();

                Image tpImg = new Image();
                tpImg.ID = "id_img_" + tempflag;
                tpImg.ImageUrl = tempImageUrl;
                Page.Controls.Add(tpImg);

                HyperLink hyp = new HyperLink();
                hyp.ID = "id_link_" + tempflag;
                hyp.NavigateUrl = tempPartUrl;
                hyp.Text = tempPartBrand + " " + tempPartName + ": " + tempPrice + "\n\n";
                Page.Controls.Add(hyp);
                tempflag++;
            }
        }
        catch (Exception ex)
        {
            handleTheError(ex);
        }
    }

and here hows it displays currently, I just need to figure out how to put them into <div>s so I can style them.

Collectives™ on Stack Overflow

Dynamic HTML Elements using data from a Database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related