In this article I will explain with an example, how to display Base64 String as Image in ASP.Net MVC Razor.
The images stored as Binary data will be fetched as BYTE Array and then the BYTE Array will be converted to BASE64 string and then displayed in View in ASP.Net MVC 5 Razor.
 
 
Database
For this article I have created a simple table with the following structure.
Display Base64 String as Image in ASP.Net MVC
 
Following three records are inserted in the table with three images stored in it.
Display Base64 String as Image in ASP.Net MVC
 
Note: The backup file of the database is present in the attached sample.
 
 
Model
The Model class has following properties. The additional property IsSelected is used for displaying the selected item in DropDownList after Form submission.
public class ImageModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string ContentType { get; set; }
    public byte[] Data { get; set; }
    public bool IsSelected { get; set; }
}
 
 
Namespaces
You will need to import the following namespaces.
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, the records from the database table are fetched using the collection of ImageModel class and it is returned to the View for populating the DropDownList.
 
Action method for handling POST operation
Inside this Action method, the records from the database table are fetched using the collection of ImageModel class and using the Find method and the Lambda expression, the Image to be displayed is determined.
The Binary data of the image i.e. the Byte Array is converted to a Base64 string and is assigned to the Base64String ViewBag object.
Finally the list of Images are returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<ImageModel> images = GetImages();
        return View(images);
    }
 
    [HttpPost]
    public ActionResult Index(int imageId)
    {
        List<ImageModel> images = GetImages();
        ImageModel image = images.Find(p => p.Id == imageId);
        if (image != null)
        {
            image.IsSelected = true;
            ViewBag.Base64String = "data:image/png;base64," + Convert.ToBase64String(image.Data, 0, image.Data.Length);
        }
        return View(images);
    }
 
    private List<ImageModel> GetImages()
    {
        string query = "SELECT * FROM tblFiles";
        List<ImageModel> images = new List<ImageModel>();
        string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        images.Add(new ImageModel
                        {
                            Id = Convert.ToInt32(sdr["Id"]),
                            Name = sdr["Name"].ToString(),
                            ContentType = sdr["ContentType"].ToString(),
                            Data = (byte[])sdr["Data"]
                        });
                    }
                }
                con.Close();
            }
 
            return images;
        }
    }
}
 
 
View
Inside the View, the ImageModel class is declared as IEnumerable which specifies that it will be available as a Collection.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the View, a loop is executed over the Model to generate the DropDownList. The IsSelected property is used to set the selected attribute of the OPTION element. The image from database is displayed using an HTML Image element.
@using Display_Image_Database_MVC.Models
@model IEnumerable<Display_Image_Database_MVC.Models.ImageModel>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <span>Select Image:</span>
        <select name="ImageId" onchange="document.forms[0].submit();">
            <option value="0">Please select</option>
            @foreach (ImageModel image in Model)
            {
                if (image.IsSelected)
                {
                    <option value="@image.Id" selected="selected">@image.Name</option>
                }
                else
                {
                    <option value="@image.Id">@image.Name</option>
                }
            }
        </select>
    }
    @if (ViewBag.Base64String != null)
    {
        <hr/>
        <img alt="" src="@ViewBag.Base64String" style="height:100px;width:100px;"/>
    }
</body>
</html>
 
 
Screenshot
Display Base64 String as Image in ASP.Net MVC
 
 
Downloads
Download Code