In this example we explain that how
to display Byte Array as an Image in MVC.or how to convert Byte Array to Image
in asp.net MVC.or how to bind Image from database to razor view in MVC.or how
to convert SQL Server Byte Array to an Image in razor view in mvc.
Here in this example the image are
stored in database as Binary Data and we will fetch as a Byte array and covert
it to an Image and bind it to view in mvc.or how to convert BASE64 string to an
Image in mvc.
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; }
}
Controller:
public class
EmployeeController : 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
ActionResult View(List<ImageModel> images)
{
throw
new NotImplementedException();
}
private
List<ImageModel>
GetImages()
{
string
query = "SELECT * FROM Employee";
List<ImageModel> images = new
List<ImageModel>();
string
constr = ConfigurationManager.ConnectionStrings["ConnectionString"].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:
@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>Display Byte Array as Image in ASP.Net MVC</title>
</head>
<body>
@using (Html.BeginForm("Index", "Employee",
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>
0 comments:
Post a Comment