0

The database involved includes two entities that are ID of type int & ImagePath of type text. The ID holds an auto incremented number and the ImagePath holds the URL of a specific image. Currently I've managed to display all images found in the database with the below code.

Index.cshtml

 @foreach (var item in Model)
    {@Html.DisplayFor(modelItem => item.ImagePath)
    <img src="~/Images/@Html.DisplayFor(modelItem => item.ImagePath)" />

ImageController.cs

  public class ImageController : Controller
    {
        private ImageDBContext db = new ImageDBContext();

          public ActionResult Index()
        {
            return View(db.Images.ToList());
        }

I would like to display a specific image and not all the images found in the database. Can someone kindly help me out in displaying a specific URL stored image from the database by ID? (ie. Display Image from ImagePath through a called ID in the .cshtml)

Highly appreciate your time and help. Thank you.

UPDATE:

Wrote the below code down in order to Display image from db.image table having chosen ImageID = 2 to represent the related url stored image.

ImageController.cs

  public ActionResult Index(int ImageID = 2)
        {

            return View(db.Images.Where(img => img.ID == ImageID).ToList());
        }

Index.cshtml 

@foreach (var item in Model)
    {
        @Html.DisplayFor(modelItem => item.ImagePath)
         <img src="~/Images/@Html.DisplayFor(modelItem => item.ImagePath)"/>

Moving forward I would like to select the ImageID from the Index.cshtml instead of int ImageID = 2 from the public ActionResult Index() in the controller. Was thinking of adding ImageID == 2 in the @html.DisplayFor but don't know how. Any ideas how to select the ImageID from the index.cshtml code to represent the image related?*

END GOAL Having the below <img src=""/> replaced to call imagePath from the given ID.

   <a href="https://www.facebook.com/vellanevets" target="_blank"> <img src="images/social/instagram.png" /></a>
    <a href="http://instagram.com/nevetsvella/" target="_blank"> <img src="images/social/instagram.png" alt="" /></a>
    <a href="http://vimeo.com/user16587212" target="_blank"> <img src="images/social/vimeo.png" alt="" /></a>
    <a href="mailto:steven.vella93@gmail.com" target="_blank"> <img src="images/social/email.png" alt="" /></a>
        }
Leo Zammit
  • 15
  • 1
  • 6

2 Answers2

0

You can use LINQ to return specific documents in your database. Assuming your data column is named ID you can do the following.

public class ImageController : Controller
{
    private ImageDBContext db = new ImageDBContext();

    public ActionResult Index(int intValue){

    var imagesId = db.Images.Where(img -> img.ID == intValue).ToList();

    return View(imagesId);

    }
}

This will return all your images with Id equal to intValue.

As an aside, it seems you are only attempting to retrieve 1 document, if that's the case you can (and should) use FirstOrDefault, like so var imageWithId = db.Images.FirstOrDefault(img -> img.ID == intValue);

Edit for Update+Comments:

It seems you wish to act on information that is client side, in your Index View. There are multiple ways of doing this, one is to reload the page by passing back a value to your controller which will pass the correct model (in your case, an image) to your View.

If you wish to replace values with values in your model, you can iterate through your model and replace the css property. Select the elements with the srcs you wish to replace then use.

var imagePath = @Html.Raw(Json.Encode(Model.ImagePath));
$(this).attr("src", imagePath);

Using JQuery to reload your page with new Image:

$(document).on('event', '.selector', function() {
     //Set your ID to the Id property of the element   
    var idToPass = this.id;
    clicked
    //This will simulate an HTTP request, your action will return your View with your image
window.location.replace('@Url.Action("Index", "Image")?ImageID=' + idToPass) 
});

Replace event with the event you wish to trigger the reload. 'click' for example. Replace the selector with a class you give all the elements you wish to be clickable.

Note: Careful! Using on.('click) on anchors can lead to interesting results.

You can also use AJAX to dynamically pass information to your page without reloading.

Daniel Hoffmann-Mitscherling
  • 2,339
  • 1
  • 16
  • 23
  • Cheers for your help mate. Can you have a look at the update I've written ? – Leo Zammit Jul 10 '15 at 23:03
  • I don't understand the update completely. If you wish to pass a parameter to a method you should use `public ActionResult Index(int ImageID)` and then call Index method with whatever Id you wish to pass, such as `Index(2)` or `Index(9001)` to retrieve the image with those Ids. What is the event you wish to capture to redirect to a specific Id? I.E. Where are you getting the Id number from? – Daniel Hoffmann-Mitscherling Jul 10 '15 at 23:59
  • The 'ID' is obtained from the table through the connected server. I wish to display the image in 'ImagePath' field from the related 'ID' by selecting the 'ImageID' from the index.cshtml and not the .ImageController.cs. – Leo Zammit Jul 11 '15 at 08:49
  • Posted an update. The first part will be enough to get you on the right pass to replacing your srcs with ALL images in your model, and the second part will help you reload the page with a new image if you wish to do that. Best of luck! – Daniel Hoffmann-Mitscherling Jul 11 '15 at 14:26
0

You have simply to filter your images in your query

public class ImageController : Controller
    {
        private ImageDBContext db = new ImageDBContext();

          public ActionResult Index()
        {
            [.. some code to decide the id ..]

            return View(db.Images
              .Where(x => x.ID = [myId]
              .ToList());
        }
Luca Dalsass
  • 63
  • 1
  • 1
  • 4