使用 runat=“server” 访问 HTML 元素中的每个变量

本文关键字：元素 变量 HTML 访问 runat server 使用 | 更新日期: 2023-09-27 18:31:22

我有一个用户控件，它有一个包含照片列表的产品列表的属性。在.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循环中定义的变量？这可能吗？如果没有，实现我想要的替代方法是什么？

产品控制.ascx.cs

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

产品.cs

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

使用 runat=“server” 访问 HTML 元素中的每个变量

为什么不在创建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>
<% } %>

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

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

这仍然会创建<div>但它只会"隐藏"在页面上。

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

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

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

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

相关文章：