1

I am loading names & images from database and dynamically adding them to a panel control. What I want is an image and a name displayed under that image. But the name label is not exactly under the image. Is there a way to add label relative to the image button?

This is my code that loads images and names from database:

string query1 = "SELECT photo,name FROM Artist";
using(var conn = new SqlConnection("connectionStringHere"))
using(SqlCommand cmd = new SqlCommand(query1, conn))
{
    conn.Open();
    using(SqlDataReader reader = cmd.ExecuteReader())
    {
        while(reader.Read())
        {
            byte[] bytes = (byte[])reader.GetValue(0);
            string strBase64 = Convert.ToBase64String(bytes);

            ImageButton imgButton = new ImageButton();
            imgButton.ImageUrl = "data:Image/png;base64," + strBase64;
            imgButton.Width = Unit.Pixel(200);
            imgButton.Height = Unit.Pixel(200);
            imgButton.Style.Add("padding", "5px");
            imgButton.Click += new ImageClickEventHandler(imgButton_Click);
            Panel1.Controls.Add(imgButton);

            Label lbl = new Label();
            lbl.Text = reader.GetString(1); 
            lbl.CssClass = "imageLable"; // style it in your .css file
            Panel1.Controls.Add(lbl);
        }
    }
}

This is what I get displayed:

enter image description here

Improve this question
2
  • Have you tried creating a label field and setting the text value of it dynamically? msdn.microsoft.com/en-us/library/… Commented Oct 3, 2016 at 19:26
  • Have you tried creating a new label, setting it's text to the name value and adding it to the panel after the imagebutton? Commented Oct 3, 2016 at 19:28

2 Answers 2

Reset to default
3

There are some bad practices in your ADO.NET code.

  1. Always wrap everything that implements IDisposable in using blocks.
  2. Scope connections to the method they are used in. Sql Server will handle connection pooling so use it and dispose it, do not reuse it.

The fix to your question though is to add a new Label to your panel and then style it as you see fit.

string query1 = "SELECT photo,name FROM Artist";
using(var conn = new SqlConnection("connectionStringHere"))
using(SqlCommand cmd = new SqlCommand(query1, conn))
{
    conn.Open();
    using(SqlDataReader reader = cmd.ExecuteReader())
    {
        while(reader.Read())
        {
            byte[] bytes = (byte[])reader.GetValue(0);
            string strBase64 = Convert.ToBase64String(bytes);

            ImageButton imgButton = new ImageButton();
            imgButton.ImageUrl = "data:Image/png;base64," + strBase64;
            imgButton.Width = Unit.Pixel(200);
            imgButton.Height = Unit.Pixel(200);
            imgButton.Style.Add("padding", "5px");
            imgButton.Click += new ImageClickEventHandler(imgButton_Click);
            Panel1.Controls.Add(imgButton);

            Label lbl = new Label();
            lbl.Text = reader.GetString(1); // use GetString, not GetValue here
            lbl.CssClass = "imageLable"; // style it in your .css file
            Panel1.Controls.Add(lbl);
        }
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

The problem is I am loading multiple images in a row. So the label is not displaying exactly under the image button. Is there a way to adjust the label relative to the image button? I will update the question and add a screen shot to be more clear.
@EL323 - it depends on the HTML. You could wrap the ImageButton and Label in a div and then write a little CSS to place the label underneath and center of the ImageButton. It just depends on how you want it structured but there are many ways to do it.
Ok. Thanks. I will try that. I am not really comfortable with CSS.
@EL323 - do you want the images stacked or next to each other with the label underneath?
Images next to each other with label underneath.
1

You just need to add a label under the image button:

string query1 = "SELECT photo, name FROM Artist";
SqlCommand cmd = new SqlCommand(query1, conn);
conn.Open();
SqlDataReader reader = cmd.ExecuteReader();

while(reader.Read())
{
    byte[] bytes = (byte[])reader.GetValue(0);
    string strBase64 = Convert.ToBase64String(bytes);

    ImageButton imgButton = new ImageButton();
    imgButton.ImageUrl = "data:Image/png;base64," + strBase64;
    imgButton.Width = Unit.Pixel(200);
    imgButton.Height = Unit.Pixel(200);
    imgButton.Style.Add("padding", "5px");
    imgButton.Click += new ImageClickEventHandler(imgButton_Click);
    Panel1.Controls.Add(imgButton);

    Label lbl = new Label();
    lbl.Text = reader.GetValue(1);
    // TODO: add styling and sizing parameters here
    Panel1.Controls.Add(lbl);
}

You would have to add styling to that label and because it is not part of the image button, it will not be a link. If you wanted it to be clickable, you should change the ImageButton to a Link and then add an Image and Label inside the Link control.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.