How to dynamic control the WaitingPopup show or hide.

[Timo]

I have a async controller in my asp.net core project.

I now wan to make the WaitingPopup show on cshtml when the async task is starting and running.

When the async task is completed, I want to make the WaitingPopup hide.

public async Task<ActionResult> WaitingPopupFeatures()

        {

            WaitingPopupProperties wp = new WaitingPopupProperties();

            wp.ShowOnInit = true;

            wp.AppendTo = ".cols-sample-area";

            // Make WaitingPopup show

            await Task.Run(async()=> {

                //do something

            });

            // Make WaitingPopup hide

            return View();

        }

[Keerthana Rajendran]

Hi Xavier 

 

Thank you for using Syncfusion products. 

 

You can show or hide the waiting popup using show() or hide() methods. Here, we have executed the asynchronous task on button click through AJAX and the waiting popup will be hidden during AJAX success event. 

 

<form asp-controller="WaitingPopup" asp-action="LoadData" method="post" class="form-horizontal" role="form"> 

    <div class="form-group"> 

        <table id="target"> 

            <tr> 

                <td>Username</td> 

                <td><input type="text"></td> 

            </tr> 

            <tr> 

                <td>Password</td> 

                <td><input type="password"></td> 

            </tr> 

            <tr> 

                <td></td> 

                <td> 

                    <ej-button id="buttonnormal" text="Login" size="@ButtonSize.Large" create="btnLoad" click="btnClick" /> 

                </td> 

                <ej-waiting-popup id="target" show-on-init="false" /> 

            </tr> 

        </table> 

    </div> 

</form> 

<script> 

        function btnClick(e) { 

            var wp = $("#target").data("ejWaitingPopup"); 

            wp.show(); 

            $.ajax({ 

                url: "/WaitingPopup/LoadData", 

                type: "POST", 

                dataType: "json", 

                contentType: 'application/json; charset=utf-8', 

                success: function (data) { 

                    wp.hide(); 

 

                } 

 

            }) 

        } 

 

 

</script> 

 

public async Task<ActionResult> LoadData() 

        { 

            await Task.Run(async () => 

            { 

                Thread.Sleep(1000); 

            }); 

 

            return Json("Successfully Registered "); 

        } 

 

We have attached a sample for your reference which can be downloaded from the below link 

 

http://www.syncfusion.com/downloads/support/forum/135219/7z/SyncfusionASPNETCoreApplication1-899612305 

 

Regards, 

Keerthana.