This article explain how return multiple Images from Server using Web API in ASP.Net MVC Razor.
The Web API will be called using jQuery AJAX and the Web API will read the Image files from a Folder (Directory) on the Server’s Disk and will return the List of Image files to the calling jQuery AJAX function.
Step-1
Create a ASP.NET MVC Project
Step-2
Create a Model class using below prosperities.
public class ImageModel
{
public string Name { get; set; }
public string Data { get; set; }
}
Step-3
Add a Web API Controller named as "ImageAPIController" with following code
public class ImageAPIController : ApiController
{
[HttpPost]
[Route("api/ImageAPI/GetImages")]
public HttpResponseMessage GetImages()
{
List<ImageModel> images = new List<ImageModel>();
//Set the Image Folder Path.
string path = HttpContext.Current.Server.MapPath("~/Images/");
//Fetch the Image Files.
foreach (string file in Directory.GetFiles(path))
{
//Read the Image as Byte Array.
byte[] bytes = File.ReadAllBytes(file);
//Convert and add Image as Base64 string.
images.Add(new ImageModel
{
Name = Path.GetFileName(file),
Data = Convert.ToBase64String(bytes, 0, bytes.Length)
});
}
return Request.CreateResponse(HttpStatusCode.OK, images);
}
}
- Inside this Action method, the list of Image Files are fetched from the Folder and then a loop is executed over the list of fetched Images.
- Inside the loop, each Image file is read as Byte Array (Binary data) and then an object of ImageModel class is created and the Byte Array is copied to it as Base64 string.
- Finally, the Generic List collection of ImageModel class objects is returned to Client using HttpResponseMessage object.
Step-4
Add another MVC controller to view the page
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View Page : The view page code look like
- The View consists of an HTML Table which will be used to display the Images returned by the Web API.
- Inside the jQuery document ready event handler, the GetImages Action method of the Web API is called and a loop is executed over the received Image Files.
- Inside the loop, the Name and the actual Image File in Base64 string format is displayed using HTML Table.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<table id="tblImages" cellpadding="0" cellspacing="0">
<tr>
<th style="width:120px">Image Name</th>
<th style="width:80px">Image</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
GetImages();
});
function GetImages() {
$.ajax({
type: "POST",
url: "/api/ImageAPI/GetImages",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (files) {
$.each(files, function () {
AppendRow(this);
});
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
};
function AppendRow(image) {
var row = $("#tblImages tbody tr:last-child");
//Remove if the row is dummy row.
if (row.find("td:empty").length > 0) {
row.remove();
}
row = row.clone();
$("td", row).eq(0).text(image.Name);
$("td", row).eq(1).html("");
var img = $("<img />");
img.attr("src", ' data:image/jpg;base64,' + image.Data);
img.attr("style", "height:80px;width:80px");
$("td", row).eq(1).append(img);
$("#tblImages tbody").append(row);
};
</script>
</body>
</html>
The Final output should look like below.
Post a Comment