Блог

Главная - Вопросы по программированию - Динамическое добавление текста под кнопкой изображения

Динамическое добавление текста под кнопкой изображения

#c# #asp.net

#c# #asp.net

Вопрос:

Я загружаю имена и изображения из базы данных и динамически добавляю их в элемент управления панели. Я хочу, чтобы под этим изображением отображалось изображение и имя. Но метка имени находится не совсем под изображением. Есть ли способ добавить метку относительно кнопки изображения?

Это мой код, который загружает изображения и имена из базы данных:

 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);
        }
    }
}

Это то, что я получаю на экране:

введите описание изображения здесь

Комментарии:

1. Вы пробовали создавать поле метки и динамически задавать его текстовое значение? msdn.microsoft.com/en-us/library /…

2. Вы пробовали создать новую метку, присвоив ее текст значению name и добавив его на панель после кнопки imagebutton?

Ответ №1:

В вашем ADO.NET код.

  1. Всегда оборачивайте все, что реализует IDisposable, в using blocks.
  2. Область подключений к методу, в котором они используются. Sql Server будет обрабатывать пул соединений, поэтому используйте его и утилизируйте, не используйте повторно.

Исправление вашего вопроса заключается в том, чтобы добавить новую метку на вашу панель, а затем оформить ее так, как вы считаете нужным.

 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);
        }
    }
}

Комментарии:

1. Проблема в том, что я загружаю несколько изображений подряд. Таким образом, метка не отображается точно под кнопкой изображения. Есть ли способ настроить метку относительно кнопки изображения? Я обновлю вопрос и добавлю снимок экрана, чтобы он был более понятным.

2. @EL323 — это зависит от HTML. Вы могли бы обернуть ImageButton и Label в a, div а затем написать немного CSS, чтобы поместить метку под и в центр кнопки изображения. Это просто зависит от того, как вы хотите, чтобы он был структурирован, но есть много способов сделать это.

3. ОК. Спасибо. Я попробую это. Мне не очень нравится CSS.

4. @EL323 — вы хотите, чтобы изображения располагались в стопке или рядом друг с другом с надписью внизу?

5. Изображения рядом друг с другом с надписью внизу.

Ответ №2:

Вам просто нужно добавить метку под кнопкой изображения:

 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);
}

Вам нужно будет добавить стиль к этой метке, и поскольку она не является частью кнопки изображения, она не будет ссылкой. Если вы хотите, чтобы он был интерактивным, вам следует изменить значение ImageButton на a Link , а затем добавить Image и Label внутри элемента Link управления.