How to display a picture using data from ViewData.Model [as opposed taking data from a remote location using, for instance, Url.Action]

Question

Hello,

I'm doing kind of wizard application that captures information on Contacts. So, before saving to DB, all data collected during the process are kept in memory as model's properties (using serialization/deserialization). Data collected includes the uploaded picture of the contact. The last page is called "preview" where I display all the information entered during the process before saving them to the DB. On that preview page, I'd like also to display the photo of the contact on left and his information on the right.

It is easier to display picture using the following statements

<img src = ".../.../Content/MyPicture" />

<img src = "<% = Url.Action("Action", "Controller", "routevalue")%>"/>

How about if the data is not located in remote locations like in the above samples, but rather in the ViewData.Model?

By the way, my model, ContactData, has 2 properties ImageData and ImageMimeType holding data for the picture. How do I use them?

Thanks for helping

Answer 1

Usually, you'd store it in a session variable, and when the request for the image comes around you'll feed it whatever is in the session. There are a couple of things that need to work in order for this to function, but usually it does.

There is one more option, if the image is small, you can inline it directly into your document using a data uri, like so:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" />

(example is stolen from wikipedia, paste uri into your location bar, and it'll show you an image of a red dot). You'll need to base64 encode the binary data (or url-encode, but base64 is usually preferable for binary data).

Answer 2

Roe,

It took me 2 days and many frustrations just to realize what you meant by storing data in the session state variable. Anyway, below is the solution for anyone to take advantage of.

I, first, put data needed to display in the session state variables

public ActionResult PreviewPage()
{
  Session["ImageData"] = contactData.ImageData;
  Session["ImageMimeType"] = contactData.ImageMimeType;
  return View(contactData); 
}

I also created a action method to send data to view. This is where all the magics are done. This action picks up data contained in the Session variables

public FileContentResult GetImage()
{
  return File((byte[]Session["ImageData"], (string)Session["ImageMimeType"]);
}

Finally, this how I view accesses to that data without having to fetch needed from a database.

<img src = "<% = Url.Action("GetImage", "Contact")%>" />

It was important that I be able to understand how this works because I'll be doing more of Wizards-like applications in the future.

Thanks very much for helping.