Question

在我的ASP.NET应用程序中，我想使用Bootstrap时间轴在应用程序中显示活动日志。我一直在互联网上搜索如何使用Twitter Bootstrap时间轴在ASP.NET C中显示数据＃但找不到任何东西。我非常了解它背后的HTML，但不知道如何在获取数据时使其动态化。

我希望有人可以帮助我提出如何解决这个问题的想法。教程链接也将不胜感激。

这是我正在讨论的引导时间轴的链接。 http://bootsnipp.com/snippets/featured/timeline

非常感谢。

Answer 1

调用页面后面的代码并返回json。接下来使用jQuery或javascript循环遍历json以动态构建时间轴所需的html。

<ul id="myTimeline" class="timeline">

在循环中添加li标签。这对于像Aurelia，淘汰赛或角球这样的东西来说是一个很好的用途。否则，只需使用javascript将li标签附加到ul标签即可。引导时间轴类将负责其余的工作。

$.ajax({
    url: "/yourURL",
    data: JSON.stringify({ yourPostData }),
    type: "Post",
    datatype: "json",
    contentType: "application/json; charset=utf-8"
}).then(function (data) {
   var obj = $.parseJSON(data.d);

   $.each(obj.timelineList, function(index, item) {
       $("#myTimeline").append("<li>" + item.timelineText + "</li>");
   });
});

由于每个li标签都有很多html，因此这将是模板的好地方。查看模板标签或使用：

<script type="html" id="myTemplate">
  ..your html

如何使用Bootstrap时间轴在ASP.NET C＃中显示数据

1 个答案: