ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display (Show) Loading GIF Image when populating cascading ListBox in ASP.Net MVC<p>Hi&nbsp;nauna,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p>Refering the below article i have created the example.</p> <h1 class="header"><a href="https://www.aspsnippets.com/Articles/Implement-Cascading-Dependent-DropDownLists-without-jQuery-in-ASPNet-MVC.aspx">Implement Cascading (Dependent) DropDownLists without jQuery in ASP.Net MVC</a></h1> <p><span style="text-decoration: underline;"><strong>Database</strong></span></p> <p>For this example i have used Countries, State and City tables.</p> <p>You can download the database table SQL by clicking the download link below.</p> <p><a href="https://www.aspsnippets.com/DownloadFile.aspx?File=Cascading_Database.sql">Download SQL file</a></p> <p><strong><span style="text-decoration: underline;">Model</span></strong></p> <pre class="brush: csharp">public class CascadingModel { public CascadingModel() { this.Countries = new List&lt;SelectListItem&gt;(); this.States = new List&lt;SelectListItem&gt;(); this.Cities = new List&lt;SelectListItem&gt;(); } public List&lt;SelectListItem&gt; Countries { get; set; } public List&lt;SelectListItem&gt; States { get; set; } public List&lt;SelectListItem&gt; Cities { get; set; } public int[] CountryId { get; set; } public int[] StateId { get; set; } public int[] CityId { get; set; } }</pre> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">public class HomeController : Controller { // GET: Home public ActionResult Index() { Cascading_ddlEntities entities = new Cascading_ddlEntities(); CascadingModel model = new CascadingModel(); foreach (var country in entities.Countries) { model.Countries.Add(new SelectListItem { Text = country.CountryName, Value = country.CountryId.ToString() }); } return View(model); } [HttpPost] public ActionResult Index(int? countryId, int? stateId, int? cityId) { CascadingModel model = new CascadingModel(); Cascading_ddlEntities entities = new Cascading_ddlEntities(); foreach (var country in entities.Countries) { model.Countries.Add(new SelectListItem { Text = country.CountryName, Value = country.CountryId.ToString() }); } if (countryId.HasValue) { var states = (from state in entities.States where state.CountryId == countryId.Value select state).ToList(); foreach (var state in states) { model.States.Add(new SelectListItem { Text = state.StateName, Value = state.StateId.ToString() }); } if (stateId.HasValue) { var cities = (from city in entities.Cities where city.StateId == stateId.Value select city).ToList(); foreach (var city in cities) { model.Cities.Add(new SelectListItem { Text = city.CityName, Value = city.CityId.ToString() }); } } } return View(model); } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;%@ Page Language=&#34;C#&#34; Inherits=&#34;System.Web.Mvc.ViewPage&lt;_Cascading_ListBox_MVC.Models.CascadingModel&gt;&#34; %&gt; &lt;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&gt; &lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;Index&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; .modalBackground { position: fixed; top: 0; left: 0; background-color: black; z-index: 99; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; min-height: 100%; width: 100%; } .loading { font-family: Arial; font-size: 10pt; border: 5px solid #67CFF5; width: 200px; height: 100px; display: none; position: fixed; background-color: White; z-index: 999; } &lt;/style&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-2.2.3.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { $(&#34;#divProcessing&#34;).hide(); if ($(&#34;#StateId option&#34;).length &gt; 1) { $(&#34;#StateId&#34;).removeAttr(&#34;disabled&#34;); } if ($(&#34;#CityId option&#34;).length &gt; 1) { $(&#34;#CityId&#34;).removeAttr(&#34;disabled&#34;); } $(&#39;#btnSubmit&#39;).on(&#39;click&#39;, function () { if ($(&#34;#CountryId&#34;).val() != &#34;&#34; &amp;&amp; $(&#34;#StateId&#34;).val() != &#34;&#34; &amp;&amp; $(&#34;#CityId&#34;).val() != &#34;&#34;) { var message = &#34;Country: &#34; + $(&#34;#CountryId option:selected&#34;).text(); message += &#34;\nState: &#34; + $(&#34;#StateId option:selected&#34;).text(); message += &#34;\nCity: &#34; + $(&#34;#CityId option:selected&#34;).text(); alert(message); } }); var submit = false; $(&#34;form&#34;).on(&#34;submit&#34;, function (e) { var modal = $(&#39;&lt;div /&gt;&#39;); modal.addClass(&#34;modalBackground&#34;); $(&#39;body&#39;).append(modal); var loading = $(&#34;.loading&#34;); loading.show(); var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0); var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0); loading.css({ top: top, left: left }); setTimeout(function () { submit = true; $(&#34;.loading&#34;).hide(); $(&#39;form&#39;).submit(); }, 1000); if (!submit) { e.preventDefault(); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;loading&#34; align=&#34;center&#34;&gt; Loading. Please wait.&lt;br /&gt;&lt;br /&gt; &lt;img alt=&#34;&#34; src=&#34;../../loader.gif&#34; /&gt; &lt;/div&gt; &lt;center&gt; &lt;%using (Html.BeginForm(&#34;Index&#34;, &#34;Home&#34;, FormMethod.Post)) { %&gt; Country : &lt;%:Html.ListBoxFor(m =&gt; m.CountryId, Model.Countries, new { @class = &#34;form-control&#34;, onchange = &#34;$(&#39;form&#39;).submit();&#34; })%&gt;&lt;br /&gt; State : &lt;%:Html.ListBoxFor(m =&gt; m.StateId, Model.States, new { @class = &#34;form-control&#34;, onchange = &#34;$(&#39;form&#39;).submit();&#34;, disabled = &#34;disabled&#34; })%&gt;&lt;br /&gt; City : &lt;%:Html.ListBoxFor(m =&gt; m.CityId, Model.Cities, new { @class = &#34;form-control&#34;, disabled = &#34;disabled&#34; })%&gt;&lt;br /&gt; &lt;input id=&#34;btnSubmit&#34; type=&#34;submit&#34; value=&#34;Submit&#34; class=&#34;btn btn-primary&#34; /&gt; &lt;% }%&gt; &lt;/center&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/ro1ASRr.gif" alt="" width="250" height="459" /></span></strong></p>https://www.aspforums.net:443/Threads/251691/Display-Show-Loading-GIF-Image-when-populating-cascading-ListBox-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/251691/Display-Show-Loading-GIF-Image-when-populating-cascading-ListBox-in-ASPNet-MVC/Wed, 12 Jun 2019 01:44:34 GMT