Use loader to stop user from interaction until data saved/redirect

[DoomerDGR8]

I have a general idea of the flow:

(i) Assign a unique id to your form (eg form-id) by changing your form code to:

@using (Html.BeginForm("SaveCountry", "Country", FormMethod.Post, new { id = "form-id" })) {
}

(ii) Put the loader on your page with a unique id. The div is hidden until the form is submitted. Need to use Kendo Loader here and place it in either a partial view or in _Layout so it is always available as hidden--by-default

(iii) Style the loader / loading div to go somewhere useful.

(iv) Show the loader when the form is submitted (and after any validation has been completed), for example (not sure about this):

<script>
    $("#form-id").on("submit", function () {
        $("#divLoading").show();
    });
</script>

(v) Given that the page will redirect, I can probably leave the loader until the page redirects. But if I need to hide the loader before that happens, I can use (Kendo Loader here + function defined in _layout as well):

$("#divLoading").hide();

Now I just need to use Kendo Loader with the above flow.

[Aleksandar]

Hello,

I am not sure I understand the issue at hand. If further details on the Loader configuration are required refer to the Loader documentation section. If desired you can show a mask over a container and use the loader to indicate there is a process going on. The documentation linked above provides an example for this and a runnable version can be reviewed in this REPL.