CODEWITHSUNDEEP
javascriptasp.netasp.net-mvcasp.net-mvc-4
mark_spencer
mark_spencer

Reputation: 393

Load image in ajax query (ASP.NET)

I make ajax call and return json from back end

Here is code of ajax call

<script>
$('#search').click(function () {
   $("#patients").empty();
   var lname = $("#lname").val();

     var model = {
         LastName: lname
     };
    $.ajax({
        url: '@Url.Action("ResultOfSearch", "PatientDatabase")',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false,
        success: function(data) {
            var list = data;

            //alert(list);
            var listnumber = 1;
            for (var i = 0; i <= list.length - 1; i++) {
                var arrow  = '@Url.Content("~/images/doc-50.png")';
                var patientsList = ' <td class="point">' +
                    (i+1) +
                     '</td>' +
                    '<td class="title"> ' +
                    list[i].dateOfBirthday +
                    '</td>' +
                    '<td class="title"> ' +
                    list[i].firstName +
                    '</td>' + '<td>' + '</td>'
                    + '<td>' + '</td>'
                    + '<td>' + '</td>'
                    + '<td style="text-align:end;>' + arrow + '</td>';
                $("#patients").append('<tr>' + patientsList + '</tr>');
            };
        }
    });
});

In this row i try to show image

+ '<td style="text-align:end;>' + arrow + '</td>';

Image is in arrow value var arrow = '@Url.Content("~/images/doc-50.png")';

But it not showing. I have no errors in console related to image.

What is wrong in my code?

Upvotes: 0

Views: 535

Answers (1)

Niladri
Niladri

Reputation: 5962

You have to use an image tag inside the td and then use arrow as the src attribute of the image because @Url.Content is used when you wish to resolve a url for any file or resource on your site and you would pass it the relative path, it returns the application absolute path for the file.

like below 

'<td style="text-align:end;"><img src=' + arrow + '/></td>';

BTW which version of .NET MVC are you using? for mvc 4 and above you can directly use relative url in image as src="~/images/doc-50.png"

Upvotes: 1

Related Questions