Display Waiting Popup

[Stefano Capobianco]

Hi support, i need to display the waiting popup to execute the login operations.

This is my login form

@model dsm.webapplication.Areas.Security.ViewModels.AccountViewModels.LoginViewModel

@inject SignInManager<ApplicationUser> SignInManager

@{

    ViewBag.Title = "Home";

    Layout = "~/Views/Shared/_LayoutLogin.cshtml";

}

<div class="loginColumns animated fadeInDown">

    <div class="row">

        <div class="ibox" id="iboxLogin">

            <div class="col-md-6">

                <img src="~/images/testata_giuva_blu_piatto.png" />

            </div>

            <div class="col-md-6">

                <div class="ibox-content">

                    <h3 class="font-bold">Benvenuti nel Sistema Informatico</h3>

                    <form id="targetArea" class="m-t" role="form" asp-controller="Account" asp-action="Login" asp-area="Security" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post">

                        <div class="form-group">

                            <input asp-for="UserName" class="form-control" placeholder="Username" required="" value="administrator">

                            <span asp-validation-for="UserName" class="text-danger"></span>

                        </div>

                        <div class="form-group">

                            <input asp-for="Password" type="password" class="form-control" placeholder="Password" required="" value="$Password1965">

                            <span asp-validation-for="Password" class="text-danger"></span>

                        </div>

                        <div asp-validation-summary="All" class="text-danger"></div>

                        <button id="Login" type="submit" class="btn btn-primary block full-width m-b" >Login</button>

                    </form>

                </div>

            </div>

        </div>

    </div>

    <hr />

    <div class="row">

        <div class="col-md-6">

            Dental Studio Manager

        </div>

        <div class="col-md-6 text-right">

            <small>© 2015-2020</small>

        </div>

    </div>

</div>

How can i display the popup. If it's possible without changing the form's post mechanism

Thanks in advance

Stefano Capobianco

[Keerthana Rajendran]

  

Hi Stefano, 

 

Thank you for contacting Syncfusion support. 

 

We suggest you to render the waiting popup in your sample with showOnInit set to false initially. You can show this popup using show() method on submit button click as shown below 

 

<form id="targetArea" class="m-t" role="form" asp-controller="Home" asp-action="Contact" asp-area="Security" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" onsubmit="success"> 

                        <div id="target"> 

                            <div class="form-group"> 

                                <input asp-for="UserName" class="form-control" placeholder="Username" required="" value="administrator"> 

                                <span asp-validation-for="UserName" class="text-danger"></span> 

                            </div> 

                            <div class="form-group"> 

                                <input asp-for="Password" type="password" class="form-control" placeholder="Password" required="" value="$Password1965"> 

                                <span asp-validation-for="Password" class="text-danger"></span> 

                            </div> 

                            <div asp-validation-summary="All" class="text-danger"></div> 

                            <button id="Login" type="submit" class="btn btn-primary block full-width m-b" onclick="formsubmit()">Login</button> 

 

                        </div>   

                          </form> 

                </div> 

            </div> 

        </div> 

    </div> 

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

     

<script> 

 

    function formsubmit() 

    { 

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

        popupobj.show(); 

    } 

     

</script> 

 

In our sample we have rendered the wrapper of input controls as waiting popup. You can modify this based on your requirement. Also, you can access the waiting popup properties in controller by using the below code 

 

   WaitingPopupProperties wp = new WaitingPopupProperties(); 

wp.ShowOnInit = true; 

 

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

 

http://www.syncfusion.com/downloads/support/forum/134690/ze/Waitingpopup-369426177 

 

Regards, 

Keerthana. 

[Stefano Capobianco]

Hi i've tried but the solution don't work.

This is thed view like as you send me

@model dsm.webapplication.Areas.Security.ViewModels.AccountViewModels.LoginViewModel

@inject SignInManager<ApplicationUser> SignInManager

@{

    ViewBag.Title = "Home";

    Layout = "~/Views/Shared/_LayoutLogin.cshtml";

}

<div class="loginColumns animated fadeInDown">

    <div class="row">

        <div class="ibox" id="iboxLogin">

            <div class="col-md-6">

                <img src="~/images/testata_giuva_blu_piatto.png" />

            </div>

            <div class="col-md-6">

                <div class="ibox-content">

                    <h3 class="font-bold">Benvenuti nel Sistema Informatico</h3>

                    <form class="m-t" role="form" asp-controller="Account" asp-action="Login" asp-area="Security" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" onsubmit="success">

                        <div id="target">

                            <div class="form-group">

                                <input asp-for="UserName" class="form-control" placeholder="Username" required="" value="administrator">

                                <span asp-validation-for="UserName" class="text-danger"></span>

                            </div>

                            <div class="form-group">

                                <input asp-for="Password" type="password" class="form-control" placeholder="Password" required="" value="$Password1965">

                                <span asp-validation-for="Password" class="text-danger"></span>

                            </div>

                            <div asp-validation-summary="All" class="text-danger"></div>

                            <button id="Login" type="submit" class="btn btn-primary block full-width m-b" onclick="formsubmit()">Login</button>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

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

    <hr />

    <div class="row">

        <div class="col-md-6">

            Dental Studio Manager

        </div>

        <div class="col-md-6 text-right">

            <small>© 2015-2020</small>

        </div>

    </div>

