Dynamically change the Body for a component in Blazor

Question

I'm trying to achive a search functionality for Blazor-server where the idea is to use it anytime on the site by typing on a search box which causes the page to change the @Body for a component that shows the results of the search.

Currently I'm able to do the search well on the MainLayout but this is by having already a list there and the Body component either below or on top. What I need is to only show the List AFTER I input something on the search bar and to replace it with the Body.

Here is what works but whithout the issue I am having.

    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" @oninput="(ChangeEventArgs e)=>SearchHandler(e)" />

        <BrowseListShared @ref="BrowseListShared" />
        @Body

code{
    public string Searched { get; set; }
    protected BrowseListShared BrowseListShared;

    public void SearchHandler(ChangeEventArgs e)
    {
        Searched = e.Value.ToString();
        BrowseListShared.UpdadeMe(Searched);
    }
}

And this is my attempt at trying to make the replacement which gives me the error "Object reference not set to an instance of an object.", the Error shows when I type something in the search box.

        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" @oninput="(ChangeEventArgs e)=>SearchHandler(e)" />

        @if (setVisible){
            <BrowseListShared @ref="BrowseListShared" />
         }else{
             @Body
         }

    code{
        public string Searched { get; set; }
        protected BrowseListShared BrowseListShared;
        private bool setVisible=false;
    
        public void SearchHandler(ChangeEventArgs e)
        {
            if (e != null && e.Value.ToString() != ""){
            setVisible = true;
            }else{
            setVisible=false;
            }
            Searched = e.Value.ToString();
            BrowseListShared.UpdadeMe(Searched);
        }
    }

Hope someone can give me some direction to deal with this, thank you.

Edit:

Adding if(BrowseLit != null) to avoid error does make it work with some issues.

1- the first character makes so it shows just the list without the search because on the first character the code doesnt have the reference yet for the BrowseListShared so it skips the BrowseListShared.UpdateMe for the first tipe.

2- On deleting the text in the box completely until its blank and typing again will cause this error 'Cannot access a disposed object.'

rdmptn rdmptn · Accepted Answer · 2021-01-06T19:55:20

There shouldn't be an issue to add a small if-block, the following is a basic concept that works for me:

<button @onclick="@( () => test = !test )">test</button>
@if (!test)
{
    @Body
}
else
{
    <span>some other search content - use a component here 
    and pass the data as a parameter to it, and its OnParametersSetAsync
    can fetch needed data: @test</span>
}

@code{
    bool test { get; set; }
}

I would also suggest you try using parameters for the search details instead of a reference.

If you want to show a particular page with search results, you can consider navigating the user to that page (e.g., pass the search query as a route parameter to it) - then it will render only what you want in the @Body - which can range from nothing, to search results, to a lot of other things.

Dynamically change the Body for a component in Blazor

1 Answers