3

I want to create a splash screen when i click a save button showing message "Your data are being save. Please wait...". Im using MVC 5 for my development.

Below i created a div:

<div id="divSplash" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #ffffff; display:none">
<p style="position: absolute; top: 30%; left: 45%; color: White;">
    Your data are being save. Please wait...<img src="../../Images/ajax-loading.gif">
</p>
</div>

Really appreciate if your guys can help to solve it. Thank you.

eikaz
  • 401
  • 8
  • 17
  • Are you posting the data using ajax? –  May 05 '15 at 05:19
  • No..i using post method in MVC to save the data.. – eikaz May 05 '15 at 06:16
  • As soon as you click a 'submit' button, you leave the page, so attempting to display a message on a page which no longer exists would be kind of pointless. –  May 05 '15 at 06:18
  • i need to create the loading image because when the user click the save button, i will take 2-3 minutes to save the data into the db..any suggestion on how to create it? – eikaz May 05 '15 at 06:32
  • One option would be to post the form using ajax, then you can display the loading image immediately before the call, then in the success callback, redirect to another view. –  May 05 '15 at 06:35
  • do you have example @stephen on how to create it? – eikaz May 05 '15 at 06:47

2 Answers2

0

You need to make an ajax call and use something like this: 

$.getJson()("/ap/...,
 function(data){
//logic here
$("#divSplash").show();
//do processing
$("#divSplash").hide();
}
}
Mahesh Kava
  • 773
  • 5
  • 16
0

I think you should use Ajax Form.

@using (Ajax.BeginForm("PerformAction",
    new AjaxOptions { LoadingElementId="divSplash", OnSuccess = "OnSuccess" }))
{
    ...
    <input type="submit" value="Submit" />
}

<div id="divSplash" style="display: none;">
    <img src="loading.gif" alt="Loading..." />
</div>

How to use Ajax.BeginForm That is the old post but having very clear explanation.

Community
  • 1
  • 1
Ashwini Verma
  • 7,477
  • 6
  • 36
  • 56
  • hi @aswini..here im using this code: using (Html.BeginForm(null, null, FormMethod.Post, new { id = "formID" })).. how can i change it using the ajax.beginform ? – eikaz May 05 '15 at 07:50
  • @eikaz - Please mark it as answer if it solved your problem. Thanks –  Sep 23 '18 at 09:21