We Keep Coding

table with images refreshes on every update

I am attempting to create a table with a checkbox, an image, and an image title in each cell.
I created the table statically with no values in the cell items.
I then dynamically fill in each cell.
When I click a checkbox in the cell, the page flickers for the first 2 check boxes, then on the 3rd and subsequent clicks it repaints the whole table.
I added a RadScriptManager, but it appears to have had no effect.
I do nothing on the Page Load postback except load a few variables from the Session state.
This is part of my ASPX page.
<asp:Table ID="tblItems" runat="server" GridLines="Both" Width="98%" >
<asp:TableRow ID ="tr1" runat="server" Visible="false">
<asp:TableCell ID="tcR1C1" runat="server">
<asp:CheckBox ID="cbR1C1" runat="server"
OnCheckedChanged="cb_CheckedChanged" AutoPostBack="true" />
<asp:Label ID="lblR1C1" runat="server" />
<br />
<asp:Image ID="imgR1C1" runat="server" Width="200px" Height="200px" />
</asp:TableCell>
this is part of my initial load page
lbl.Text = lProducts.Products[iCurrentProduct].title;
img.ImageUrl = lProducts.Products[iCurrentProduct].image.src;
I am initially loading the object from an http://. Not sure if that is the issue. I could get each item locally as an image, then put it in the table, but I think the table should not be updating all the time - I thought that is what the RadScriptManager was supposed to do?

How do I display an image in a web form in asp.net Visual Studio?

I have created an image folder in my root project folder
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/" />
I am linking my images here:
if (dropDownList.SelectedItem.Value == "Picture 1")
{
Image1.ImageUrl = "~/images/picture1.jpg"
}
When I visit the web page I get a small img box with an x instead of my image.

<asp:Image ID="Image1" runat="server" ImageUrl="~/images/" />
is setting the url to a directory (folder), not an image. That's why you're getting the small image-box and not an image.
If you want an image to show up when the page loads, set it to a valid image:
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/picture1.jpg" />

<asp:Image ID="Image1" runat="server" ImageUrl="~/images/" />
This line of code is setting an invalid image url as it only contains the folder path. So in your code you must ensure that you override the Image1's ImageUrl property to valid image file. Based on your requirement here is something you can do.
In aspx page, set the image url to picture1.jpg assuming that option1 is selected by default in the dropdown so picture1.jpg will be displayed on initial page load.
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/picture1.jpg" />
Next, set the AutoPostBack property of your dropdown to true so that image source code can be updated dynamically based on dropdown selected value
<asp:DropDownList
ID="DropDownList1"
runat="server"
AutoPostBack="true"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>
In selectedIndexChanged event handler update image source based on the selectedItem
protected void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)
{
Image1.ImageUrl = "~/images/" + DropDownList1.SelectedItem.Value;
}
Hope this helps

It was displaying the small image box with X as it was not able to find the image at the path specified.
So, Add you images folder in wwwroot folder instead of Project root.
After that you can use <asp:Image ID="Image1" runat="server" ImageUrl="~/images/picture1.jpg" />
for rest you can follow Mohsin's answer

Try to use .Scr instead of ImageUrl.

how to pass image from one page to another in asp.net

I get image by image-handler in first page and how to pass into second page
The .aspx page is like
<asp:Image ID="Image1" runat="server" Height="250px" Width="290px"
ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("idnews") %>' />

Just pass the name of the image on the second page and set the same on the second page.

Try this code and implement according to your code
<asp:HyperLink
ID="lnkImage" runat="server"
ImageUrl='<%# Eval("productid","~/Handler.ashx?productid={0}") %>'
NavigateUrl='<%# Eval("productid","ProductLarge.aspx?productid={0}")' />
and markup in ProductLarge.aspx should be,
<img src='Handler.ashx?productid=<%=Request["productid"] %>' alt='Large Image' />

You are fetching image from database, so its not very big deal. You can just pass the Image id via Query string or other method and can display image as u display it on previous page.

ASP NET image onmouseover not working

I have 2 images in my page. What i want to do is, when i move the mouse over 2nd image, the first image will change to other image, but something is not working.
Code:
<asp:Image ID="imgProduct" runat="server" ImageUrl="~/Images/1.png" />
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/2.png" onmouseover="imgProduct.src='Images/2.png';"/>
If i change the ID in onmouseover="imgProduct.src= to any image id in masterpage, that image is changing correctly, but its not working in the default page.
Any suggestions?

On Page_Load event add this line.
Image2.Attributes.Add("onmouseover",imgProduct.ClientID+".src='Images/2.png'");

Try this instead :
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/2.png"
onmouseover="javascript:document.getElementById('imgProduct').src=this.src;" />
Good Luck !!

