Clever Geek Handbook

How to create a splash screen in MVC

I want to create a splash screen when I click the save button that displays the message "Your data is being saved. Please wait ...". Im using MVC 5 for my development.

Below I have 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 solve this problem. Thank.

+3


source to share


2 answers


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



$.getJson()("/ap/...,
 function(data){
//logic here
$("#divSplash").show();
//do processing
$("#divSplash").hide();
}
}
0


source


I think you should be using 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 This is an old post, but with a very clear explanation.

0


source






More articles:


All Articles