Question

我正在使用asp.net mvc - 带jQuery的ajax ... 我有一个名为“图书”的模型类型，其中包含属性“ TableOfContents ” 此属性包含以下格式的数据：

TableOfContents = "1,2,4,6,9,17,28";

Json动作方法，重新开始Book对象如下所示：

public JsonResult GetBook(int id) {
    return Json(_bookRepository.Current(id), .....AllowGet);
}

我想要显示的列表图像的样式。

alt text

在C＃（Razor）中，我可以做到这一点，

var splitted = Model.TableOfContents.Split(‘,’);
@foreach(var number in splitted) {
     <li><img src=”@Url.Content(“~/Content/Images/img-“ + number + “.gif”)” /> </li>
}

此代码100％有效并显示如上图所示的图像。

我想用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,2,3,17,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（此网站的主页面显示使用ASP.NET MVC Razor的图像列表）

Answer 1

如果你有

var book={TableOfContents:"1,2,4,6,9,17,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。

$ .each（someData.split（'，'）=＆gt;返回连接字符串，而不是项目数组

1 个答案: