Develop Reference

ASP.NET WebForms: Image Sizemode in Repeater Control

Is it possible to display pictures with a non-square aspect ratio in a repeater control element?
I load images from a datatable with paths as strings.
But all images are stretched to 450px x 450px.
Code:
<div style="width: 500px; height: 500px; overflow: auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
<Columns>
<asp:TemplateField HeaderText="IMS-Bilder">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("Bild-Pfad")%>'
Width="450px" Height="450px" Style="cursor: pointer" ImageAlign="Middle" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
I miss the SizeMode property of WinForms :/
Maybe someone has a hint for me :)

In web forms, you'll probably want to handle image display with CSS. As you've seen, width and height properties will just force a specific value. There is also a property called ImageAlign, but I'm not sure how much that helps you. Otherwise its up to CSS pretty much.

CSS was the right keyword :)
I was able to fix the problem with my own css class:
.myImage {
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
height: 75%;
cursor: pointer;
}
and remove the (forced) height and width of the image/imagebutton:
<div style="width: 1000px; height: 1000px; overflow: auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
<Columns>
<asp:TemplateField HeaderText="IMS-Bilder">
<ItemTemplate>
<asp:Image CssClass="myImage" ID="Image1" runat="server" ImageUrl='<%# Eval("Bild-Pfad")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
Final look of the loaded pictures:
Thank you, #erastl :)

Gallery is not showing after uploading into live site using ASP.NET C#

Below I am calling my gallery using Datalist in localhost gallery is showing and live site not showing.
<asp:DataList ID="dlImages" runat="server">
<ItemTemplate>
<ul>
<li><a href="#cube">
<asp:Image ID="Image2" runat="server" class="cubeHide" ImageUrl='<%# Bind("ImageName", "/GalleryImages/{0}") %>' />
</a>
<div class="label_text">
</div>
</li>
</ul>
</ItemTemplate>
</asp:DataList>

1.Change ImageUrl from this:
ImageUrl='<%# Bind("ImageName", "/GalleryImages/{0}") %>'
To this:
ImageUrl='<%# Bind("ImageName", "~/GalleryImages/{0}") %>'
2.Make sure you have a folder called GalleryImages in the root of your website with the relevant image files.

I added simply ~ then resolve my issue:
ImageUrl='<%# Bind("ImageName", "~/GalleryImages/{0}") %>'

How to display it out without using the Mouse to highlight it?

Here is my designer code
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
</br>Product Name:<%#DataBinder.Eval(Container.DataItem,"ProductName") %>
</br>Quantity:<%#DataBinder.Eval(Container.DataItem,"Quantity") %>
</ItemTemplate>
</asp:Repeater>
</asp:Content>
When I run the program, the repeater details like product name and Quantity details will hidden it and only display when I use the mouse to highlight it.

Since you have set the background color of the body of the HTML document, then the repeater is just inserting text on top of that background, thus it is inheriting the background color of the body.
To control the background color of the Product Name and Quantity, put them inside of ASP.NET Label controls and then use CssClass to control their background color, like this:
<ItemTemplate>
<br/>
<asp:Label id="Label1" runat="server" CssClass="WhiteBackground"
Text="Product Name: " />
<asp:Label id="LabelProductName" runat="server" CssClass="WhiteBackground"
Text='<%#DataBinder.Eval(Container.DataItem,"ProductName") %>' />
<br/>
<asp:Label id="Label2" runat="server" CssClass="WhiteBackground"
Text="Quantity: " />
<asp:Label id="LabelQuantity" runat="server" CssClass="WhiteBackground"
Text='<%#DataBinder.Eval(Container.DataItem,"Quantity") %>'
</ItemTemplate>
CSS:
.WhiteBackground {
background-color: white;
}

Checkbox for images in an ASP.NET repeater control

I am working with ASP.NET. I am using a repeater to display images, and I also am using a check box for each image.
How can I select individual images and update their values as per image id?
My code is:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>

You could use javascript to implement this, something like this should do the trick:
Without jQuery
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
onclick="imageClickHandler(this,event);"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
function imageClickHandler(s,e){
//do something with the current image that is being clicked on.
//The parameter 's' is a reference to the caller of this method and the 'e' contains
//event data
}
With jQuery
If your using jQuery, you could also try something like this:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
class="handled"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
<script type="text/javascript" src="jquery-1.7.3"></script>
$(function(){
$("img.handled").click(function(){
//alerts the id of the image thats being clicked on.
alert($(this).attr("id"));
});
});

Jumping to external url from gridview template field

I need to jump from existing location to some other location. Like if my application is running on localhost, and i want to jump to Youtube.
Scenario:
I have a grid in which template field is asp:hyperlink. I need to add a image and on on that image click, i will get moved to youtube.
<a id="Download" href='<%#ResolveUrl(Eval("Path").ToString()) %>'
title="Download>>" style="color: #FFFFFF; font-size: 9pt">
<img src="~/images/dl.gif" style="border:0px; height:22px; width:22px"
alt="Download" runat="server"/></a>
<asp:HyperLink runat="server" ID="HyperLink1"
NavigateUrl='<%# ResolveUrl(Eval("YouTubeUrl").ToString()) %>'>
<img src="~/images/yt.gif" style="border:0px; height:22px; width:22px"
alt="Play on You tube" runat="server" /></asp:HyperLink>
I want to navigate some other location outside the current location from the current location.

Use this
<a id="Download" href='<%#ResolveUrl(Eval("Path").ToString()) %>'
title="Download>>" style="color: #FFFFFF; font-size: 9pt">
<img src="~/images/dl.gif" style="border:0px; height:22px; width:22px"
alt="Download" runat="server"/></a>
<asp:HyperLink runat="server" ID="HyperLink1"
NavigateUrl='<%# Eval("YouTubeUrl").ToString().Contains("http://")?Eval("YouTubeUrl"):"http://"+Eval("YouTubeUrl").ToString() %>'>
<img src="~/images/yt.gif" style="border:0px; height:22px; width:22px"
alt="Play on You tube" runat="server" /></asp:HyperLink>

You should use something like this:
<asp:HyperLink runat="server" ID="HyperLink1"
NavigateUrl='<%# string.Format("http://{0}", Eval("YouTubeUrl").ToString()) %>'>
If this ends up with two http:// at the start then change it to this:
<asp:HyperLink runat="server" ID="HyperLink1"
NavigateUrl='<%# Eval("YouTubeUrl").ToString() %>'>
Its not clear from what you've posted if the ResolveUrl call is breaking it or if your YouTube url contains the protocol at the start.