使用數據庫中的數據的動態HTML元素

Question

我目前正在嘗試創建一個網站，當使用下拉列表選擇某個品牌，型號，年份時，該網站會動態顯示項目。項目信息通過使用HtmlAgilityPack的網頁爬行來檢索。

所以我目前有一個數據庫表，充滿了成千上萬的項目，其中包含列：id，品牌，型號，年份，PartCategory，PartUrl，ImageUrl，PartBrand，PartName，PartPrice。

我試圖做的是將每個網站分隔成div，以便用戶可以輕鬆地分辨出他們正在查看的項目來自哪個站點。例如：

<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> 

我目前只使用三個站點總，我可以很容易地將數據拉入一個DataTable，然後看看有多少行被返回，所以這個數字將是我需要多少動態實例創建

。我很確定Jquery可以處理這個工作，但是我找不到任何使用DataTable的DataRows來控制動態部分的人的例子，通常是使用按鈕事件或類似的東西。

我想象中的代碼會是這個樣子：

//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 
} 

我一直工作在這一步了一段時間，所以我想我會後，看看是否任何人有任何提示或在類似的例子我繼續嘗試自己解決它。任何事情將不勝感激。乾杯!

Answer 1

我想通了，它很容易。

我的功能繼承人是如何設置

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); 
     } 
    } 

這裏怎麼樣了它目前顯示，我只需要弄清楚如何將它們付諸<div>其實如此，我可以樣式。