单击时显示其他详细信息
本文关键字:详细信息 其他 显示 单击 | 更新日期: 2023-09-27 18:31:43
我正在建立一个网站,我将有一个页面显示产品图像,产品名称和我sql database
中的一小段产品描述文本。
我希望在单击产品名称时能够看到产品的完整详细信息,我将如何执行此操作?
我不是在要求自由代码或任何我只想指向正确方向的东西。
此外,当我将新产品添加到数据库产品表时,应动态添加这些产品页面。
将产品详细信息放在Panel
中,并将其可见状态默认设置为 false。当用户单击图像/按钮/任何内容时,使用客户端代码显示产品详细信息面板。
这是一个快速而肮脏的例子:
<script type="text/javascript">
showDetails = function(){
var el = document.getElementById("productDetails");
if (el){
el.style.display = "block";
}
}
</script>
<!-- here is the equivalent of your image -->
<input type="button" value="Show Details" id="btnShowDetails" onclick="showDetails();" />
<!-- here is the equivalent of a panel containing the product details -->
<div id="productDetails" style="display:none;">
This is a cool product!
</div>
这是一个快速演示,因此您可以看到它的工作原理。显然,您的实现会更加复杂,但这应该会让您朝着正确的方向前进。祝你好运!
对于要动态添加的产品页面,您可能正在寻找的是ASHX
处理程序。您创建一个.aspx页面,该页面将在给定产品收到参数时通常显示其数据。然后ASHX
处理程序的工作方式如下:它获取 URL 的相关部分,解析其参数,将请求转发到给定页面,传递它提取的参数,最后服务器页面的内容。实际上,这是此类处理程序提供的功能之一的非常肤浅的外观 - 但请看一下它们。
如果您希望产品详细信息显示为用户当前正在浏览的页面的元素,而不是将它们重定向到新页面,您可以使用jQuery
添加div
(您可以将其样式设置为看起来像气球或任何其他噱头)。在该div
中,您可以有一个 iframe
,或者只是一个可以动态提供有关产品数据的panel
。
如果我这样做,我会通过路由来做到这一点 阅读更多
这里http://msdn.microsoft.com/en-us/library/cc668201.ASPX
反过来会看起来像这样
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
RouteTable.Routes.MapPageRoute("StoreRoute","Products/{ProductNumber}","~/Webpages/BookStore/ViewBookDemo.aspx");
}
int productnumber = Convert.ToInt(Page.RouteData.Values["ProductNumber"]);
if (productnumber != null)
{
if (ProductNumber == 1)
{
Image1.ImageUrl = "~/images/css.jpg";
}
else if (productnumber == 2)
{
Image1.ImageUrl = "~/images/django.jpg";
}
else if (productnumber == 3)
{
Image1.ImageUrl = "~/images/iphone.jpg";
}
else if (productnumber == 4)
{
Image1.ImageUrl = "~/images/Linq.jpg";
}
}
}