ASP.NET - Displaying a Row/Grid of ImageButtons
I'm working on my first asp.net/web development application. Obviously, I'm very new to asp.net development, but I've been doing C# for quite some time and so can rationalize out the logic of the project pretty easily. However, I'm struggling with some markup issues I'm working on. Here's my situation:
I have a List of Book objects and each object has a Title and CoverImage property. Okay. I want to display each book as an ImageButton with a border that'll change colors to 'highlight' the one a user clicked. Actually, this doesn't have to be done with an ImageButton, but that's what I've been attempting to use up to this point. Users can only have one book selected at a time. Now, I think I can handle the logic of 'radio-buttoning' the books, however, I'm struggling to figure out how to properly display these 'buttons'. Finally, there will be a normal button below the grid of books that will allow users to submit their selection and I need to make sure I can determine exactly which book is selected (perhaps by getting the Title of the Book object selected?). This is another area where I've been having trouble as I've attempted to do this with a GridView.
Using a GridView control, I've found that by binding a List to the GridView, I can only do a row for each Book rather than a "column" for each. At least, using the only methods I know at this time. Also, I need the UI to be 'smart' enough to dynamically change the number of Books displayed in a row based on the image/browser width.
Please, any advice or tips on how I might achieve this type of interface would be much appreciated. Even better would be some examples or links with examples as I definitely learn best when I can see example code and rationalize my way through it. Below I put a [colored] wire-frame type of image of what I'm attempting to achieve.
Try using an ASP.Net ListView control. It should allow you the layout you request with multiple Books per row.