Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
146809 | Aug 20,2019 10:04 PM UTC | Jan 8,2020 01:20 PM UTC | Blazor | 3 |
![]() |
Tags: Progress Button |
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
}
…….
},
}
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.