Making only one column show as image in a Datatable

Question

i'm new to C# and MVC and i need some help. I need to show a datatable with one of the columns being a image. I'm using a image path from a database to get the image from the site. The rest of the columns need to be just plain text. How can i make only the first column use a image tag and the rest just plain text/information?

The controller:

        public ActionResult Product()
    {

        ProductController pc = new ProductController();
        DataTable pt = new DataTable("Product Table");
        pt = pc.fillProducts();
        return View(pt);
    }


public class ProductController : DatabaseController
{
    public DataTable fillProducts()
    {
        try
        {

            string sql = "Select product.image as 'Foto', product.naam as 'Naam', product.prijs as 'Prijs' from product";
            MySqlCommand cmd = new MySqlCommand(sql, conn);
            MySqlDataAdapter da = new MySqlDataAdapter(cmd);

            DataTable products = new DataTable();
            da.Fill(products);



            return products;

        }
        catch (Exception e)
        {
            Console.Write(e);
            return null;
        }
        finally
        {
            conn.Close();
        }
    }
}

The view:

    <table class="winkelwagen">
        <thead>
           <tr>
              @foreach (System.Data.DataColumn col in Model.Columns)
              {
                 <th>@col.Caption</th>
              }
           </tr>
        </thead>
        <tbody>
        @foreach (System.Data.DataRow row in Model.Rows)
        {
           <tr>
              @foreach (var cell in row.ItemArray)
              {
                 <td><img src='@cell.ToString()' /></td>
              }
           </tr>
        }      
        </tbody>
    </table>

Thanks in advance!

score 0 · Answer 1 · answered Apr 08 '15 at 14:33

What you could do if it's always going to be the first column is specify that explicitly.

<table class="winkelwagen">
        <thead>
           <tr>
              @foreach (System.Data.DataColumn col in Model.Columns)
              {
                 <th>@col.Caption</th>
              }
           </tr>
        </thead>
        <tbody>
        @foreach (System.Data.DataRow row in Model.Rows)
        {
           <tr>
              <td><img src='@cell.ToString()' /></td>
              @for (int i = 1; i< row.ItemArray.Length; i++)
              {
                 <td>@row.ItemArray[i].ToString()'</td>
              }
           </tr>
        }      
        </tbody>
</table>

score 0 · Answer 2 · edited May 23 '17 at 12:06

Use array index 0 to get the first cell of the row. Use LINQ Skip(1) to get everything after the first cell and enumerate in a foreach loop.

Use the helper @Html.Raw() to output the image source location without it being HTML encoded. Potential security issues can exist depending on the trust level of the data. See What does HTML.Raw do?

@foreach (System.Data.DataRow row in Model.Rows)
{
   <tr>
      <td><img src='@Html.Raw(row.ItemArray[0].ToString())' /></td>
      @foreach (var cell in row.ItemArray.Skip(1))
      {
         <td>@cell.ToString()</td>
      }
   </tr>
 }

Making only one column show as image in a Datatable

2 Answers2