I am attempting to change an image in my View with a click event. However, when the controller returns a byte array, the original image is replaced with an empty one.
Below is the code from my Controller:
[HttpPost]
public byte[] GetSelectedImage(string selectedImageId, string accountId, string courseId)
{
// Loading the original photo
var pictures = (from ga in _db.MyPhotos
where
ga.AccountId.Equals(accountId) &&
ga.CourseId.Equals(courseId) &&
ga.SortOrder.Equals(selectedImageId)
select ga.PhotoStreamOriginal.ToArray());
var images = pictures.ToList();
byte[] imageByteArray = images.First();
return imageByteArray;
}
And here is what I am trying to do in my JavaScript:
$('#makeMeScrollable img').live('click touchstart', function (event) {
event.preventDefault();
var selectedImage = $(this).attr('data-id');
var selectedImageId = @Html.Raw(Json.Encode(Model.SelectedImageId));
var accountId = @Html.Raw(Json.Encode(Model.AccountId));
var courseId = @Html.Raw(Json.Encode(Model.CourseId));
$.ajax({
url: '@Url.Action("GetSelectedImage", "UploadPhoto")',
dataType: 'text',
data: {selectedImageId: selectedImageId, accountId: accountId, courseId: courseId},
type: 'POST',
success: function(data) {
$('#OriginalImage').attr('src', "data:image/jpg;base64," + data);
alert("data:image/jpg;base64," + data);
}
});
});
The alert only shows: data:image/jpg;base64,System.Byte[]
Any suggestions on what I might be doing incorrectly?
Appreciate any guidance provided