Binding image in jquery datatable using asp.net mvc

Hello everyone,

I tried to bind image inside jquery datatable plugin but it is showing an error 'Not allowed to load local resource: file:///E:/myworks/Demo/Images/Img/16.png' .

I am attaching my code along with it. Please help me to get out of this issue.

$('#dataTable').DataTable({
ordering: true,
searching: false,
paging: false,
autoWidth: true,
processing: true,
responsive: true,
bSort:true,
language: {
"processing": "Loading..."
},
ajax: {
url: "/Login/GetAllData",
type: "POST",
datatype: "json"
},
pageLength: 7,
columns: [
{ "data": "ID", "name":"ID", "defaultContent": "-" },
{ "data": "Type","name":"Type", "defaultContent": "-" },
{ "data": "To", "name": "To", "defaultContent": "-" },
{
"data": "ImagePath", "name": "ImagePath", "defaultContent": "-",
"render": function (data, type, row, meta) {
debugger;
return ' + data + '"height="70px" width="40px"/>';
}
}
],
columnDefs: [
{ className: "text-center", "targets": [0, 1, 2] },
//{
// "data": "ImagePath",
// "render": function (data, type, row, meta) {
// return '';
// }
//}
],
destroy:true
})

and my controller is given below

try
{
if (busModelVM.File != null&&busModelVM.File.ContentLength>0)
{
var fileName = Path.GetFileName(busModelVM.File.FileName);
var ext = Path.GetExtension(busModelVM.File.FileName);
string name = Path.GetFileNameWithoutExtension(fileName);
string myFile = name + ext;
var path = Path.Combine(Server.MapPath("/Images/Img"),myFile);
busModelVM.File.SaveAs(path);
busModelVM.ImagePath = path;
//string filename = Path.GetFileName(busModelVM.File.FileName);
//string path = Path.Combine(Server.MapPath("~/Images"), Path.GetFileName(file.FileName));
//string imagePath = Path.Combine(Server.MapPath("/Uploads/"), busModelVM.File.FileName);
//var ext = Path.GetExtension(busModelVM.File.FileName);
//string name = Path.GetFileNameWithoutExtension(fileName);
//busModelVM.File.SaveAs(imagePath);
//busModelVM.ImagePath = imagePath;
}
var result = _class1.InsertUpdateData(_mapper.MapToBusMaster(busModelVM), conString);
//return Json(new { data = result }, JsonRequestBehavior.AllowGet);
return JsonConvert.SerializeObject(new { Status = "OK", Records = result, Message = "Insertion sucessfull" });
}
catch(Exception ex)
{
//return Json(new { data = "" }, JsonRequestBehavior.AllowGet);
return JsonConvert.SerializeObject(new { Status = "ERROR", Records = "", Message = ex });
}

I think it is an issue in saving image path. Please help me to get out of the issue.

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
Change your datatable column like below
"render": function (data) {

                    return ' + data + '" style="height:100px;width:100px;"/>';

                    }


{
Change your controller Action like below
string filename=busModelVM.File.FileName;

                    string path = Server.MapPath("~/uploads/" + filename);
               busModelVM.File.SaveAs(path);  // here you are saving in foldrer upload

                Todo: Save this path to Database

               }



           }
Arjun M.R5y ago
Sachin Singh,Farhan Ahmed,Mageshwaran R :
Issue solved thank you all for your help.I expecting further help when more issue come.

Once more thanks all of you.
Mageshwaran R5y ago
Hi Arjun,
please refer this link:
https://stackoverflow.com/questions/52496430/display-image-in-jquery-datatable-from-database
Farhan Ahmed5y ago
https://www.aspforums.net/Threads/310332/Display-binary-Images-inside-jQuery-DataTable-using-Ajax-JSON-in-ASPNet/