Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Building a web app with a dynamic image layout

Posted on 2013-01-03
Medium Priority
Last Modified: 2013-01-07
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.
Question by:jdallen75
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
LVL 83

Accepted Solution

CodeCruiser earned 1500 total points
ID: 38742240
When designing web pages, it is preferable to use HTML and CSS to control the layout rather than relying on designer.

You can use controls like Repeater, DataList, GridView etc for repeating items.

Author Comment

ID: 38745494
@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.)
LVL 83

Expert Comment

ID: 38745783
What have you tried? You have to specify the image URL not path.
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 38745804
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:

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.
LVL 83

Expert Comment

ID: 38745834
>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?

Author Comment

ID: 38745856
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)

Author Comment

ID: 38745858
Does it help to revise these 3 calls into 1, for a single dataset to bind to?
LVL 83

Expert Comment

ID: 38745867
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.

Author Closing Comment

ID: 38753244
DataList worked with a virtual IIS directory.

Featured Post

NFR key for Veeam Agent for Linux

Veeam is happy to provide a free NFR license for one year.  It allows for the non‑production use and valid for five workstations and two servers. Veeam Agent for Linux is a simple backup tool for your Linux installations, both on‑premises and in the public cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those of you who don't follow the news, or just happen to live under rocks, Microsoft Research released a beta SDK (http://www.microsoft.com/en-us/download/details.aspx?id=27876) for the Xbox 360 Kinect. If you don't know what a Kinect is (http:…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question