Дополнительная информация о клике:

Question

Я создаю сайт, на котором у меня будут изображения продуктов с изображениями на странице, название продукта и небольшой фрагмент текста описания продукта из моего sql database.

Я хочу, чтобы увидеть полную информацию о продукте, когда я нажимаю на название продукта, , как я могу это сделать?

Я не прошу свободного кода или чего-либо еще, я бы просто хотел, чтобы его указали в правильном направлении.

Также эти страницы продуктов следует добавлять динамически, когда я добавляю новый продукт в таблицу продуктов моей базы данных.

Answer 1

Для того, чтобы страница продукта добавлялась динамически, возможно, именно то, что вы ищете, это обработчик ASHX. Вы делаете одну .aspx-страницу, которая в общем случае отображает данные для данного продукта, когда он получает параметр. Затем обработчик ASHX работает следующим образом: он извлекает соответствующую часть URL-адреса, анализирует его для параметров, пересылает запрос на заданную страницу, передавая параметры, которые он извлекает, и, наконец, серверы содержимого страницы. Это довольно поверхностный вид одной из функциональных возможностей, которую предлагают такие обработчики, - но посмотрите на них.

Если вы хотите, чтобы информация о товаре отображалась как элемент страницы, которую пользователь просматривает сейчас, вместо перенаправления на новую страницу, вы можете использовать jQuery, чтобы добавить div (который вы можете стиль, чтобы выглядеть шарик или любой другой трюк). Внутри этого div у вас может быть iframe или просто panel, который вы можете динамически подавать данные о продукте.

Answer 2

Поместите данные о продукте в 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 быстрый демо, так что вы можете видеть, что это работает. Очевидно, что ваша реализация будет сложнее, но это должно заставить вас двигаться в правильном направлении. Удачи!

Answer 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"; 
    } 
    }   
}