How to show please wait for a message in a form post in MVC 5 until the controller returns the view
In MVC 5.2.2, I need to process data by submitting values from a form to a web service. When doing this, it takes a while to get the status from the web service and return to the new view. At the same time I need to show, please wait so that the user does not repeat the submission.
public ActionResult PopulateHistory(HistoryModel history)
{
try
{
string policyNumber = history.product.Split(',')[0];
string productCode = history.product.Split(',')[1];
string startDate = code;
string endDate = (DateTime.UtcNow).ToString("yyyy-MM-dd");
Container historyContainer =_History.CreateBusinessObject_History
(policyNumber,productCode,endDate,startDate);
//Getting history from webservice
DataTable historyGridview =_History.GethistoryValues
(historyContainer);
return View(historyGridview);
}
catch (Exception ex)
{
SemanticLogger.Log.Error(ex.ToString());
return View(ex.ToString());
}
}
+3
source to share
2 answers
If you only worry about showing ajax await message, I think you can do the following:
Step 1: Include the following scripts:
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
Step 2: Check the following keys in web.config:
<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
Step 3: Now you can use the following code:
@using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", LoadingElementId = "please-wait" }))
{
<div id="please-wait" style="display: none;">
<div class="modal"></div>
<div class="spinner">Loading...</div>
</div>
<input type="submit" value="Submit" />
}
I tested it using the following code in my controller:
[HttpPost]
public ActionResult Index()
{
Thread.Sleep(3000);
return View();
}
Step 4:
You can apply css to load content as per your requirement. I did the following:
<style>
#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;
position: absolute;
padding-top: 20px;
padding-left: 20px;
background: #E5E5E5 no-repeat 15px center;
width: 120px;
height: 40px;
border: 2px solid #666;
font-weight: bold;
text-align: center;
margin-left: auto;
margin-right: auto;
top: 35%;
display: block;
}
</style>
+1
source to share