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.
|
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
}
…….
},
}
|
