Loading / Please Wait for Popups in MVC View
I have developed a web application using MVC architecture. My controller takes a while to process the input, send it to the server and return it back to the view. I want a Load / Wait-Wait popup to be displayed and automatically quit when the ActionResult returns a view. The relevant part in my controller looks like this:
[HttpPost][STAThread]
public ActionResult Index(DropDownModel model)
{
BillingToolInterface_1.Program p = new BillingToolInterface_1.Program(state, billtype, recurring, budget, paytype, IA, spanish, veteran, status, LDC, rate, adjustments, billtemplate, readtype, server1, server2, choice, paramcheck);
//above step takes like 15 seconds to put the server result in
//DataJoin.Connector.data. I want a dialog to be displayed during this time.
model.Message = DataJoin.Connector.data;
return View(model);
}
+1
source to share
1 answer
You can use something like this to submit your form:
@using (Ajax.BeginForm("Index", "Controller", null, new AjaxOptions {HttpMethod = "POST", LoadingElementId = "please-wait"}, new {-- some html if needed --}))
This will show the pending message before the callback completes. Wait, wait a few times, for example:
<div id="please-wait" style="display: none;">
<div class="modal"></div>
<div class="spinner">Loading...</div>
</div>
The css for this markup might be (not the best css, but works):
#please-wait
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#please-wait .modal
{
z-index: 1999;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
-moz-opacity: 0.5;
background-color: black;
margin-left: 0;
}
#please-wait .spinner
{
z-index: 2000;
padding-top: 20px;
padding-left: 20px;
background: #E5E5E5 url("loading.gif") no-repeat 15px center;
width: 120px;
height: 40px;
border: 2px solid #666;
font-weight: bold;
text-align: center;
position: relative;
margin-left: auto;
margin-right: auto;
top: 35%;
display: block;
}
+1
source to share