I'm hoping someone can help me with a question I have about images and GridView controls in ASP.Net 2.0.
I'm trying to put together a photo album application as a learning exercise which uses a GridView control with two columns. Column one will display the image (using an image column type) based on a URL held in the database I am using while column two will display some details about the image such as date, time, location, people etc.
This seems to works ok at the moment, however all the images are of the same size regardless of their orientation (portrait\landscape) which means that only some of the photos appear properly and no all crushed up. Is there a way to adjust the properties of the image column so that it will always show the photo correctly based on its orientation? Or a reduced size while maintaining the aspect of the image?
I have no experience with the ImageField column type I assume you are using.
You could certainly just use a TemplateField and an img tag (without specifying width or height) to address this.
<asp:TemplateField>
<ItemTemplate>
<img src='<%# Bind("URLFromDB") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
You can query the image properties, then change your picture container accordingly. This will need to be done in the RowDataBound event.
Related
My images are stored in a SQL database. I bind to the table and use the generated image control and a ashx handler. No problem. I now have the thumbnail image surrounded by a anchor tag. The problem come in finding the large image thats in a hidden div and display ONLY that.. I don't want a gallery just that one image. If you are reading this you know that datalists when generating their controls assigns mangled ID's to their components. How can I address that image from my thumbnail image?
<asp:DataList ID="datalist" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
<ItemTemplate>
<a class="colorme" href="#">Actual thumbnail image</a>
<div style="display:none">
<div id="colorme" runat="server">Actual image to display
</div>
</div>
</ItemTemplate>
</asp:DataList>
ASP.NET 4.0 no master page.
Assign ID and run at server for your Image and use
<%= yourimage.ClientID %> this will return that particular image wherever you'll use it..not the mangled IDs generated by Datalist control.
The simplest solution would be to use jQuery, and find the element using the next-sibling selector.
$(".colorme").click(function(){
$(this).find("~ div").show();
});
This would work no matter how many images you have on the page.
I am trying to create a specific aspx page where I display clickable links based on information in a sql database. For example one column could be the anchor tag another column could be the path to the link itself etc. In the past I would pull this information from sql and put it into a non-visible Label (say linkLabel1). Then in the page itself I would insert <%linkLabel1.text%> to insert the link path from the database to the appropriate area.
I hope I'm not confusing things too much here and that makes sense how I explained it.
What I would like to do is set up a way that I could simply enter a new row into a SQL table with link information and a web page automatically displays the new link for me.
I guess I am mostly looking for insight, opinions, or directions of what approach to consider. I can elaborate if I was unclear (wouldn't be awfully surprising if I was not).
Thanks in advance for anyone's time on this matter.
Since you are displaying this in a table, you could use a GridView for this. The columns that will display the link could be defined as hyperlink columns as so:
<Columns>
<asp:HyperLinkField
HeaderText="Header text"
DataNavigateUrlFields="PropertyContainingTheHRefForTheAnchor"
DataTextField="PropertyContainingTheTextForTheAnchor"
/>
</Columns>
So for example, if you return a record set containing these columns:
TextProperty PathProperty
See Details Assets/SomeOther/
Click me Products/AnotherPath/
Your grid will render these as:
See Details
Click me
If you define the column as:
<Columns>
<asp:HyperLinkField
HeaderText="Header text"
DataNavigateUrlFields="PathProperty"
DataTextField="TextProperty"
/>
</Columns>
I have a gallery which holds a large number of thumbnail images and I want to show 6 at a time.
I have this working using the code below, but I can not get the images to display as 2 rows of 3 - it shows as 6 rows of 1.
I can get the desired result by using a datalist but that stops the pageindex function from working.
I'm sure there's an easy solution but I can't figure it out.
<asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="True" PageSize="6" onpageindexchanging="PageIndexChanged" PagerSettings-Mode="NextPrevious" PagerSettings-NextPageText="Next" PagerSettings-PreviousPageText="Previous">
<Columns>
<asp:TemplateField>
<itemtemplate>
<asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("userID", "/imageUpload/Handler.ashx?userID={0}&image=2")%>' ></asp:Image>
</itemtemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You want to use a ListView.. Look at MSDN here: http://msdn.microsoft.com/en-us/library/bb398790.aspx
Most particularly the GROUPING option.
You might want to consider using a simple asp.net repeater control, and render your items as DIVs. You can use CSS "float" directive to cause your DIVs to automatically "wrap" within their container, to efficiently fit the space (very similar to the way text "wraps" within a text box when it reaches the end of the line).
Because they wrap dynamically, float'd DIVs can be a little more user-friendly: if your user has a wide high-resolution screen, maybe the images render as a 1x6 row. If your user shrinks their browser window, the DIVs will automatically re-arrange themselves into a 3x2 grid.
You wouldn't get data-paging behavior for free, but it's not difficult to implement on its own.
You'd probably be happier with a different control (repeater, etc.)... Gridviews are limited in that they match your datasource row-for-row.
If you have to do this in a gridview for some reason, one option would be to modify the SELECT in your data source so that it put your images into 3 columns. You might be able to do that with a pivot and rownumber() function, or other ways. Once you did that, you'd modify your grideview (copy your template column two more times).
suppose my images binary data is saved in database table and i want to show those images through gridview. one approach is just create one page where i will pass some id as query string and that page will retrieve the image data from db and stream down the image data to my page through BinaryWrite method. a example is http://www.aspdotnetcodes.com/Insert_Images_Database.aspx. this url describe how to show image data through BinaryWrite.
this approach is old and i know. is there any other way by which i can show the image in gridview but i don't want to store image url in table.please let me know if you know any other approach for showing the images through gridiview when image binary data is stored in db. thanks
I asked a similar question here:
Streaming Databased Images Using HttpHandler
Note that I had to use a DataReader in my final version :-)
It sounds like you've got your images stored in your database in binary format. You then want to show them in your GridView.
Consider this approach:
create a template field in your gridview to hold your image. It'll end up calling a handler URL to grab the binary data for your image.
create the image handler page -- make it an .ashx. Put a unique identifier on the querystring, for example, to grab the image you want from the database
<Columns>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Height="80px" Width="80px"
ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID")
%>'/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
See the answer at the bottom of this MSDN question for more details on how to implement your image handler. You then won't have to bring back the binary data when binding your GridView. On the other hand, it creates n calls to the handler for each row in the grid.
I receive a certain image name in a boundfield (i have two images in the same folder) and it comes from testing in the codebehind and binding a datatable into this gridview.
example:
it comes as "image1.jpg" or "image2.jpg"
I'd like this text not to be displayed, instead, i want these images that are in
/folder1/folder2 of my solution (i access images like this, and it works)
either i transform it into html tag...
<img src='/folder1/folder2/image1.jpg' border='0'>
(that's the reason for the first question i've made)
...OR I create an asp image somehow inside the boundfield.
Is there any way to do so ?
I've used:
<asp:Literal runat="server" Text="<%#Eval("myField")%>" />
Inside a templatefield