Menu
I've written an application that loads partial views when you click "Continue". Sometimes the server hangs a little so I'd like to show some sort of loading message or spinner when the user clicks submit so they know the page is doing something.
This is just your standard form but my submit code looks like this(included a field so you can see an example):
<div class="form-group">
@Html.LabelFor(m => m.JointAdditionalIncomeSource, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
<div class="col-sm-4">
@Html.TextBoxFor(m => m.JointAdditionalIncomeSource, new { @class = "form-control", placeholder = "Additional Income Source" })
@Html.ValidationMessageFor(m => m.JointAdditionalIncomeSource)
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-sm-10">
<div class="col-sm-4">
<input type="submit" value="Back" id="back" class="btn btn-default" />
<input type="submit" value="Continue" id="continue" class="btn btn-default" />
</div>
</div>
</div>
I've looked around on google for ways to do this and so far haven't had any luck. Jquery wouldn't be a bad method to use if anyone has an example of that.
Updates:
This is my current code that is not working.
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script>
$('#continue').submit(function () {
$('#LoanType').hide();
});
</script>
<script type="text/javascript">
function onBegin() {
$("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
}
function onComplete() {
$("#divLoading").html("");
}
</script>
<body>
<!--If user has javascript disabled-->
<noscript>
<div style="position: fixed; top: 0px; left: 0px; z-index: 3000;
height: 100%; width: 100%; background-color: #FFFFFF">
<p style="margin-left: 10px">To continue using this application please enable Javascript in your browser.</p>
</div>
</noscript>
<!-- WIZARD -->
<div id="MyWizard" class="site-padding-top container">
<div data-target="#step1" id="step1" class="app-bg">
<div class="form-horizontal">
<div id="LoanType">
<div class="divider-app">
<p>Loan Type</p>
</div>
@using (Ajax.BeginForm("SelectLoanType", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "step2" }))
{
<div class="form-group">
@Html.LabelFor(m => m.LoanType, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
<div class="col-sm-4">
@Html.DropDownListFor(m => m.LoanType, new SelectList(Model.AllAvailableLoanTypes.Select(x => new { Value = x, Text = x }), "Value", "Text"), new { @class = "form-control", id = "loanType" })
</div>
</div>
</div>
<div class="form-group" id="LoanTypeSubmit">
<div class="col-lg-offset-3 col-sm-10">
<div class="col-sm-4">
<input type="submit" value="Continue" id="continue" class="btn btn-default" />
</div>
</div>
</div>
}
<div id="divLoading"></div>
</div>
The delay in the controller is working.
580
To create a partial view, right-click on view -> shared folder and select Add -> View option. In this way we can add a partial view. It is not mandatory to create a partial view in a shared folder but a partial view is mostly used as a reusable component, it is a good practice to put it in the "shared" folder.
Using Code Step 1: Add loader DIV tag inside body tag. This DIV helps to display the message. Step 2: Add following CSS how it is going to displaying in browser. Step 3: Add following jQuery code when to fadeout loading image when page loads.
In order to add Partial View, you will need to Right Click inside the Controller class and click on the Add View option in order to create a View for the Controller.
Declare partial views In ASP.NET Core MVC, a controller's ViewResult is capable of returning either a view or a partial view. In Razor Pages, a PageModel can return a partial view represented as a PartialViewResult object. Referencing and rendering partial views is described in the Reference a partial view section.
Here goes the complete solution -
Lets say you have an ajax controller like this -
public ActionResult Ajax()
{
return View();
}
Which serves the following ajax view -
@{
ViewBag.Title = "Ajax";
}
<h2>Ajax</h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
function onBegin() {
$("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
}
function onComplete() {
$("#divLoading").html("");
}
</script>
@using (Ajax.BeginForm("LoadRules", "Home", new AjaxOptions { UpdateTargetId = "Rules", OnBegin = "onBegin", OnComplete = "onComplete" }))
{
<input type="submit" value="Load Rules" />
}
<div id="divLoading"></div>
<div id="Rules"></div>
Then when you click on the submit button it will hit the following controller, which has a delay of 5 secs (simulation of long running task) in serving the partial view -
public ActionResult LoadRules(DDLModel model)
{
System.Threading.Thread.Sleep(5000);
return PartialView("MyPartial");
}
and the partial view is a simple view -
<div>
This is Partial View
</div>
Here to show the loaded I simply used the following gif file -
when we click on the submit button it will show the progress in the following way -
And once the delay of 5 secs completes on the server side, it will show the partial view -
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
