C# 创建具有动态图像和文本的动态li

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

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>

我的2个c：

在第一张照片中，我可以看到图像，但在跨度内看不到。。第二天我什么也看不到

@卢安 这就是我现在在我的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>

{foreach（项目列表中的项目p）{

p、 名字
p、 投影图像URL

p、 描述




} }


$（'slideshow'）.style.display='none'；
$（'wrapper'）.style.display='block'；
var slideshow=new TINY.slideshow（“slideshow”）；
window.onload=函数（）{
slideshow.auto=true；
slideshow.speed=5；
slideshow.link=“linkhover”；
slideshow.info=“信息”；
slideshow.thumbs=“slider”；
slideshow.left=“slideleft”；
slideshow.right=“slideright”；
slideshow.scrollSpeed=4；
幻灯片放映。间距=5；
slideshow.active=“#aaa”；
init（“幻灯片放映”、“图像”、“imgprev”、“imgnext”、“imglink”）；
}

我可以像看到图像一样看到，但我看不到。。

---

您不使用内联代码有什么原因吗，例如：

<% 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>
<% } %>

“alt=”“/>

等等

您只需要将

projectList

字段设置为

projectbehind

，您可以直接从aspx访问它。此外，您可能无法将

ul

作为服务器元素，但这可能不会成为问题

现在，如果你真的想这样做，你可以从代码隐藏中手动完成这一切（毕竟，内联代码只是生成了一些C代码来完成同样的工作——它可能比你编写的任何代码都要快）。问题是，用命令式语言表达HTML看起来非常糟糕，尤其是没有一些有用的辅助方法，使您能够以更具声明性的方式创建所有内容。不过，对于您的代码：

• 我认为第一个例子没有任何问题。也许你的数据是错误的？这是你使用的实际代码还是模型
• 在第二个示例中，您没有在任何地方添加控件。您必须将列表项添加到

  bl.items

  集合中。您将没有机会在那里获得图像，因为BulletedList不允许您执行任何您想要的操作，只允许一些文本和超链接。这根本不是您想要的

因此，如果您真的需要在代码背后完成工作，请使用您的第一个示例。也许您不应该将服务器控件（标签、图像）与“HTML”控件（HtmlGenericControl）混合使用。请尝试改用HtmlSpan和HtmlImage

---

除了这两种方法之外，您还可以使用Repeater控件，它允许您在ASPX中定义HTML，同时将数据绑定等留在ASPX或代码中。就我个人而言，我会选择第一种方法-在ASPX中使用内联代码。如果您有一个HTML人员，他会非常高兴他能在ASPX中完成的工作内联代码。您拥有的所有其他选项都从他那里获得了很大的自由，尤其是在代码背后的所有变体。

使用.InnerHtml不是更合适吗？也许您的意思是

li.Attributes.Add（“image”，p.projectmageURL）

要设置图像，那么…您必须将其添加到

slideBG

。在您的示例中，

bl

为空且

li

无处可去。您是否有任何特定的理由不使用转发器？如果列表中的文本无处可去，我如何查看它？我需要添加到slideBG中的内容？当我使用我编写的第一个选项时，它会停止跨度效果..您建议的代码只能在.aspx中使用..但我想在我的cs中动态添加此代码..您可以只编写您正在使用的内部代码吗？@user3034150:为什么您不希望将代码内联到aspx中？为什么您绝对需要在cs文件中使用表示代码（实际上不应该这样做）？你期望得到什么样的好处？似乎你正在努力解决一些问题，使用了完全错误的技术，所以请解释一下，也许我们可以找到更好的方法：）你的意思是我需要把你的建议写在aspx中？@user3034150我的问题是：你为什么不想把代码放在aspx中？原因是什么你有什么理由吗？没有理由…所以我会接受你告诉我的…但是我应该把它放在哪里，怎么放？因为正如你说的，我不能把它放在ul…我的项目列表在后面的代码中得到保护。。

<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>

<% 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>
<% } %>