Hide all divs of a certain class with C# in Blazor

Question

I have Page.razor which looks like this:

bar
dings

What C# code could be used for HideFooClass that could be modified to hide wing instead if the code was adapted?

Currently I make class a variable, fooVisibility. HideFooClass then changes the value of fooVisibility to one of a class with the CSS property visibility: hidden. I would prefer to be able to make a generic HideClass method which takes would take the string foo to replace HideFooClass so I could use it to hide the wing class.

user_14004563 · Answer

What you can do is pass an argument that tells what class to hide. Then for each element in the class (I presume there can be many because you used a class not id), you add another class called hidden. Then in CSS, you just set display: none for the hidden class.

This way any element with the hidden class will be hidden for good, until you of course remove it.

So you do this:

Then in the HideClass method, you have the same logic, but instead you add the hidden class to all elements with that class.

Do know that you can actually do this in plain JS which is MUCH better, because normally with blazor you will have to call a JS method via c#, which is just extra processing.

user_11109967 · Answer

I don't understand why you need a CSS to hide the class. You can use Blazor to do this work for you.

Anyway, if you prefer this approach you can call the methods like so:

if you need to receive the original args use this form:

and the methods will be:

[Inject] IJSRuntime JS { get; set; }
...
public async Task Hide(string element, MouseEventArgs args) 
{
    await JS.InvokeVoidAsync("SiteFunctions.hideElement", element);
}

now you need a javascript, referenced in you tag, with this content:

window.SiteFunctions = window.SiteFunctions || {
hideElement: function (id) {
        $("." + id).hide();
// or without jquery
        var ele = document.getElementByClassName(id); 
        ele.style.visibility = "hidden";
    }
}

user_13065781 · Answer

Some alternative Blazor approaches - it depends where all the Foo divs are.

Method 1 uses a component with a show hide to show or hide the content within the component.
Method 2 uses the same approach but adds/hides some css.

The demo page shows the two methods in action.

DivComponent

@if (this.Show)
{
    
        @this.ChildContent
    
}
@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public bool Show { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public IDictionary UserAttributes { get; set; } = new Dictionary();
}

CssComponent

@if (this.Show)
{
    
}

@code {
    [Parameter] public bool Show { get; set; }
}

Demo Page

@page "/Test10"
bar
dings
bar
dings
bar
dings
bar
dings
bar
dings
bar
dings
bar
dings
bar
dings
bar
dings
bar
dings
bar
dings

Foo
Bar
Foo
Bar
Foo
Bar




@code {
    private bool _foo;
    private bool _wing;
    private bool _css;
}

user_3433178 · Answer

You CAN do this, but don't. Presumably you won't be turning divs on and off just for the helluvit-- you'll be hiding and showing components or elements based on change in state.

In Blazor, you should use C# to test for the desired change of state, and avoid using JS and CSS unnecessarily.



@if (foo)
{
    @bar
}

@code {
    string bar = "I have revealed my true form";
    bool foo;
}

There are zero cases where I've ever had to use JavaScript to hide and show elements in Blazor. Note that fooformatting is now being used only to format bar with CSS, not as a hack to let jQuery find the div and toggle its visibility.

Hide all divs of a certain class with C# in Blazor

4 Answers

DivComponent

CssComponent

Demo Page