Jquery 在使用html模板渲染的卡中动态显示图像,但未正确显示图像
我试图使用从服务器获得的Jquery 在使用html模板渲染的卡中动态显示图像,但未正确显示图像,jquery,html,asp.net,ajax,asp.net-mvc,Jquery,Html,Asp.net,Ajax,Asp.net Mvc,我试图使用从服务器获得的json数据在我的网页上显示一些信息,但是图像没有正确显示在相应的卡上 这是正在转换为Json并发送到浏览器的类 public class AgendaViewModel { public string Date { get; set; } public string Time { get; set; } public string Title { get; set; } public List<string> _standa
json
数据在我的网页上显示一些信息,但是图像没有正确显示在相应的卡上
这是正在转换为Json并发送到浏览器的类
public class AgendaViewModel
{
public string Date { get; set; }
public string Time { get; set; }
public string Title { get; set; }
public List<string> _standardSpeakers;
public List<string> StandardSpeakers { get { return _standardSpeakers ?? (_standardSpeakers = new List<string>()); } set { _standardSpeakers = value; } }
}
服务器正在以正确的格式和顺序返回数据,但当我使用上述Ajax的成功代码显示此数据时,Keynote Speaker的图像没有正确反映在正确的卡片上,即大多数卡片显示相同的图像。我认为这与类有关,这个类渲染图像,即使图像不属于卡
这是一张示例卡,它应该显示各个会话的图像(实际图像故意隐藏在图片中)
图像url是否正确?是的,图像url非常好。。有些卡的数据库中没有图像,有些卡有1个,有些卡有2个或更多。。但大多数卡片都显示相同的图像。$(“#img0.keynotespeakers list”).append(img);你在哪里声明了img变量?@vadivela我很抱歉,这是在准备/重构在线发布的代码时输入的错误。。。现在更新了那个部分。
<section>
<div class="container">
<div class="row">
<div class='row card-list'>
@*Agenda will be added here dynamically using AJAX call.*@
</div>
<template id="keynote-speaker-card">
<li><a href=""><img class="speakerImg1" /></a></li>
</template>
<template id="agenda-card">
<div class="col-lg-12 col-12">
<div class="main card">
<div class="card-header-1 pt-20">
<div class="row">
<div class="col-lg-12">
<h6 class="sessionDate"></h6>
</div>
</div>
</div>
<div class="card-body">
<div class="row" style="border-bottom: 1px solid #ecebeb;">
<div class="col-lg-2 col-12">
<div class="row ">
<div class="col-12 col-lg-12">
<h6 class="sessionTime"></h6>
</div>
</div>
</div>
<div class="col-lg-10 col-12">
<div class="row">
<div class="col-lg-12 col-12">
<h4 class="sessionTitle "></h4>
</div>
<div class="col-lg-12 col-12 mt-10">
<h5 class="mb-20">Speakers</h5>
<h6 class="keynoteHeading" style="display:none">Keynote:</h6>
<ul class="custom-ul-image">
<div id="img0" class="keynote-speakers-list">
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
$('#btnSearch').click(function (e) {
e.preventDefault();
$('.card-list').html("");
var data = $('#searchForm').serializeArray();
$.ajax({
type: "POST",
url: '@Url.Action("GetAgenda", "Agenda")',
data: data,
success: function (response) {
response.search.Results.forEach(function (ele) {
var card = $($('#agenda-card').html());
card.find('.sessionDate').text(ele.Date);
card.find('.sessionTime').text(ele.Time);
card.find('.sessionTitle').text(ele.Title);
ele.StandardSpeakers.forEach(function (speaker) {
var keynoteSpeakerCard = $($('#keynote-speaker-card').html());
keynoteSpeakerCard.find('.speakerImg1').attr('src', speaker);
$('#img0.keynote-speakers-list').append(keynoteSpeakerCard);
});
$('.card-list').append(card);
});
},
});
});