javascript - AJAX mvc web api: create div with images -
i working restful api, mvc , ajax. trying data backend , display images inside divs. result should following:
this backend code:
/*route:api/images*/ [httpget] public ienumerable<dto> getdata(string id) { /*do something*/ return dto;/*the dto has imgurl property*/ }
in front end
<div id="mydiv></div> <script> $(document).ready(function () { $.ajax({ url: "http://localhost:59245/api/api/images", type: "get", success: function (data) { (var = 0; < data.length - 1; i++) { $('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+ '<h3 class="centrar">' + data[i].titulo + '</h3><a href="'+ data[i].imagenurl+'</a><p>'+data[i].paragraph+'</p></div>' ).appendto("#mydiv"); } }, error: function (msg) { alert(msg); } }); }); </script>
my problem when try display images inside #mydiv, result:
we can see in anchor tag wrapping paragraph in ajax code did not mean this. how fix it? thanks
you dont have img tag. try
<script> $(document).ready(function () { $.ajax({ url: "http://localhost:59245/api/api/images", type: "get", success: function (data) { (var = 0; < data.length - 1; i++) { $('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+ '<h3 class="centrar">' + data[i].titulo + '</h3><a href="'+ data[i].imagenurl+'"><img src="'+data[i].imagenurl+'"/></a><p>'+data[i].paragraph+'</p></div>' ).appendto("#mydiv"); } }, error: function (msg) { alert(msg); } }); });
Comments
Post a Comment