如何在 Web 表单中的 codeBehind 中选择一组元素而无需包装元素

Question

我有一个 Webform 页面，其中有一个 html 表单。一组字段用于客户数据，另一组字段用于产品数据，其他字段都不是这两组。

我需要根据某些后端逻辑隐藏 PageLoad 或其他一些事件处理程序中的整组产品字段或客户字段。问题出在.NET Framework中，我需要通过ID将它们一一隐藏 这需要大量代码，并且我需要在添加新产品或客户相关字段时随时更改代码。

将它们分组到一个包装器中并隐藏此包装器会破坏一些 CSS 选择器，如下所示，甚至

display:contents

也无济于事。

是否有在 .NET Framework 中“伪分组”这些元素，以便我可以使用 for 循环或任何隐藏它们的方式引用 codeBeind 中的元素组，而生成的 HTML 实际上不会有额外的包装器层？我不想重写 CSS 选择器，下面只是一个示例，实际上还有更多。

ProductFieldGroup.Visible = false;

.spaced-form>.input-group:not(:first-child) {
  margin-top: 1rem;
}

/*wrapper that breaks some CSS selector*/
.product-fields {
  display:content;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="form-group spaced-form">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">Other Field 1</span>
    </div>
    <input runat="server" id="OtherField1" type="text" class="form-control form-control-lg" />
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">Customer Field 1</span>
    </div>
    <input runat="server" id="Customer1" type="text" class="form-control form-control-lg" />
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">Customer Field 2</span>
    </div>
    <input runat="server" id="Customer2" type="text" class="form-control form-control-lg" />
  </div>
  <div class="product-fields" id="ProductFieldGroup">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Product Field 1</span>
      </div>
      <input runat="server" id="Product1" type="text" class="form-control form-control-lg" />
    </div>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Product Field 2</span>
      </div>
      <input runat="server" id="Product2" type="text" class="form-control form-control-lg" />
    </div>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Other Field 2</span>
      </div>
      <input runat="server" id="OtherField1" type="text" class="form-control form-control-lg" />
    </div>
  </div>

</div>

Answer 1

您可能正在寻找

Panel

组件。

它允许您通过在代码隐藏中设置面板的

Visible

属性等来显示/隐藏一组控件/标记。

在您的示例中，产品字段组可以声明为：

<asp:Panel ID="ProductFieldsPanel" runat="server">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">Product Field 1</span>
        </div>
        <input runat="server" id="Product1" type="text" class="form-control" />
    </div>
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">Product Field 2</span>
        </div>
        <input runat="server" id="Product2" type="text" class="form-control" />
    </div>
</asp:Panel>

要隐藏这些字段，在代码隐藏中，您可以编写：

ProductFieldsPanel.Visible = false;

对于隐藏面板，不会生成任何标记。另一方面，上面的面板在可见时会生成以下标记：

<div id="MainContent_ProductFieldsPanel">

希望有帮助。