Показывать путь изображения вместо изображения в gridview

Question

Я пытаюсь извлечь данные из таблицы Product и присваивать строке, а затем строка в таблицу, а затем, наконец, таблицу в GridView. Изображения находятся в папке с изображениями и в базе данных column Я сохраняю путь к изображениям. Но вместо того, чтобы показывать реальное изображение он показывает только path.Here код для кода

public partial class prac3 : System.Web.UI.Page 
{ 

    List<String> pn = new List<String>(); 
    List<Int32> pp = new List<Int32>(); 
     List<Int32> dp=new List<Int32>(); 
     List<String> pic = new List<String>(); 
     List<Image> pic1 = new List<Image>(); 

    protected void Page_Load(object sender, EventArgs e) 
    { 
     getdata(); 
    } 

    private void getdata() 
    { 

     using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString)) 
     { 
      int k=0; 

      con.Open(); 



      SqlCommand cmd = new SqlCommand("select * from Product ", con); 

        using (SqlDataReader reader = cmd.ExecuteReader()) 
        { 
         DataTable tb = new DataTable(); 
         tb.Columns.Add("id1"); 
         tb.Columns.Add("id2"); 
         tb.Columns.Add("id3"); 


         while (reader.Read()) 
         { 

          DataRow dr1 = tb.NewRow(); 
          DataRow dr2 = tb.NewRow(); 
          DataRow dr3 = tb.NewRow(); 
          DataRow dr4 = tb.NewRow(); 

          pn.Add(Convert.ToString(reader["productName"])); 
          pp.Add(Convert.ToInt32(reader["productPrice"])); 
          dp.Add(Convert.ToInt32(reader["discountedPrice"])); 
         pic.Add(Convert.ToString(reader["productImage"])); 

          k++; 
          if(k==3) 
          { 


           k = 0; 
           dr1["id1"] = pn.ElementAt(0); 
           dr1["id2"] = pn.ElementAt(1); 
           dr1["id3"] = pn.ElementAt(2); 

           dr2["id1"] = pp.ElementAt(0); 
           dr2["id2"] = pp.ElementAt(1); 
           dr2["id3"] = pp.ElementAt(2); 

           dr3["id1"] = dp.ElementAt(0); 
           dr3["id2"] = dp.ElementAt(1); 
           dr3["id3"] = dp.ElementAt(2); 



           dr4["id1"] = pic.ElementAt(0); 
           dr4["id2"] = pic.ElementAt(1); 
           dr4["id3"] = pic.ElementAt(2); 

           tb.Rows.Add(dr4); 
           tb.Rows.Add(dr1); 
           tb.Rows.Add(dr2); 
           tb.Rows.Add(dr3); 

           pn.Clear(); 
           pp.Clear(); 
           dp.Clear(); 
           pic.Clear(); 
          } 

         } 
         GridView1.DataSource = tb; 
         GridView1.DataBind(); 

        } 



     } 

    } 



} 

Может кто-нибудь сказать мне, как я могу показать реальное изображение. Я также попробовал «servermapmathod» и следующий метод

Image i1=new Image(); i1.ImageUrl=pic.ElementAt(0); dr4["id1"] =i1; 

и в коде ASPX файле тела тега является

<div> 


    <asp:GridView ID="GridView1" runat="server" Height="166px" Width="192px"> 

    </asp:GridView> 

    </div> 

Следующая ссылка показывает демо, что я хочу, чтобы получить

Click Here to view the demo image

Но все же я не увенчался успехом. Пожалуйста, помогите мне.

Answer 1

Вы используете автоматически созданные столбцы с помощью GridView. Поэтому он не знает, что должен использовать путь, который он получает, для создания тега HTML img. Поэтому вместо автоматически создаваемых столбцов нам нужно их определить.

<asp:GridView runat="server" id="GridView1" AutoGenerateColumns="false"> 
    <columns> 
    <asp:BoundField DataField="productName" /> 
    <asp:BoundField DataField="productPrice" /> 
    <asp:BoundField DataField="discountedPrice" /> 
    <asp:ImageField DataImageUrlFormatString="~/{0}" DataImageUrlField="productImage" /> 
    </columns> 
</asp:GridView> 

Вы также должны избавить себя от каких-либо проблем и позволить структуре создать таблицу данных для вас.

public static DataTable GetDataTable(SqlCommand command, string connectionString) 
{ 
    DataTable dt = new DataTable(); 
    using (var connection = new SqlConnection(connectionString)) 
     { 
     command.Connection = connection; 
     connection.Open(); 
     dt.Load(command.ExecuteReader()); 
     } 
    return dt; 
} 

private void getdata() 
{ 
    SqlCommand cmd = new SqlCommand("select productName, productPrice, discountedPrice, productImage from Product");  
    var dt = GetDataTable(cmd, ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString); 
    GridView1.DataSource = dt; 
    GridView1.DataBind();  
} 

Обратите внимание, сколько кода я устранил? Я предполагаю, что значения для productImage выглядят примерно как Images/bicycle.jpg, так как вы не описали их формат.

Дальнейшие улучшения, которые вы могли бы сделать: поместите GetDataTable() в статический класс где-нибудь, возможно, в ~/App_Code/DatabaseHelpers.cs или в его собственную библиотеку классов. Вы также должны следовать соглашениям об именах C#, поэтому getdata() должен быть GetData(). И, наконец, вы можете переключиться на более MVC-подобный шаблон (а не MVC-фреймворк) и определить свои продукты в качестве моделей, иметь слой данных для их извлечения. Это выходит за рамки вашего вопроса, но у меня есть demo project, который я создал, что, как ни странно, также касается продуктов, и показывает вам, как их извлекать из базы данных, поэтому вы можете пойти туда, чтобы узнать больше, если вам интересно с лучшей архитектурой.