Best practice for having programmatically created UpdatePanel expand to fill parent container?

In doing some reworking of my web application I encountered the following issue:
Although an ASP UpdatePanel does not have a height property it does not automatically expand to fill its parents container. Instead, it grows with its children's dimensions. In my scenario, the child does not have dimensions -- it should expand to fill its parents container. This causes both the UpdatePanel and its child to have very small heights.
Before I had:
[Parent Container] -> [Child Container] with both ParentContainer and ChildContainer's height property unset so that they will fill containers higher up in the hierarchy.
Now I have:
[Parent Container] -> [Update Panel] -> [Child Container]. Parent Container's dimensions are not guaranteed to be non-empty, so I am unable to programatically set ChildContainer's dimensions in all cases. As such, I would like my UpdatePanel to work in the same fashion as the controls it is wrapped around.
Is my best bet to go into the CSS and do something like:
.UpdatePanel
{
height: 100%;
}
or do I have other, cleaner options available to me? I am creating these controls server-side, so I don't have the opportunity to wrap them in divs (nor do I want to).
EDIT:
I (can't?) use Panel instead of UpdatePanel because I would like to use the functionality of being able to update conditionally. I have a timer on my page which calls UpdatePanel.Update() on controls -- this functionality does not exist in panel AFAIK.
The body of my page is height: 100% and here is the static structure hierarchy.
The location where RadPane2 is declared is where an UpdatePanel will be slipped in. It needs to be between the RadPane and the CormantRadDockZone controls. This is only the 'base' implementation, however. Users have the ability to stack more RadPane/UpdatePanel/CormantRadDockZone 1:1:1 contents onto the page. As such, I have UpdatePanels being generated dynamically -- which means I can't apply the CSS to just an UpdatePanel's ID.
<telerik:RadSplitter ID="RadSplitter2" runat="server" BorderSize="0" Height="100%" HeightOffset="155" Skin="Web20" Width="100%" PanesBorderSize="0">
<telerik:RadPane ID="RadPane_DefaultExpand" runat="server" CssClass="allRoundedCorners" Scrolling="None">
<telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0">
<telerik:RadPageView ID="RadPageView1" runat="server">
<telerik:RadSplitter ID="RadSplitter1" Runat="server" BorderSize="0" Height="100%" Skin="Web20" Width="100%">
<telerik:RadPane ID="RadPane1" Runat="server" CssClass="leftRoundedCorners" Scrolling="None" Width="20px">
<telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True" Width="20px">
<telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/configuration.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Configuration" Width="160px" EnableDock="False">
<telerik:RadListBox ID="lstBxSettings" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" ondropped="LstBxSettings_Dropped" Skin="Web20" Width="100%" onclientdropped="OnClientDropped">
<Items>
<telerik:RadListBoxItem Text="Horizontal Bar" Value="Horizontal"/>
<telerik:RadListBoxItem Text="Vertical Bar" Value="Vertical" />
</Items>
</telerik:RadListBox>
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" IconUrl="~/Content/Dashboard/Icons/chart.png" TabView="ImageOnly" BackColor="#ECF4FD" MinWidth="160" Scrolling="Y" Title="Custom Widgets" Width="160px" EnableDock="False">
<telerik:RadListBox ID="lstBxCustom" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/historical.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Historical Widgets" Width="160px" EnableDock="False">
<telerik:RadListBox ID="lstBxHistorical" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="RadSlidingPane4" Runat="server" IconUrl="~/Content/Dashboard/Icons/settings_global.png" onclientbeforeexpand="ShowDashboardGlobalSettings" TabView="ImageOnly" EnableDock="False" />
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners" Scrolling="None" onclientresized="OnClientResized">
<cc1:CormantRadDockZone ID="RadDockZone1" runat="server" />
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadPane>
</telerik:RadSplitter>

UpdatePanel will translate to a div or span on client side so as long as you set the css class properly, this should work. Going via CSS is the cleanest approach.
Here's how you can set the css class (if you want to use this in a css file, make sure you've PerformSubstitution set to true):
#<%=UpdatePanel1.ClientID%> {
height: 100;
}
Also, based on browser type, you may have to reset margin and padding to 0.
Make sure that the UpdatePanel's parent has height set too.
Update: use a Panel to wrap UpdatePanel (not substitute it)
<asp:Panel ID="Panel1" runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</asp:Panel>
Noticed RadPane has a CssClass property so you can just add it there.
<telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners myCssClass" Scrolling="None" onclientresized="OnClientResized">
<cc1:CormantRadDockZone ID="RadDockZone1" runat="server" />
</telerik:RadPane>