How to display Images in grid using Asp.net MVC

Question

Hello,

 

I need some help in displaying Images in grid style using Asp.net MVC razor.

 

Here's what i have tried:-

 

-- Controller--

public ActionResult Index()

{

return View(db.Img_data.ToList());

}

 

--Razor View--

@using firstmvc.Models

@model IEnumerable<firstmvc.Models.Img_data>

@{

ViewBag.Title = "Index";

Layout = "~/Views/Shared/Adminmaster.cshtml";

}

<div>

<table class="table table-responsive">

@foreach (var item in Model)

{

<tr>

<td>

<img id="@item.Img_id" src="@Url.Content(@item.Img_data1)" data-zoom-image="@Url.Content(@item.Img_data1)" style="width:450px;height:300px" />

</td>

</tr>

}

</table>

</div>

 

 And the result of the code in browser is :- http://prntscr.com/byyv9b

 

How i want to display the image is :-http://prntscr.com/byyvl5

 

 Cheers