In my Webform page, I have a html form containing fields for customer data and product data, as well as other miscellaneous fields.
I am facing the challenge of needing to hide either the group of product fields or customer fields during PageLoad or other event handlers based on certain backend logic. In the .NET Framework, hiding them individually by ID requires a significant amount of code and manual updates whenever new fields are added.
Attempting to group them in a wrapper and hide that wrapper causes issues with CSS selectors, even when using display: contents.
Is there a way to create a "Pseudo Group" for these elements in the .NET Framework? This would allow me to reference the group of elements in the code behind using a loop or similar method to hide them, without adding an extra layer in the generated HTML markup. I am not interested in rewriting CSS selectors extensively, as the example below illustrates just a fraction of the existing selectors.
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8babeabaea8a3b8ba87bc96">[email protected]</a>/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>