Embedding images in a page – MVC style

I recently had a need to write some images stored in a database to a page. This was something rare enough that I thought it was worth documenting as it meant putting together a few different pieces.

Examples here are for MVC4, but could be easily adapted for somehing else.

In the View:
Restaurant Image

In the controller:
byte[] photoData
// populate photoData here
model.Photo = Convert.ToBase64String(photoData, 0, src.photo.Length)

This works by encoding the image as a base 64 string, which is supported by most modern browsers. You might need to change the data at the start to handle different image types.

Pair this with the following two pages:

  1. Uploading a File (Or Files) With ASP.NET MVC – Phil Haack
  2. Convert HttpPostedFileBase to byte[] – Stack Overflow
and you’ve got an end to end solution for uploading and displaying files.

Why would you / wouldn’t you do this?

Doing this is a bad idea in many cases as it means that the image can’t be cached. Overall this would tend to make your page loads slower.
However it might be worth doing if
  1. If the image is changing often enough and therefore there is no value in caching
  2. It gives you a self contained page, limiting the number of http connections

Going Functional

As more functional features get added to C# I’m writing code rather differently.

Splitting Data & functions

Instead of having classes that combine data and functions, I’m increasing splitting the two. The functions take data as parameters rather than modifying members on the class. This is a move towards more pure functions.
So instead of this:
    class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }

        public void Add()
        {}
    }
I’m more likely to write this:
    class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    class CustomerService
    {
        public Customer Add(Customer customer)
        {}
    }

Passing functions to functions

I’m also increasingly using functions as more first class objects to be passed around.
So instead of this (contrived example):
    class CustomerService
    {
        public Customer Add(Customer customer)
        {
            // add customer
            CustomerModificationNotifier.Notify(“customer added”);
        }
    }

    static class CustomerModificationNotifier
    {
        public static void Notify(string message)
        {}
    }

I might write this:
    class CustomerService
    {
        public Customer Add(Customer customer, Action notifier)
        {
            // add customer
            notifier(“customer added”);
        }
    }

    static class CustomerModificationNotifier
    {
        public static void Notify(string message)
        {}
    }

Everything Old is New Again

This feels all very new and shiny. Except that it really doesn’t feel that new.
Say for example this:
    struct customer
    {
int id;
char name[50];
    };

    void add_customer(customer*);

    void add_customer(customer* cust)
    {
        /* add customer */
    }
Or this:
    struct customer
    {
int id;
char name[50];
    };

    void add_customer(customer*);

    void add_customer(customer* cust, void (*notifier)(int))
    {
notifier(1);
    }

    void notify(int);

    void notify(int number)
    {
        /* add customer */    }
It’s funny how everything that is new really isn’t that new after all.

Sometimes it really feels like all we’ve achieved in the last 40 years is better string management and bounds checking of arrays.