在点击时显示其他详细信息？答案

【问题标题】：Displaying additional details on click?在点击时显示其他详细信息？
【发布时间】：2013-09-21 03:32:37
【问题描述】：

我正在建立一个网站，我将在该网站上显示来自我的sql database 的产品图片、产品名称和一小段产品描述文本。

我希望在单击产品名称时能够看到产品的全部详细信息，我该怎么做？

我不是要免费代码或任何我想指出正确方向的东西。

当我将新产品添加到我的数据库产品表时，这些产品页面也应该动态添加。

【问题讨论】：

DB 是否将“一小段产品描述”作为单独的字段，或者它是“完整详细信息”的一部分？
你是用MVC，还是直接用ASP.NET？
数据库有完整的描述，没有单独的字段
我直接使用 asp.net 和 c#，我只是“创建空网站”

标签： c# asp.net sql dynamic

【解决方案1】：

将产品详细信息放在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>

here 是一个快速演示，因此您可以看到它的工作原理。显然你的实现会更复杂，但这应该会让你朝着正确的方向前进。祝你好运！

【讨论】：

我想我会选择一个小组:)

【解决方案2】：

对于要动态添加的产品页面，您可能正在寻找ASHX 处理程序。您制作了一个 .aspx 页面，当它接收到参数时，该页面通常会显示给定产品的数据。然后ASHX 处理程序的工作方式如下：它获取 URL 的相关部分，解析它的参数，将请求转发到传递它提取的参数的给定页面，最后处理页面的内容。实际上，这是对此类处理程序提供的功能之一的非常肤浅的外观 - 但请看一下它们。

如果您希望产品详细信息显示为用户当前正在浏览的页面的元素，而不是将它们重定向到新页面，您可以使用jQuery 添加div（您可以设置看起来像气球或任何其他噱头）。在div 中，您可以有一个iframe，或者只是一个panel，您可以动态提供有关产品的数据。

【讨论】：

【解决方案3】：

如果我会这样做，我会通过路由在此处阅读更多内容来做到这一点
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";
    }
  }         
}

【讨论】：