Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor execute C# and JS function in one button onclick event

$
0
0

I have a button, which executes a JS function:

<button class="btn-orange btn" onclick="expand(this.closest('.profile'))">JavaScript</button>

And a button, which executes C# and switches icons depending on a bool:

<button class="btn-orange btn"   @onclick="@(() =>   {      if (tempBool)      {         tempBool = !tempBool;      }      else      {         tempBool = true;      }   })"><i class="fa @(tempBool ? "fa-compress" : "fa-expand")" aria-hidden="true"></i></button>

How can I combine them?

I tried it with the OnClientClick Event, with JsRuntime.InvokeVoidAsync("expand(this.closest(.profile))");, or by putting both in the onclick event.

How can I execute a JavaScript function and C# in a button onclick event?

My JavaScript code I try to execute

EventPageExpandable.js:

function expand(card) {    card.classList.toggle('profile--expanded');    // If card is not expanded after toggle, add 'unexpanded' class    if (!card.classList.contains('profile--expanded')) card.classList.toggle('profile--unexpanded');    // Else if card is expanded after toggle and still contains 'unexpanded' class, remove 'unexpanded'    else if (card.classList.contains('profile--expanded') && card.classList.contains('profile--unexpanded')) card.classList.toggle('profile--unexpanded');}

How I tried to use JsRuntime:

await JsRuntime.InvokeVoidAsync("EventPageExpandable.expand", "this.closest('.profile')");

Or like this? But both doesn't work.

await JsRuntime.InvokeVoidAsync("expand", "this.closest('.profile')");```

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>