Click here to Skip to main content
15,303,572 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello everyone,

i try to bring our local user interface (WPF application) to the web. (Just for local purposes, no access from www, so safety issues are not a big concern atm).

I used with c# for it, and everything worked fine (mostly gridviews and layout) till i had to do the overview graphic (technical overview of a tunnel).

How do i change the imageurl according to an int value of a specific table in the database? And I need to do it ID related.

Imagecontrol --> Gives a hardcoded ObjectID to --> Codebehind (C#) --> Generates Imageurl for this ID based on the int value of "database row" --> returns imageurl to imagecontrol.

I dont wanna use UniqueID or something

No user interference beside scaling, its just an overview graphic that refreshes every x seconds (i dunno how to do it event based by now e.g. when a record in the database changes).

I have googled a lot, but it is always how to bind a graphic to a gridview or how to show a image from a database.

Help would really be appreciated since i am no real programmer, but i showed some of what i have done to my boss and he liked it and wanted me to do it with the technical overview map aswell, and now i am really stuck and dont get a grip on it.

To make it more clear, there are about 50+ little images on a background image. The background is static, the other 50+ images change from time to time, and can have up to 15 different states.
The values for thes 50 images are stored in a MSSQL 2012 database, and there are ocs-processes that update the database tables.

Database table looks like:

ID (PrimaryKey)

I wanna fetch the data from the database in the code behind like this:
using (SqlCommand command = new SqlCommand("SELECT Id, SollIst ,Funktionsbyte, Stellcode FROM Stellzustand WHERE Id = '" + ID_property_of_image + "' and SollIst = 1 ", connection))

Afterwards i wanna set the url according to the database values:

if funktionsbyte == 1 return ~/images/Stellcode+Funktionsbyte.png

                    else return ~/images/ID+Black.png


What I have tried:

Read about 50 different articles to get a grip on it, maybe i am too dumb to see the link between my problem and the read suggestions.

Tried to do it with EVAL, but the image shows nothing, i must have missed sth. and its not an elegant solution it seems.

<pre>    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TrafficCenterConnectionString1 %>" SelectCommand="SELECT, Stellzustand.Stellcode, Stellzustand.Funktionsbyte, FROM Stellzustand WHERE SollIst = 1 AND ID = 137496" />

   <asp:image id="Image1" runat="server" imageurl='<%# String.Format("~/images/Funktionsbyte={0} & Stellcode={1}", Eval("Funktionsbyte"), Eval("Stellcode" +".png")) %>'  />
Updated 25-Jun-18 4:11am
Mike V Baker 16-Jun-18 18:49pm
If I understand you right you're taking the ID from a control, the imagecontrol. I'm not sure I understand the logic here. The ID of a control has nothing to do with values in the database. The control's ID is there only so that the C# codebehind can uniquely identify each control in the form. Things like comboBox1, comboBox2, imageControl1, etc (BTW I always suggest they be named by what they contain, cbUserNames).
What I have always done in this case is to store the actual URL that you want displayed in the database. Not necessarily the BLOB object, the actual data of the image, but the URL. Storing BLOB objects in the DB makes them more transportable, you can move the DB to another platform and not worry about having to also move the images. Still I usually store the URL.
I have never done any imagery as you describe here, a tree structure with X,Y coords. Not in a web form. Absolute positioning, relative to other objects, in different browsers... ever seen the old movie called "The Money Pit" ??
alexvw 18-Jun-18 16:19pm
Hi there,

From what I can see on Mike's comment, your "scenario's" description might need some re-writing.

Please, correct me if wrong. I believe you are not trying to use each image control's unique ClientId to link it to its target image, but rather an int Id value that somehow you have associated (or need to associate) to each image control.

I would assume said int Id value would match the name of its target image file (intIdVal.svg/png), which in turn would make it easier to generate the required URL to recover/find the file to load. In this case, changing URLS based on "int value of a specific table in the database" would be a matter of just of re-associating those int values to each image control, and then load the page (with the new set of images).

In a desktop scenario I have used a control's tag property to store data of that sort, e.g. the int Id key. But, in a webpage, there is no such thing; you may have to device a way to do it such a list, array or another suitable container, which most likely will have to be attached to the user's session.

Hope this helps; cheers!
Kanomar 19-Jun-18 3:15am
First of all thanks for your answers.
And Alex you are right i maybe got carried away and lost the focus a little.

And like you are guessing, i dont wanna use the Unique ID of the image control, i just need a property where i can enter a 6 digit code that is accessible from the code behind.

I will try to improve my question.

Regards, Dennis
Richard Deeming 26-Jun-18 11:47am
using (SqlCommand command = new SqlCommand("SELECT Id, SollIst ,Funktionsbyte, Stellcode FROM Stellzustand WHERE Id = '" + ID_property_of_image + "' and SollIst = 1 ", connection))

NEVER use string concatenation to build a SQL query. ALWAYS use a parameterized query.

Everything you wanted to know about SQL injection (but were afraid to ask) | Troy Hunt[^]
How can I explain SQL injection without technical jargon? | Information Security Stack Exchange[^]
Query Parameterization Cheat Sheet | OWASP[^]

using (SqlCommand command = new SqlCommand("SELECT Id, SollIst ,Funktionsbyte, Stellcode FROM Stellzustand WHERE Id = @Id and SollIst = 1", connection))
    command.Parameters.AddWithValue("@Id", ID_property_of_image);

1 solution

Ok I made it.

I hide the ID i need inside the imageID, like "Image134567"

<pre> <asp:image id="FG4_137502" Tooltip="LED 5" runat="server"  Height="121px" Width="61px" style="position:absolute;top:750px; transform:rotate(90deg); left:600px; z-index:2"  />

Then i call all Imagecontrols from the code behind, substring the first 5 Characters and got my ID for the Database, work my query and then set a imageurl based on the reslut of this query.

//nach allen Imagecontrols suchen und für alle die Imageurl setzen
private void ChangeImageUrls(Control ctrl)

        using (SqlConnection connection = new SqlConnection("Data Source=localhost;Initial Catalog=; USER ID=; Password=; Integrated Security=false"))


            foreach (Control subCtrl in  ctrl.Controls)

                if (subCtrl is Image)
                    //ImagecontrolID auslesen
                    var Value = subCtrl.ID;

                    //ersten 4 Buchstaben der Imagecontrol ID abschneiden
                    string sub = Value.Substring(4);

                    SqlCommand command = new SqlCommand("select ID,Stellcode,Funktionsbyte from Stellzustand WHERE SollIst =1 AND Id=" + sub + "", connection);
                    SqlDataReader read = command.ExecuteReader();

                    while (read.Read())
                        DBID.DB_ID = (read["ID"].ToString());
                        DBSC.DB_SC = (read["Stellcode"].ToString());
                        DBFbyte.DB_Fbyte = (read["Funktionsbyte"].ToString());

                    //Ergebnis auswerten und Imageurl erzeugen
                    string result = DBID.DB_ID + "_" + DBFbyte.DB_Fbyte + "_" + DBSC.DB_SC + ".png";


                    //Hier wird die Imageurl gesetzt mit dem Ergebnis aus der Datenbank
                    ((Image)subCtrl).ImageUrl = "~/images/" + result + "";

                    if (subCtrl.HasControls())

                    //TO DO: Liste(?) mit Ergebnissen erzeugen und das Ergebnis in einem großen Paket übertragen.


            //Datenbank Verbindung schliessen

If the Image is inside an Updatepanel i can get them by using
UpdatePanel ctrlPanel = (UpdatePanel)ctrl;
foreach (Control subCtrl in ctrlPanel.Controls[0].Controls)

instead of:
foreach (Control subCtrl in  ctrl.Controls)

Thanks all, closed
Vincent Maverick Durano 25-Jun-18 18:52pm
Quote:but i cant get it to work, because when i put the image into the updatepanel my code behind doesnt find it anymore.

How did you call your code?

As alternative to UpdatePanel, you could write an AJAX call to trigger a server-side code with (x) seconds. Just do a quick search at google for examples.
Richard Deeming 26-Jun-18 11:49am
If you want to update your question, click the green "Improve question" link and update your question.

If you want to ask a new question, then ask a question[^]

DO NOT post a question as a "solution" to your question.
Kanomar 27-Jun-18 2:34am
Ok sorry for that. Already got the solution to that matter.

Thanks to all.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900