Avatar of jdallen75
jdallen75Flag for Canada

asked on 

Building a web app with a dynamic image layout

This may sound a bit vague, but...

I'm tasked with developing a web app centred around this basic functionality:

1. A user inputs a workcell and model type on a webpage.
2. The web app queries a SQL database and returns a sequence of build steps based on the workcell and model type. This sequence can be of varying length, let's say between 1 and 20 steps for argument's sake.
3. For each step, the query also returns a filepath and filename of ONE picture (assume a .jpg) PER step.
4. Based on the workcell, a query returns the total number of pictures (steps), height and width in pixels of all pics, and number of pics per row to display.

My question: since the number of images (and their placement on the page) is dynamic... could be 1 row of 4 or 3 rows of 3... what is the best development tool to achieve this type of layout?

I was going to use ASP.Net 2010 Web Forms, but the designer is terrible for controlling the placement of controls on the page.

I'm comfortable handling the user input, and querying SQL, it's just the layout issue. I'm pretty comfortable in HTML, and know a wee bit about CSS.
Thanks.
ASP.NET.NET ProgrammingVisual Basic.NET

Avatar of undefined
Last Comment
jdallen75
ASKER CERTIFIED SOLUTION
Avatar of Nasir Razzaq
Nasir Razzaq
Flag of United Kingdom of Great Britain and Northern Ireland image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of jdallen75
jdallen75
Flag of Canada image

ASKER

@CodeCruiser: I've added a DataList control, and inside its Item Template added an image object. I've set the DataList.RepeatColumns property to control the row/column layout. At runtime, I have the full image filepaths, heights, widths, and tooltips collected.

My current problem is I can't seem to properly specify these image parameters (such as ImageURL) into the DataList? I can't even add just the first image. Can you help? (I'm assuming I can set all of these at runtime, based on SQL datasets.)
Avatar of Nasir Razzaq
Nasir Razzaq
Flag of United Kingdom of Great Britain and Northern Ireland image

What have you tried? You have to specify the image URL not path.
Avatar of jdallen75
jdallen75
Flag of Canada image

ASKER

Yes, that is one of the things on my to-do list: rather than specifying file paths, load the images into a virtual IIS directory (I believe).

Even without that step, this is the closest scenario I've found so far:
http://www.aspdotnet-suresh.com/2011/05/how-to-bind-images-from-folder-to.html

The key here is to create BindDataList, and call it from Page_Load. However, in this case, I'm not simply referencing a file directory - as mentioned earlier, the user has to enter some input, retrieve data from SQL, and THEN populate ListItems (and bind the data).

Is it a true statement that by using "if (!IsPostBack)" on the Page_Load, that the retrieved data will be available for binding at this point in time?

Apologies for any ambiguity - appreciate the help.
Avatar of Nasir Razzaq
Nasir Razzaq
Flag of United Kingdom of Great Britain and Northern Ireland image

>Is it a true statement that by using "if (!IsPostBack)" on the Page_Load, that the retrieved data will be available for binding at this point in time?

Depends on how you bind. Are you using SQLDataSource?
Avatar of jdallen75
jdallen75
Flag of Canada image

ASKER

Not as one: during the query process, data is returned through multiple queries.. So in the end, the data I need resides in 3 different datagrids. (Height, width in one; filenames in a second; filepath in a third from a system config table)
Avatar of jdallen75
jdallen75
Flag of Canada image

ASKER

Does it help to revise these 3 calls into 1, for a single dataset to bind to?
Avatar of Nasir Razzaq
Nasir Razzaq
Flag of United Kingdom of Great Britain and Northern Ireland image

Is the path static and then file name different? If so, you can use the RowDataBound event of the filepath grid to set image URLs.
Avatar of jdallen75
jdallen75
Flag of Canada image

ASKER

DataList worked with a virtual IIS directory.
.NET Programming
.NET Programming

The .NET Framework is not specific to any one programming language; rather, it includes a library of functions that allows developers to rapidly build applications. Several supported languages include C#, VB.NET, C++ or ASP.NET.

137K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo