使用 runat="server" 访问 HTML 元素中的 foreach 变量答案

【问题标题】：Accessing foreach variable in HTML element with runat="server"使用 runat="server" 访问 HTML 元素中的 foreach 变量
【发布时间】：2012-04-29 05:00:21
【问题描述】：

我有一个 UserControl，它有一个包含照片列表的产品列表的属性。在.ascx 我有一个DIV 作为所有照片的容器。这就像现在一样工作。

<% foreach (var product in Products) { %>
    <div class="product">
        <div class="product-photos">
            <% foreach (var photo in product.Photos) { %>
                <img src="<%= photo.Url %>" alt="<%= product.Name %> Photo"/>
            <% } %>
        </div>
        <!-- Other product markup/data here... -->
    </div>
<% } %>

如果没有照片，我现在正试图隐藏DIV。我的想法是让“产品照片”DIV 有一个runat="server" 并给它一个Visible 属性。这不起作用，因为它无法解析来自我的foreach 循环的product 变量。似乎runat="server" 使来自foreach 循环的变量无法访问，这是没有意义的，因为循环也必须在服务器上运行。

问题：
当元素具有runat="server" 时，如何访问在.as*x 文件内的foreach 循环中定义的变量？这甚至可能吗？如果没有，有什么替代方法可以实现我想要的？

ProductsControl.ascx.cs

public partial class ProductsControl: UserControl
{
    public IList<Product> Products { get; set; }
}

Product.cs

public class Product
{
    public IList<Photo> Photos { get; set; }
    // Other properties here...
}

【问题讨论】：

一分钟前发布了一个关于使用 asp:DataList 代替 foreach 循环的答案。我试图评论它，但它在我之前就被删除了。谁添加了答案然后删除了它，应该把它带回来，它实际上可能对我有帮助！

标签： c# asp.net .net data-binding

【解决方案1】：

为什么不在创建 div 之前检查照片数量？

<% foreach (var product in Products) { %>
    <div class="product">
        <% if (product.Photos.Count > 0) { %>
            <div class="product-photos">
                <% foreach (var photo in product.Photos) { %>
                <img src="<%= photo.Url %>" alt="<%= product.Name %> Photo"/>
                <% } %>
            </div>
        <% } %> 
        <!-- Other product markup/data here... -->
    </div>
<% } %>

【讨论】：

这个答案让我对自己嗤之以鼻。为什么我没有想到这一点？谢谢你的帮助！这就是我最终隐藏照片 DIV 和其他没有值的数据的方式。我的标记现在很丑陋，但它可以完成这项工作。
哈哈。很高兴能帮上忙！ :)

【解决方案2】：

您可以通过测试照片的Count 并设置它的css 样式来隐藏<div>：

<div class="product-photos" style="<%= product.Photos.Count == 0 ? "display=none;" : "" %> ">

这仍然会创建<div>，但它会“隐藏”在页面上。

编辑：关于使用托管控件的问题，例如asp:Panel，它将呈现<div>。您必须在 User Control Load event 期间根据您检索到的数据动态创建控件，这将涉及在您的用户控件上添加 child controls。

【讨论】：

我也想过这个解决方案；如果没有照片，只需添加display: none; 作为样式。这将解决我遇到的具体问题，但更多的是“解决方法”。我仍然想知道是否真的有一种方法可以在 runat"server" 元素中获取 foreach 变量，因为需要它的用例可能比我的要多。不过谢谢！
我相信你所问的简短答案是“不”。托管控件无法访问服务器端脚本变量以进行设置属性值等操作。使用服务器端脚本可以做的最好的事情是使用脚本变量呈现 html 控件。否则，您必须使用托管控件并动态创建它们。
感谢您的详细说明，我现在决定采用您的解决方案。我想给这个问题更多的时间让人们阅读并可能回答。如果没有更好的发布，我会接受你的。

【解决方案3】：

下午好，您可以尝试使用 jquery 为您处理这个问题，可能是这样的：

 $(function() {
      $('.product-photos').each(function() {
           var div = $(this);
           if ($(div).find('img').length === 0)
                div.hide();
      });
 });

这还没有经过测试，但我相信它应该能让你继续前进。

【讨论】：