We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
Index.razor
@using Syncfusion.EJ2.Blazor
@using Microsoft.JSInterop;
<button class="e-btn" @onclick="@ShowSpinner">Show</button>
<button class="e-btn" @onclick="@HideSpinner">Hide</button>
<div id="container" style="height:600px; position: relative"></div>
@code{
[Inject]
IJSRuntime jsRuntime { get; set; }
object option = new { targetId = "container" };
private async void ShowSpinner(Object args)
{
await JsInterop.CreateSpinner<string>(jsRuntime, this.option);
await JsInterop.ShowSpinner<string>(jsRuntime, this.option);
}
private async void HideSpinner(UIMouseEventArgs args)
{
await JsInterop.HideSpinner<string>(jsRuntime, this.option);
}
}
|
|
JsInterop.cs
public class JsInterop
{
public static Task<T> CreateSpinner<T>(IJSRuntime JSRuntime, object args)
{
try
{
return JSRuntime.InvokeAsync<T>("jsInterop.createSpinner", args); // Invoke createSpinner javascript function
}
….
}
public static Task<T> ShowSpinner<T>(IJSRuntime JSRuntime, object args)
{
try
{
return JSRuntime.InvokeAsync<T>("jsInterop.showSpinner", args); // Invoke showSpinner javascript function
}
…..
}
public static Task<T> HideSpinner<T>(IJSRuntime JSRuntime, object args)
{
try
{
return JSRuntime.InvokeAsync<T>("jsInterop.hideSpinner", args); // Invoke hideSpinner javascript function
}
………
}
}
|
|
jsinterop.js
window.jsInterop = {
createSpinner: function (option) {
try {
var target = document.getElementById(option.targetId);
ejs.popups.createSpinner({ target: target }) // Pass the target and created spinner
}
…..
},
showSpinner: function (option) {
try {
var target = document.getElementById(option.targetId);
ejs.popups.showSpinner(target) // Show spinner
}
…….
},
hideSpinner: function (option) {
try {
var target = document.getElementById(option.targetId);
ejs.popups.hideSpinner(target) // Hide spinner
}
…….
},
}
|
