MVC 5 - partial postback for string image src

Question

What I am trying to achieve is through partial postback I am trying to retrieve the string image. This is because My page contain almost 100 images and the size of page is large and because of that I want to have partial post back to retrieve the image scr in mvc - 5. The funtion get called in controller but the image not loaded in the page. I am trying to retrieve like this in view

  @{
       var PhotoGallary = (List<DisasterManagementDataAccess.Model.utblCMSPhoto>)ViewData["PhotoGallery"];
   }    
    @foreach (var item in PhotoGallary)
    {
      <div>
        <a href="#">
          <img id="@item.PhotoID" class="width100 marginlt15 fllt padding2 PhotoGallaryThumbnail" src="@Url.Action("GetPhoto", "Home", new { item.PhotoID })" alt="@item.PhotoTitle" title="@item.PhotoTitle" />
        </a>
      </div>
    }

and in HomeController I have like this which will retrieve the Image in string format which is stored in Database(SQL R2 Management Studio)

   public ActionResult GetPhoto(long PhotoID)
    {
        string filedata = "";
        string mimetype = null;
        objCMSPhoto = new CMSPhoto();
        var model = objCMSPhoto.utblCMSPhotos.Where(x => x.PhotoID == PhotoID);
        foreach (var item in model)
        {
            if (item.NormalImage.Length > 0)
            {
                filedata = item.NormalImage;
            }
            break;
        }
        return  Content(filedata);
   }

I have taken reference from this question. I also tried to return string but the result was same. When I debug in filedata I get this kind of string:

   data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBXgFeAAD/4bWKRXhpZgAATU0AKgAAAAgADQEOAAIAAAAgAAAAqgEPAAIAAAAFAAAAygEQAAIAAAALAAAA0AESAAMAAAABAAEAAAEaAAUAAAABAAAA3AEbAAUAAAABAAAA5AEoAAMAAAABAAIAAAExAAIAAAARAAAA7AEyAAIAAAAUAAAA/gITAAMAAAABAAIAAIdpAAQAAAABAAABEogl............

What should I need to do?

looks like you are getting base64 of the image and not the image path. — Asdfg, Jan 28 '15 at 13:27

score 0 · Answer 1 · answered Jan 28 '15 at 13:55

You are using the wrong Helper.

Url.Action creates a hyperlink to Action you described using the parameters so you ends with the folowing img tag (or similar):

<img src="Home/GetPhoto/123123" />

If your Action returns the actual binary file that would works.

However your Action return in fact the src attribute itself, so you should use Html.Action, it will execute the action and print its result as HTML string:

<img id="@item.PhotoID" class="width100 marginlt15 fllt padding2 PhotoGallaryThumbnail" src="@Html.Action("GetPhoto", "Home", new { item.PhotoID })" alt="@item.PhotoTitle" title="@item.PhotoTitle" />

It will generate an img tag like:

<img src=" data:image/jpeg;base64,/9j/4AAQSkZJRgABA..." />

MVC 5 - partial postback for string image src

1 Answers1