datalist and frames
-
I have a datalist which is filled with different product images with product ID's. What I would like to happen is when the user clicks on an image, a bigger picturre along with a description and price of product is displayed on the same page. Do i need to use a frame to do this or is their any other way it can be achieved? I've been scratching my head for ages now....Please help!!!! Thanks in advance!;)
-
I have a datalist which is filled with different product images with product ID's. What I would like to happen is when the user clicks on an image, a bigger picturre along with a description and price of product is displayed on the same page. Do i need to use a frame to do this or is their any other way it can be achieved? I've been scratching my head for ages now....Please help!!!! Thanks in advance!;)
Hi there, Because using frames is not my favourite choice, so if I were you, I would not choose frames. In my humble opinion, there are a couple of ways for doing that: + You can use a Web user control to display the product details, and when the user clicks an image, the page posts back and you can add some code to load that control which can be displayed below/above the datalist. + You can use a seperate page to diplay the product details only, then when the user clicks an image he will be redirected to that page.
-
Hi there, Because using frames is not my favourite choice, so if I were you, I would not choose frames. In my humble opinion, there are a couple of ways for doing that: + You can use a Web user control to display the product details, and when the user clicks an image, the page posts back and you can add some code to load that control which can be displayed below/above the datalist. + You can use a seperate page to diplay the product details only, then when the user clicks an image he will be redirected to that page.
Thanks for the update, Im gonna try the first option, just wondered if you could guide me a bit further. here goes At the moment I have the images pointing to the different productID page i.e. www.glass.aspx?ProductID=100 (for example) can I use this to then post back to the SAME form and use it to populate the correct data in the specific web control ID's eg Image control, label control etc. Do you know of any example code or tutorials where this is explained? Hope this makes sense Cheers. Jetset
-
Thanks for the update, Im gonna try the first option, just wondered if you could guide me a bit further. here goes At the moment I have the images pointing to the different productID page i.e. www.glass.aspx?ProductID=100 (for example) can I use this to then post back to the SAME form and use it to populate the correct data in the specific web control ID's eg Image control, label control etc. Do you know of any example code or tutorials where this is explained? Hope this makes sense Cheers. Jetset
Hi there, You can take a look at the sample code below which demonstrates how to load the product details when the user selects a product: + The markup in the web form is quite simple:
<asp:DataList id="DataList1" runat="server">
<ItemTemplate>
<asp:Label Runat="server">
<%# DataBinder.Eval(Container, "DataItem.Name") %>
</asp:Label>
<asp:ImageButton Runat="server" CommandName="ShowProductDetail"
ImageUrl="Images/productImage.gif"></asp:ImageButton>
</ItemTemplate>
<AlternatingItemTemplate>
<asp:Label Runat="server" ID="Label1">
<%# DataBinder.Eval(Container, "DataItem.Name") %>
</asp:Label>
<asp:ImageButton Runat="server" CommandName="ShowProductDetail"
ImageUrl="Images/productImage.gif" ID="Imagebutton1"></asp:ImageButton>
</AlternatingItemTemplate>
</asp:DataList>
<br>
<asp:PlaceHolder Runat="server" ID="proDetailHolder"></asp:PlaceHolder>Here, I am using an image button for each product with a fixed url, you are required to provide some code to load the image for each product accordingly. The CommandName of the button is 'ShowProductDetail'. + The sample code in code-behind looks something like this:
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
DataList1.DataSource = CreateProductList();
//I keep this value to determine which product to show later when the user clicks the image.
DataList1.DataKeyField = "ProductID";
DataList1.DataBind();
}
}//Create an event handler for the ItemCommand event of the DataList control.
private void DataList1_ItemCommand(object source, System.Web.UI.WebControls.DataListCommandEventArgs e)
{
if(e.CommandName == "ShowProductDetail")
{
ViewProductID = (int)DataList1.DataKeys[e.Item.ItemIndex];LoadProductDetail(); }}
private int ViewProductID
{
get
{
if(ViewState["ViewProductID"]==null)
return -1;return (int)ViewState\["ViewProductID"\]; } set { ViewState\["ViewProductID"\] = value; }}
private void LoadProductDetail()
{
if(ViewProductID >= 0)
{
ProductDetail proDetailCtrl = LoadControl("Controls/ProductDetail.ascx") as ProductDetail;
proDetailCtrl.ProductID = ViewProductID;
proDetailHolder.Controls.Add(proDetailCtrl);
}
}Because the control is dynamically loaded,
-
Hi there, You can take a look at the sample code below which demonstrates how to load the product details when the user selects a product: + The markup in the web form is quite simple:
<asp:DataList id="DataList1" runat="server">
<ItemTemplate>
<asp:Label Runat="server">
<%# DataBinder.Eval(Container, "DataItem.Name") %>
</asp:Label>
<asp:ImageButton Runat="server" CommandName="ShowProductDetail"
ImageUrl="Images/productImage.gif"></asp:ImageButton>
</ItemTemplate>
<AlternatingItemTemplate>
<asp:Label Runat="server" ID="Label1">
<%# DataBinder.Eval(Container, "DataItem.Name") %>
</asp:Label>
<asp:ImageButton Runat="server" CommandName="ShowProductDetail"
ImageUrl="Images/productImage.gif" ID="Imagebutton1"></asp:ImageButton>
</AlternatingItemTemplate>
</asp:DataList>
<br>
<asp:PlaceHolder Runat="server" ID="proDetailHolder"></asp:PlaceHolder>Here, I am using an image button for each product with a fixed url, you are required to provide some code to load the image for each product accordingly. The CommandName of the button is 'ShowProductDetail'. + The sample code in code-behind looks something like this:
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
DataList1.DataSource = CreateProductList();
//I keep this value to determine which product to show later when the user clicks the image.
DataList1.DataKeyField = "ProductID";
DataList1.DataBind();
}
}//Create an event handler for the ItemCommand event of the DataList control.
private void DataList1_ItemCommand(object source, System.Web.UI.WebControls.DataListCommandEventArgs e)
{
if(e.CommandName == "ShowProductDetail")
{
ViewProductID = (int)DataList1.DataKeys[e.Item.ItemIndex];LoadProductDetail(); }}
private int ViewProductID
{
get
{
if(ViewState["ViewProductID"]==null)
return -1;return (int)ViewState\["ViewProductID"\]; } set { ViewState\["ViewProductID"\] = value; }}
private void LoadProductDetail()
{
if(ViewProductID >= 0)
{
ProductDetail proDetailCtrl = LoadControl("Controls/ProductDetail.ascx") as ProductDetail;
proDetailCtrl.ProductID = ViewProductID;
proDetailHolder.Controls.Add(proDetailCtrl);
}
}Because the control is dynamically loaded,
-
Very much appreciated! but i dont suppose you have the code in vb? Sorry to be a pain! but I think im getting their! (Thanks to your good self!) Cheers Jetset
C# is always my favourite choice :), the sample code is quite simple, you can use one of the tools available out there to convert code from C# to VB.NET, you can see here: http://www.google.com/search?hl=vi&c2coff=1&q=convert+c%23+to+vb.net&btnG=T%C3%ACm+ki%E1%BA%BFm&meta=[^] To create event handlers in VB.NET you can take a quick look at this: Server Event Handling in Web Forms Pages[^]
-
C# is always my favourite choice :), the sample code is quite simple, you can use one of the tools available out there to convert code from C# to VB.NET, you can see here: http://www.google.com/search?hl=vi&c2coff=1&q=convert+c%23+to+vb.net&btnG=T%C3%ACm+ki%E1%BA%BFm&meta=[^] To create event handlers in VB.NET you can take a quick look at this: Server Event Handling in Web Forms Pages[^]