Javascript 使用数据库数据的动态HTML元素
我目前正在尝试创建一个网站,当使用下拉列表选择某个品牌、型号、年份时,动态显示项目。项目信息是通过使用HtmlAlityPack的web爬行检索的 因此,我目前有一个数据库表,其中包含数千项:id、Make、Model、Year、PartCategory、PartUrl、ImageUrl、PartBrand、PartName、PartPrice 我试图做的是将每个站点分成几个div,这样用户就可以很容易地分辨出他们正在查看的项目来自哪个站点。例如:Javascript 使用数据库数据的动态HTML元素,javascript,c#,jquery,html,css,Javascript,C#,Jquery,Html,Css,我目前正在尝试创建一个网站,当使用下拉列表选择某个品牌、型号、年份时,动态显示项目。项目信息是通过使用HtmlAlityPack的web爬行检索的 因此,我目前有一个数据库表,其中包含数千项:id、Make、Model、Year、PartCategory、PartUrl、ImageUrl、PartBrand、PartName、PartPrice 我试图做的是将每个站点分成几个div,这样用户就可以很容易地分辨出他们正在查看的项目来自哪个站点。例如: <div id="siteOne">
<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
}
//此foreach语句将位于最后一个下拉列表的SelectedIndexChanged事件中
//选择最后一个下拉列表时,将返回一个数据表,其中包含与特定品牌/型号/年份匹配的所有项目
foreach(tempDataTable中的DataRow tempRow)
{
//这应该一次从每一列中提取一个数据
//列:0=id,1=Make,2=Model,3=Year,我想我现在不需要这些
字符串partCategory=tempRow[4].ToString();
字符串partUrl=tempRow[5].ToString();
字符串imageUrl=tempRow[6].ToString();
字符串partBrand=tempRow[7].ToString();
字符串partName=tempRow[8].ToString();
字符串partPrice=tempRow[9].ToString();
//这是jquery生成表中动态元素的地方。
//目前,三个主要div可以硬编码,目前仅使用3个站点
//这意味着每个中的最有可能也是硬编码的
//每次循环迭代都需要动态生成、、和
}
我在这一步上已经做了一段时间了,所以我想在我继续尝试自己解决问题的同时,我会发布帖子,看看是否有人有任何提示或类似的例子。任何事情都将不胜感激。干杯 我想出来了,而且很简单 下面是我的函数是如何设置的
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);
}
}
这里是它当前的显示方式,我只需要弄清楚如何将它们放入
中,这样我就可以对它们进行样式化。