4 Images per row: MVC HTML

<div class="card-block">
<div class="row">
<div class="col-md-12">
<div class="form-group row">
@if (Model.InventoryImages != null)
{
for (int i = 0; i < Model.InventoryImages.Count; i++)
{
string ImageName = "";
string[] FileName;
var urlBuilder = new System.UriBuilder(Request.Url.AbsoluteUri)
{
Path = Url.Content(Model.InventoryImages[i].ImagePath),
Query = null,
};
if (Model.InventoryImages[i].ImageName != null)
{
FileName = Model.InventoryImages[i].ImageName.Split('.');
ImageName = FileName[0].ToString();
}
<div class="col-md-4">
<label class="col-md-12 control-label font-weight-bold">@ImageNamelabel>
<label class="col-md-12 control-label font-weight-bold">@Model.InventoryImages[i].ImageWidth x @Model.InventoryImages[i].ImageHeightlabel>
<div class="imgar">
<a class="fancybox-thumbs p-2" download="@Model.InventoryImages[i].ImageName" data-fancybox-group="thumb" href="@urlBuilder.ToString()">
<img src="@urlBuilder.ToString()[email protected]()" alt="Image" height="300" class="img-responsive" />a>
div>
div>
}
}
div>
div>
div>
div>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

David Smith8y ago
Faisal can you send me the small of project with the code snippet below so I can retrace everything you did with adding accessing the inventory of images from the controller down to the model. I am visual learner.
Faisal Pathan8y ago
1. <div class="card-block">
2. <div class="row">
3. <div class="col-md-12">
4. <div class="form-group row">
6. @if (Model.InventoryImages != null)
7. {
8. for (int i = 0; i < Model.InventoryImages.Count; i++)
9. {
10. string ImageName = "";
11. string[] FileName;
12. var urlBuilder = new System.UriBuilder(Request.Url.AbsoluteUri)
13. {
14. Path = Url.Content(Model.InventoryImages[i].ImagePath),
15. Query = null,
16. };
17. if (Model.InventoryImages[i].ImageName != null)
18. {
19. FileName = Model.InventoryImages[i].ImageName.Split('.');
20. ImageName = FileName[0].ToString();
21. }
23. <div class="col-md-4">
24. <label class="col-md-12 control-label font-weight-bold">@ImageNamelabel>
25. <label class="col-md-12 control-label font-weight-bold">@Model.InventoryImages[i].ImageWidth x @Model.InventoryImages[i].ImageHeightlabel>
26. <div class="imgar">
27. <a class="fancybox-thumbs p-2" download="@Model.InventoryImages[i].ImageName" data-fancybox-group="thumb" href="@urlBuilder.ToString()">
28. <img src="@urlBuilder.ToString()[email protected]()" alt="Image" height="300" class="img-responsive" />a>
29. div>
30. div>
31. }
32. }
34. div>
35. div>
36. div>
37. div>