Question

I am new to Ajax and javqscript.

I am returning My list with Image Path through Json. Could anyone tell me the way to display the Image?

I am loading data using Ajax call.

Ajax Call
var TableHeaderArray = ["Person", "Details"]; 
$.ajax({
url: '/Home/Persondetails',
type: 'POST',
dataType: "json", 
beforeSend: function () {
},
success: function (response) {
$('#Person').append(CreateHTMLTableFromJSON(response, "lightPro", TableHeaderArray)).fadeIn();
},
error: function (error) {
alert(error);
}
});

Controller

[HttpPost]
public ActionResult Persondetails()
{
SqlConnection con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["PersonConnectionString"].ConnectionString;
con.Open();
SqlCommand cmd = new SqlCommand("GetDetails", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.ExecuteScalar();
DataSet ds = new DataSet();
SqlDataAdapter sda = new SqlDataAdapter(cmd);
sda.Fill(ds);
List<Person> Details = new List<Person>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
Details.Add(new Person()
{
Id = dr["Id"].ToString(),
Name = dr["Name"].ToString(),
Age = dr["Age"].ToString(),
Job = dr["Job"].ToString(),
images = dr["Images"].ToString(),
});
}
return Json(Details);
}

Answer 1

For axample this way:

$.ajax({
       url: 'some_url',
       success: function(data) {
          // Here will be image inserting
        }
  });

Now we have 2 cases:

1) This image(with for instance id = imagId) is already on your page. In this case in success callback you should do the following:

$('#imgId').attr('src', data.imageUrl);

2) You have to insert new image on page. So, in this case success callback will look like:

var img = $('<img/>', {'src': data.imageUrl} );  
$('#whereToInsertId').append(img);

It should work;)