</div>

<script>

   function formsubmit() {

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

        popupobj.show();

    }

</script>

 

The success inside onsubmit give me an error

This is my layout

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>DSM - Accesso al sistema</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    @if (IsSectionDefined("Styles"))

            {@RenderSection("Styles", required: false)}

    <environment names="Development">

        <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.css" />

        <link rel="stylesheet" rel='nofollow' href="~/lib/font-awesome/css/font-awesome.css" />

        <link rel="stylesheet" rel='nofollow' href="~/lib/animate.css/animate.css" />

        <link rel="stylesheet" rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css"  />

        <link rel="stylesheet" rel='nofollow' href="~/css/style.css" asp-append-version="true" />

        <script src="~/lib/jquery/dist/jquery.js"></script>

        <script src="~/lib/jsrender/jsrender.js"></script>

        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

        <script src="~/lib/metisMenu/dist/metisMenu.js"></script>

        <script src="~/lib/jquery-slimscroll/jquery.slimscroll.js"></script>

        <script src="~/lib/PACE/pace.js"></script>

        <script src="~/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>

        <script src="~/js/script.js"></script>

    </environment>

    <environment names="Staging,Production">

        <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

        <link rel="stylesheet" rel='nofollow' href="~/lib/font-awesome/css/font-awesome.min.css" />

        <link rel="stylesheet" rel='nofollow' href="~/lib/animate.css/animate.min.css" />

        <link rel="stylesheet" rel='nofollow' href="~/lib/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css" />

        <link rel="stylesheet" rel='nofollow' href="~/css/style.css" asp-append-version="true" />

        <script src="~/lib/jquery/dist/jquery.min.js"></script>

        <script src="~/lib/jsrender/jsrender.min.js"></script>

        <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

        <script src="~/lib/metisMenu/dist/metisMenu.min.js"></script>

        <script src="~/lib/jquery-slimscroll/jquery.slimscroll.min.js"></script>

        <script src="~/lib/PACE/pace.min.js"></script>

        <script src="~/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"></script>

        <script src="~/js/script.js"></script>

    </environment>

</head>

<body class="gray-bg">

    @RenderBody()

    @RenderSection("scripts", required: false)

    @(Html.EJ().ScriptManager())

</body>

</html>

Where i wrong?

Thanks

Stefano

[Keerthana Rajendran]

Hi Stefano, 

 

 

Sorry for the inconvenience. 

 

In the sample, we have shown waiting popup while executing formsubmit method during “onclick” event of button. Kindly remove the onsubmit="success" event in form and use the below code 

 

  <form class="m-t" role="form" asp-controller="Account" asp-action="Login" asp-area="Security" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post"> 

                        <div id="target"> 

                            <div class="form-group"> 

                                <input asp-for="UserName" class="form-control" placeholder="Username" required="" value="administrator"> 

                                <span asp-validation-for="UserName" class="text-danger"></span> 

                            </div> 

                            <div class="form-group"> 

                                <input asp-for="Password" type="password" class="form-control" placeholder="Password" required="" value="$Password1965"> 

                                <span asp-validation-for="Password" class="text-danger"></span> 

                            </div> 

                            <div asp-validation-summary="All" class="text-danger"></div> 

                            <button id="Login" type="submit" class="btn btn-primary block full-width m-b" onclick="formsubmit()">Login</button> 

                        </div> 

                    </form> 

 

 

 

 

Regards, 

Keerthana. 

 

[Stefano Capobianco]

Hi Keerthana, i've solved the first problem. I've not added the ej.web.all.css intomy layout page.

Now the other problem is that: the animated gif don't show. I can see the popap with the square but the animated gif is not showed.

I'm using the following statement : <ej-waiting-popup id="target" show-on-init="false" show-image="true" text="Accesso in corso... Attendere..." />

Thanks in advance

Stefano

[Keerthana Rajendran]

Hi Stefano, 

 

Animated gif of waiting popup will be loaded from images folder within default-theme of content folder. Please ensure whether the images folder is included as shown in the below image in you project. 

 

 

 

If not, kindly include these folder in your project. If the installed location is C drive then the file will be present in the below location 

 

C:\Program Files (x86)\Syncfusion\Essential Studio\15.3.0.33\JavaScript\assets-src\css\web\default-theme\images 

 

Regards, 

Keerthana. 

[Stefano Capobianco]

Hi thanks for your help. At the moment i've suspended the insertion of waiting popup .

Thanks

Stefano

[Keerthana Rajendran]

Hi Stefano, 

 

Most Welcome. Please get back to us if you require any further assistance on this. We will be happy to assist you. 

 

Regards, 

Keerthana.