Hi,
I have a .net core submission form with an upload that works at the moment, the form submits successfully, and the files are transferred to S3. Is it possible to convert this form to ajax submission and display the loader whilst the form and uploads are processing before I return my success message?
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();
Is it possible to integrate loader or other wait component to show that server side process is running?
I'm using your loader when I disable forms after an entry/submit. But, I also use your Grid so I'd like the same "progress indicator" used while waiting for the grid datasource to return. So, how do I make the Loader use the same animation as the Grid or how do I make the Grid use the Loader?