I wish to create a very simple web app that simply displays an Image(s) from a database based upon either a date (from a calendar click event) or from a keyword search, getting the image(s) is no problem but I don't know how to display the resulting image. Preferably I would like to display the image in a table or grid or whatever, adjacent to the Calendar and TextBox on the same page that I used to get the search critera
So how to I stream an image to a page from a codebehind bitmap variable ?
Edit:
The database is a cloud database, so databinding is out.
Take a look at the DynamicImageHandler for ASP.NET up on the CodePlex ASP.NET Futures site:
http://www.hanselman.com/blog/ASPNETFuturesGeneratingDynamicImagesWithHttpHandlersGetsEasier.aspx
If you don't have the physical file on hand, try using:
Response.OutputStream.Write(bitmapbuffer, bitmapbuffer.Length)
I've done this in the past to dynamically serve pdfs and tifs, and it works quite nicely. You'll need to set your img's src attribute to contain the information you need. This web site has an example close to what you are looking for:
http://www.jigar.net/articles/viewhtmlcontent3.aspx
This isn't a good idea, since you don't know when to release the resource.
Rather, create a page (or a page handler, etc, etc) which will take the parameters you need in the querystring to perform the lookup in the database to get the image.
Then, in the handler, you load your image from the database and then stream the bytes back through the page.
In the original page, you set the src attribute of the img tag to the other page, with the appropriate parameters.
Related
I'm writing a small program that lets the user enter a keyword. The program then searches through a database table and finds all records (using LINQ) that match the user's search criteria.
The resulting records that are returned will be displayed on the screen as images (much like Googles image search page). The user will then be able to click on any of the returned images and be taken to a page with more detail about that image.
My question is, what is the best control to use to display the images that result from the user's initial search? This is an ASP.Net program. Would it be better to show the images in a gridview? Or a listview? Or build a table and fill each cell with an image button? I've never done this before so I'm basically just wondering how to present the data.
I'm not looking for code but I'd love to hear how you'd handle this.
Thanks!
EDIT:
I should add that all the images are the same size and I'm thinking that I'd return all images and let the user scroll down the page. Realistically, I don't think there would ever be more than 50 images for the user to choose from. I'm envisioning having five images on each row of results returned, like the below image:
I've always been a fan of keeping things simple by using a Repeater where I can. You'll have more control over how things will look writing for own HTML.
Since you're using images, and I assume they will be in different sizes, I'd make the Itemtemplate contain a div with an anchor and img inside of it. Slap a max width onto the images and hide the overflow on the div so the images don't look scrunched.
Just set the datasource property of what's returned from the filter, call a databind() and you're good to go.
That's how I'd approach this situation. I too am interested in hearing from others for comparison.
I'd go for the trusty Repeater control. That gives you the flexibility to render whatever you want for any collection.
I would create a control that builds a dynamic table control. You could have a List<string> to hold the url of each image. I would expose a public method called AddImage(string imageUrl) that would add the url to the List<string> collection.
Once the page is ready to be rendered, I would divide the number of images you have by 5 (this will give you the number of rows you need) and then just render the table. In addition, before rendering, you could use LINQ to get the data before render (for example, to sort it)
I have a MVC application in c#. I have a page which contains numbers of images. Once the page is loaded then all the images are being stored in the browser's cache. But when I change the image, it does replace the old images. Since the old and new image has the same name and the images are being fetched from the browser's caches. However, if I refresh the page with Ctrl+F5 then it renders the new images. Is there any way so that I can delete only that old image from the browser's cache? I can not delete all the cache of the browser, since its contains many images which should be cached. Only that images should be deleted from the cache which is getting changed.
Thank you very much for all of your replies. There are some point which I should mention here:
1. I can not use query string because that single page contains many section with different images and that particular image is rendering in the different sections.
2. I can not add the new guid or datetime with the image's url because if I do this then every time whenever page is being refreshed a new server call will happen and images will come from the server and that page rendering the same image in many places.
So to reduce the server call and to make the performance fast, I have to remove only that image from the browser cache.
Does the image have a unique value like a version or created datetime? If so you could add it to the filename or as a querystring. The browser would cache the images but a new value in the QueryString would request the new image.
One way to accomplish this is to append a query string on the image URL that changes when the image changes. A drop dead simple one is using:
'image.jpg?' + new Date().getTime()
That would give me a URL like this:
"image.jpg?1321626971855"
Now you could this more intelligently in your JavaScript by only changing the timestamp (or adding the timestamp) when the image is changed.
not possible without going through a whole lot of trouble, believe me, you really just want to hit ctrl+f5 here ;)
If your saving a new image, say for example a new profile image for the user, you can use a Guid.NewGuid() as the file name (or part of the file name) in order to guarantee a unique image that will be reloaded in the browser.
The source of my problem is my lack of experience with asp.net. I'm trying to display my videos in database as a html like table. Much like the main page of youtube or other video sharing websites.
To give more detail, I need to display small pictures that are linked to watch.aspx that are concerned of duration, name, users, and the thumbnail of the video.
Right now I'm creating a dynamic html table on the codebehind (programmatically creating href, div, img etc.. tags), resulting unnecessary more coding, a hard way to edit the design, less flexibility.
I know there are some nice controls that are being used in asp.net like gridview etc.. But I'm not experienced to select which or how to use.
Am I doing it the right way, or should I make them user controls, or use something like gridview, datalist, datatable?
More spesific, what is the best way to create the main page or search page of youtube on asp.net?
to give you a hint; this is what I'm asking about:
You may use DataList - ASP.NET Server control and set RepeatColumns=n property to display n columns per row.
DevExpress controls are also very good .... here is the link to their asp.net controls http://www.devexpress.com/Products/NET/Controls/ASP/
I can do this in Javascript by pulling a series of thumbnails as an array. Then I know when I'm on the first photo, or the last, and can show controls based on that.
How can this efficiently be done on the server side using C#/ASP.NET MVC 3(razor)? For example, on my site here, is one photo, out of 19 photos. I'd like to add next/prev functionality.
Do I have to pull the entire array of photos, parse out the current photo, determine if it's first or last, then build next/prev buttons?
When there is a photo gallery, there is One photo from many photos, and when there is a concept like x items from y items in which x < y, then we all think of paging. Photo gallery is almost like a grid with one item and two buttons for going to the next page and previous page. If you want to implement paging by yourself, there is no need to fetch all photos and compare them to the current photo to create next/previous buttons. All you have to do, is to cache current item index and the count of all photos, and on each rendering, calculate to see if you need to render next, previous, or next and previous buttons.
Making one complete page load per image is inefficient, slow and will send your visitors away of your site quickly.
I have recently creating a decently fast ASP.NET MVC photo gallery using the following techniques:
When the visitor clicks on a certain folder an ajax request is sent to the server requesting the folder's thumbnail collection (the data is returned in JSON format)
The thumbnails and other UI components are rendered using a model view view-model framework called Knockout.js (btw, it is great!). The information retrieved from the server is passed directly to the knockout binding model in JSON format, so you don't have to do any serialization or marshalling.
When the user clicks on a certain thumbnail, an ajax call is issued to the server, to retrieve a JSON object containing the image information: a) the main image URL c) next and prev images (if any) d) exif information c) comments for that image, etc.
Knockout.js knows how to render the prev and next arrows (if any), and all the other information to the UI view-model, so they refresh automatically.
If you combine that with some server side caching, you'll have a pretty fast photo gallery application.
Cheers!!
iván
You didn't specify a client technology, Silverlight, ASP.NET MVC, ASP.NET Webforms, WPF, Winforms..
The concept is as follows.
Choose a client /presentation technology
Decide where the photos are going to come from (Database, Webservice (Infront of a database)
Create methods to get next and previous photos for a specific series (Album, User, Globally)
Call these methods on a Forward or Backward (button/image) click.
You can get this going in several ways:
Create an aspx page which gets the first photo and create buttons that call this same aspx page, but with a query string of the next or prev photo, as needed. This solution will cause postbacks, so you need to decide if this works for you or not.
Create an aspx page which gets you a photo based on the query string and call it via jQuery ajax.
Create an ASHX file which returns a different image for a query string parameter and make it the SRC for the image.
These three methods allow you different levels of interactivity vs. postback. If you decide which route you would like to take, we can help you get there :)
I don't know why you go for this in C#. While doing it in C# i will use ajax call. For this i will load only the first image and Total image count initially.
According to the total count and current image no show the prev and next button.
On clicking the next and prev button take the corresponding image from db using ajax call.
I dont know how to use but there are many jquery plugins to show gallery
I am trying to implement an image gallery in ASP.NET./c#
I am displaying 6 thumbnails on my page. To display this I have decided to use ListView with an ItemTemplate containing an ImageButton control in it for each thumbnail that I would be displaying. I have a few questions:
Am I choosing the right controls? (there are options like DataList, repeater, etc)
I am reading from a sql server 2008 database that has image as varbinary type field. If I want to display this binary data as images in my thumnails then how should I go about this?
Ultimately I want to be able to display a large image when a thumbnail is clicked upon. How will I copy the URL of the thumbnail that is clicked?
Does anyone have a reference/demo/sample that I could use as a guide?
PLEASE remember that images are "binary" data in sql server and NOT files on a file system.
I can write the sql logic to pick the correct images in my sqldatareader or may be use a dataset instead. I want to proceed with my asp.net controls and its code behind where I am having these initial design issues like what controls to be used, how to add dynamically, etc.
You may also use Repeater but
ListView is more flexible from
layout perspective (not to mention
paging support). However, ImageButton for
displaying thumbnail is not a good choice,
I will suggest using image control (or img tag)
embedded in hyperlink (or achor tag) for the same.
You have to save image data from database to file system and then give those as URLs. Or you can write an http handler (aspx/ashx) that will stream image data from database and you will use handler path as URL for images. In either approach, you should use cache headers for better performance. From all things considered, I would tend to go with first approach for its simplicity.
Generally, you use markup such as
<a href="actual image URL" target="_blank" class="aLink">
<img src="thumbnail URL" alt="Click to see image" />
</a>
So anchor tag has path to actual Image url. Now, you have lot of java-script libraries (collectively called as lightbox) that you can use to show image gallary - see http://leandrovieira.com/projects/jquery/lightbox/, http://colorpowered.com/colorbox/, http://fancybox.net/ etc.
Above libraries will have demo/examples for generating gallery from client side. All you have to do from server side is to generate mark-up (html) illustrated in example - which is really simple using repeater/listview and data-binding syntax.