Insert image in bootstrap popover using asp.net mvc

Question

It is byte[] image from database, and I need to call an action.

<td><a href="#" rel="popover" class="user" data-content="
<h3>@hItem.m_sUsername</h3>
<img src=@Url.Action("Show", "Image", new {id = "1"}) alt="Image" />
<p>First name: @hItem.m_sFirstname</p>
<p>Last name: @hItem.m_sLastname</p>"

If I understand your question correctly, you want to display image (which is stored in database) on the page, by invoking action you showed ? — jwaliszko, Nov 21 '12 at 08:49
Yes, @JaroslawWaliszko , because it is byte[] image i need to do it with action. — gormit, Nov 21 '12 at 08:53

score 0 · Answer 1 · edited May 23 '17 at 12:12

Ok, so your logic should be like this:

public class ImageController
{
    [HttpGet]
    public virtual ActionResult Show(int id)
    {
        var byteArray = YourDatabaseAdapter.LoadImage(id);
        var mimeType = GetMimeType(fileName);
        return base.File(byteArray, mimeType, fileName);
    }

    private static string GetMimeType(string fileName)
    {
        var mimeType = "application/unknown";
        var extension = Path.GetExtension(fileName);
        if (extension != null)
        {
            var ext = extension.ToUpperInvariant();
            var regKey = Registry.ClassesRoot.OpenSubKey(ext);
            if (regKey != null && regKey.GetValue("Content Type") != null)
            {
                mimeType = regKey.GetValue("Content Type").ToString();
            }
        }
        return mimeType;
    }
}

The generic GetMimeType function sets your content-type in http header based on file extension taken from windows registry.

EDIT (for html content):

In case of passing html code to the content, jQuery .html(); invoked on external div with the content html should work as described in the reference:

$('.user').popover({ 
    html : true,
    content: function() {
      return $('#data-content-wrapper').html();
    }
});

Thanks Jaroslaw, but my first problem is to call the action, it is inside bootstrap data-content tag. I even don't know how to write regular syntax. I have quotes inside quotes (from data-content). — gormit, Nov 21 '12 at 09:10
For placing html inside the data-content, take a look here: http://stackoverflow.com/questions/8875376/is-it-possible-to-use-a-div-as-content-for-twitters-popover — jwaliszko, Nov 21 '12 at 09:39
... now I get content with jquery instead of data-content, and I will try your action method. — gormit, Nov 21 '12 at 11:08

Insert image in bootstrap popover using asp.net mvc

1 Answers1