CODEWITHSUNDEEP
c#htmlblazorwebassembly
user14210573
user14210573

Reputation:

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

I have Page.razor which looks like this:

<div class="foo">bar</div>
<div class="wing">dings</div>
<button class="btn btn-primary" @onclick="HideFooClass">Hide Foo Class</button>

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.

Upvotes: 1

Views: 1715

Answers (4)

Bennyboy1973
Bennyboy1973

Reputation: 4208

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.

<button @onclick='()=>foo=true'>Show</button>

@if (foo)
{
    <div class="fooformatting">@bar</div>
}

@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.

Upvotes: 0

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30046

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

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

The demo page shows the two methods in action.

DivComponent
@if (this.Show)
{
    <div @attributes="this.UserAttributes">
        @this.ChildContent
    </div>
}
@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public bool Show { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public IDictionary<string, object> UserAttributes { get; set; } = new Dictionary<string, object>();
}
CssComponent
@if (this.Show)
{
    <style>
        .foo {
            display: none;
        }
    </style>
}

@code {
    [Parameter] public bool Show { get; set; }
}
Demo Page
@page "/Test10"
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<DivComponent Show="_foo" class="bg-danger text-white m-2 p-2">bar</DivComponent>
<DivComponent Show="_wing" class="bg-success text-white m-2 p-2">dings</DivComponent>
<CSSComponent Show="_css" />
<div class="foo">Foo</div>
<div class="bar">Bar</div>
<div class="foo">Foo</div>
<div class="bar">Bar</div>
<div class="foo">Foo</div>
<div class="bar">Bar</div>
<button class="btn btn-danger" @onclick="() => { _foo = !_foo; }">Show/Hide Foo</button>
<button class="btn btn-success ms-2" @onclick="() => { _wing = !_wing; }">Show/Hide Ding</button>
<button class="btn btn-warning ms-2" @onclick="() => { _css = !_css; }">Show/Hide CSS</button>

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

Upvotes: 0

Nicola Biada
Nicola Biada

Reputation: 2800

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:

<button class="btn btn-primary" @onclick="@(() => Hide("foo"))>Hide Foo Class</button>

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

<button class="btn btn-primary" @onclick="@(args => Hide("foo", args))>Hide Foo Class</button>

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 <head> 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";
    }
}

Upvotes: 0

Berlm
Berlm

Reputation: 467

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:

<button class="btn btn-primary" @onclick='() => HideClass("foo")'> Hide Foo Class</button>

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.

Upvotes: 1

Related Questions