Pavan Sista
Pavan Sista

Reputation: 92

Call multiple functions using @onclick in Blazor web pages

Two functions in blazor component should be called when I click on the button. Tried with comma, semicolon and parenthesis. Nothing works.

  <div class="col-md-auto"><button type="button" class="btn btn-light btn-sm" @onclick="@SearchTable"@*call two methods SearchTable and SortTable*@>Search</button></div>

The two functions are given below

@functions{
    public void SearchTable()
    {
        foreach (KeyValuePair<int, SearchCriteria> entry in SearchCritRefs)
        {
            entry.Value.setSearchCriteria(entry.Key);
        }
    }

    public void SortTable()
    {
        foreach (KeyValuePair<int, SortCriteria> entry in SortCritRefs)
        {
            entry.Value.setSortCriteria(entry.Key);
        }
    }

}

Upvotes: 6

Views: 10645

Answers (2)

DotNetDublin
DotNetDublin

Reputation: 798

I would adopt the approach of calling a single function which can then call as many subsequent functions as required.

<button type="button" class="btn btn-light btn-sm" @onclick="@PerformSearch">Search</button>
@code{
    
    public void PerformSearch()
    {
        SearchTable();
        SortTable();
    }

    public void SearchTable()
    {
        foreach (KeyValuePair<int, SearchCriteria> entry in SearchCritRefs)
        {
            entry.Value.setSearchCriteria(entry.Key);
        }
    }

    public void SortTable()
    {
        foreach (KeyValuePair<int, SortCriteria> entry in SortCritRefs)
        {
            entry.Value.setSortCriteria(entry.Key);
        }
    }

}

Upvotes: 3

enet
enet

Reputation: 45596

Do something like this:

<div class="col-md-auto"><button type="button" class="btn btn-light btn-sm"
    @onclick="@(() => { SearchTable(); SortTable(); })">Search</button></div>

<div>@message1</div>
<div>@message2</div>

@code{
    private string message1;
     private string message2;

   
    public void SearchTable()
    {
       message1 = "SearchTable";
    }

    public void SortTable()
    {
       message2 = "SortTable";
    }

}

Note: I've shown you how to call two methods when the click event is triggered as this is your question. If it is wise to code like that is something altogether different.

Upvotes: 16

Related Questions