我正在使用asp.net mvc – 带jQuery的ajax …
我有一个名为“Books”的模型类型,它包含一个属性“TableOfContents”
此属性包含以下格式的数据：
我有一个名为“Books”的模型类型,它包含一个属性“TableOfContents”
此属性包含以下格式的数据：
TableOfContents = "1,2,4,6,9,17,28";
Json动作方法,重新启动Book对象如下所示：
public JsonResult GetBook(int id) {
return Json(_bookRepository.Current(id),.....AllowGet);
}
遵循我想要显示的列表图像的样式.
在C#(Razor)我能做到这一点,
var splitted = Model.TableOfContents.Split(‘,’);
@foreach(var number in splitted) {
<li><img src=”@Url.Content(“~/Content/Images/img-“ + number + “.gif”)” /> </li>
}
我想用jQuery做同样的事情,因为我正在使用带有jQuery的ASP.NET MVC Ajax.
这是jQuery脚本,我通过jQuery从MVC获取数据.
<script type="text/javascript">
function GetBook(id) {
var url = '@Url.Content("~//Monthly/CurrentBook?id=")' + id;
$.post(url,null,function (book) {
$('#bookResult' + book.ID).html(
'<a href="@Url.Content("~/BookDetails/")' + book.ID + '">Click to View Details</a>'
+ '<div><p style=" text-align:center;">'
+ '<a href="' + monthly.URL + '"><button style="background-image:url(@Url.Content("~/Content/Images/download-pdf.gif")); width:200px; height:70px;" /></a>'
+ '**<!-- Here I want to use jQuery Code for displaying Table of content Images -->**'
+ '</p></div>');
},'json'
);
}
</script>
我使用这样的jQuery代码：
$.each(book.TableOfContents.split(','),function(number) {
+ '<li><img src="img-' + number + '.gif" /></li>'
}
但它显示结果为：“1,3,90”(以字符串格式而不是显示图像)
在ASP.NET MVC Razor中,我可以显示如下图像列表：
var splitted = Model.TableOfContents.Split(‘,’);
@foreach(var number in splitted) {
<li><img src=”@Url.Content(“~/Content/Images/img-“ + number + “.gif”)” /> </li>
}
http://alhadith.cz.cc(此webite的主页面显示ASP.NET MVC Razor的图像列表)
解决方法
如果你有
var book={TableOfContents:"1,28"};
作为您的数据对象然后在< head>加：
$(function(){
$('#list').empty();
var TableOfContentsSplit=book.TableOfContents.split(',');
$.each(TableOfContentsSplit,function(number){
$('#list').append('<li><img src="img-'+TableOfContentsSplit[number]+'.gif" /></li>\n');
});
});
并且在< body>中加：
<ul id="list"></ul>
最后你会得到：
<ul id="list"> <li><img src="img-1.gif"></li> <li><img src="img-2.gif"></li> <li><img src="img-4.gif"></li> <li><img src="img-6.gif"></li> <li><img src="img-9.gif"></li> <li><img src="img-17.gif"></li> <li><img src="img-28.gif"></li> </ul>
干杯G.
