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')");```