Question

我尝试动态创建这个列表..只是李的部分。我想从我自己的代码中输入图像和文字......

aspx：

<div class="slider_bg pngfix" id="slideBG" runat="server">
      <ul id="slideshow" runat="server">
        <li>

          <h3>Ornare Free Theme</h3>
          <span>photos/1.jpg</span>
          <p>Free theme from themeflash.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam magna ligula, placerat nec scelerisque dictum, aliquam nec arcu. In ut quam tellus. Morbi tincidunt adipiscing sapien, non suscipit urna tempor vel. <br />
            <a href="#" class="readmoremain">read more</a> </p>
          <img src="photos/1.jpg" alt="" />

        </li></ul></div>

我试图通过两种方式来做到这一点：

我的1 c＃：

    foreach (Project p in projectList)
    {
        //update0
        HtmlGenericControl ili = new HtmlGenericControl();
        Label tmpTxt = new Label();
        tmpTxt.Text = p.name;

        Image tmpImg = new Image();
        tmpImg.ImageUrl = p.projectImageUrl;
        ili.Controls.Add(tmpTxt);
        ili.Controls.Add(tmpImg);
        slideshow.Controls.Add(ili);}

我的2 c＃：

    BulletedList bl = new BulletedList();
    foreach (Project p in projectList)
    {

        ListItem li = new ListItem();
        li.Text = p.name;
        Image tmpImg = new Image();
        tmpImg.ImageUrl = p.projectImageUrl;
        li.Attributes.Add("image", "tmpImg");



    }
    slideBG.Controls.Add(bl);

在第一个我可以看到图像，但不是在跨度..在第二个我看到注意

@Luaan 这就是我现在在我的aspx中所拥有的：

<div class="clear">&nbsp;</div>
  <div class="grid_16">
    <div class="slider_bg pngfix" id="slideBG">
      <ul id="slideshow">
                        {             foreach (Project p in projectList) {
            <li>
                <h3>p.name</h3>
                <span>p.projectImageUrl</span>
                <p>
                    p.description
                    <br />
                    <a href="#" class="readmoremain">read more</a>
                </p>
                <img src=" p.projectImageUrl" alt="" />

            </li>
            } }
      </ul>
      <div id="wrapper">
        <div id="fullsize">
          <div id="imgprev" class="imgnav pngfix"></div>
          <div id="imglink"></div>
          <div id="imgnext" class="imgnav pngfix"></div>
          <div id="image"></div>
          <div id="information">
            <h3></h3>
            <p></p>
          </div>
        </div>
        <div id="thumbnails">
          <div id="slideleft"></div>
          <div id="slidearea">
            <div id="slider"></div>
          </div>
          <div id="slideright"></div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
      $('slideshow').style.display = 'none';
      $('wrapper').style.display = 'block';
      var slideshow = new TINY.slideshow("slideshow");
      window.onload = function () {
          slideshow.auto = true;
          slideshow.speed = 5;
          slideshow.link = "linkhover";
          slideshow.info = "information";
          slideshow.thumbs = "slider";
          slideshow.left = "slideleft";
          slideshow.right = "slideright";
          slideshow.scrollSpeed = 4;
          slideshow.spacing = 5;
          slideshow.active = "#aaa";
          slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");
      }
    </script>

我可以看到我有一个图像，但我没有看到它.. TNX

Answer 1

您是否有理由不使用内联代码，例如：

<% foreach (var project in projectList) { %>
<li>
  <h3><%= project.name %></h3>
  <span><%= ResolveClientUrl(project.projectImageUrl) %></span>
  <p><%= project.description %><br />
  <a href="#" class="readmoremain">read more</a> </p>
  <img src="<%= ResolveClientUrl(project.projectImageUrl) %>" alt="" />

</li>
<% } %>

等

您只需要在代码隐藏中将projectList字段设为protected，您就可以直接从aspx访问它。此外，您可能无法将ul作为服务器元素，但这可能不会成为问题。

现在，如果你真的想要，你可以通过代码隐藏手动完成所有这些操作（毕竟，内联代码只生成一些C＃代码来执行相同的操作 - 而且它可能比你编写的任何代码都要快）。问题是用命令式语言表达HTML看起来非常糟糕，特别是没有一些有用的辅助方法允许你以更具声明性的方式创建所有东西。至于你的代码：

我没有看到第一个例子有任何问题。也许你的数据有误？这是您使用的实际代码还是一些模拟？
在第二个示例中，您不会在任何位置添加控件。您必须将列表项添加到bl.Items集合中。你不会有机会在那里获得图像，因为BulletedList不允许你做任何你想做的事情，只是一些文字和超链接。不是你想要的。

因此，如果您真的需要在代码隐藏中完成工作，请使用您的第一个示例。也许你不应该将服务器控件（Label，Image）与“HTML”控件（HtmlGenericControl）混合使用。请尝试使用HtmlSpan和HtmlImage。

除了这两种方法之外，您还可以使用Repeater控件，它允许您在ASPX中定义HTML，同时将数据绑定保留在aspx或代码隐藏中。就个人而言，我会选择第一个选项 - ASPX中的内联代码。如果你有一个HTML人，他会对他在内联代码中可以做的事情感到非常高兴。您拥有的所有其他选项都可以从他身上获得很大的自由，尤其是代码隐藏变体。

使用动态图像和文本创建动态li

1 个答案: