ASP.NET Core Load Partial View using Ajax with Spinner

Question

Hi,

I can load my Partial View Using Ajax. But I failed to show the Spinner to User. Need help on Spinner. Here my code,

Models ( FoodGet.cs )

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using Microsoft.AspNetCore.Mvc.Rendering;  
  
namespace PartialViewWithoutReloadWholePage.Models  
{  
    public class FoodGet  
    {  
        //public IEnumerable<SelectListItem> Cities { get; init; }  
        public string Id { get; set; }  
        public string Value { get; set; }  
        public string FoodName { get; set; }  
  
         
    }  
}  

Controllers ( CityController.cs )

using Microsoft.AspNetCore.Mvc;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using Microsoft.AspNetCore.Mvc.Rendering;  
using PartialViewWithoutReloadWholePage.Models;  
  
namespace PartialViewWithoutReloadWholePage.Controllers  
{  
    public class CityController : Controller  
    {  
        //public FoodGet valueObject = new FoodGet();  
        public IActionResult Index()  
        {  
            //Creating the List of SelectListItem, this list you can bind from the database.  
            List<SelectListItem> cities = new()  
            {  
                new SelectListItem { Value = "1", Text = "New York" },  
                new SelectListItem { Value = "2", Text = "Milan" },  
                new SelectListItem { Value = "3", Text = "Tokyo" },  
                new SelectListItem { Value = "4", Text = "Seoul" },               
            };  
           
            //assigning SelectListItem to view Bag  
            ViewBag.cities = cities;  
            ViewBag.preSelectCity = "1";  
  
            //valueObject.Value = "3";  
  
            List<FoodGet> food = new List<FoodGet>  
            {  
            new FoodGet { Id = "1",  Value = "1", FoodName="Cheese Cake" },  
            new FoodGet { Id = "2",  Value = "1", FoodName="Pizza" },  
            new FoodGet { Id = "3",  Value = "1", FoodName="Hot Dog" },  
            new FoodGet { Id = "4",  Value = "2", FoodName="Spaghetti" },  
            new FoodGet { Id = "5",  Value = "2", FoodName="Carbonara" },  
            new FoodGet { Id = "6",  Value = "3", FoodName="Soba" },  
            new FoodGet { Id = "7",  Value = "4", FoodName="Samgyetang" },  
            new FoodGet { Id = "8",  Value = "4", FoodName="Bulgogi" },  
            };  
  
            var queryFoods = from _food in food  
                             where _food.Value == ViewBag.preSelectCity  
                             select _food;  
  
            return View(queryFoods);  
        }  
  
        [HttpGet]  
        public ActionResult InfoBox01(string Value)  
        {  
            List<FoodGet> food = new List<FoodGet>  
            {  
            new FoodGet { Id = "1",  Value = "1", FoodName="Cheese Cake" },  
            new FoodGet { Id = "2",  Value = "1", FoodName="Pizza" },  
            new FoodGet { Id = "3",  Value = "1", FoodName="Hot Dog" },  
            new FoodGet { Id = "4",  Value = "2", FoodName="Spaghetti" },  
            new FoodGet { Id = "5",  Value = "2", FoodName="Carbonara" },  
            new FoodGet { Id = "6",  Value = "3", FoodName="Soba" },  
            new FoodGet { Id = "7",  Value = "4", FoodName="Samgyetang" },  
            new FoodGet { Id = "8",  Value = "4", FoodName="Bulgogi" },  
            };  
  
            var queryFoods = from _food in food  
                             where _food.Value == Value  
                             select _food;  
  
            return PartialView("InfoBox01", queryFoods);  
        }  
  
  
  
  
  
  
  
    }  
}  

Views ( Index.cshtml )

@model IEnumerable<PartialViewWithoutReloadWholePage.Models.FoodGet>  
  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  
<style>  
    .center-div {  
        width: 300px;  
        height: 300px;  
        position: absolute;  
        left: 50%;  
        top: 50%;  
        margin-left: -150px;  
        margin-top: -150px;  
    }  
  
    .spinner {  
        position: fixed;  
        z-index: 999;  
        height: 100%;  
        width: 100%;  
        top: 0;  
        left: 0;  
        background-color: Black;  
        filter: alpha(opacity=60);  
        opacity: 0.6;  
        -moz-opacity: 0.8;  
    }  
  
    .loader {  
        margin: auto;  
        border: 16px solid #f3f3f3;  
        border-radius: 50%;  
        border-top: 16px solid #15a0ec;  
        border-bottom: 16px solid #15a0ec;  
        width: 120px;  
        height: 120px;  
        -webkit-animation: spin 2s linear infinite;  
        animation: spin 2s linear infinite;  
    }  
  
    .inner-div {  
        background-color: white;  
        border-radius: 15px;  
        margin: auto;  
        padding: 2%;  
        width: 150px;  
    }  
  
    @@-webkit-keyframes spin {  
        0% {  
            -webkit-transform: rotate(0deg);  
        }  
  
        100% {  
            -webkit-transform: rotate(360deg);  
        }  
    }  
  
    @@keyframes spin {  
        0% {  
            transform: rotate(0deg);  
        }  
  
        100% {  
            transform: rotate(360deg);  
        }  
    }  
</style>  
  
<hr />  
<div class="row">  
    <div class="col-md-4">  
        <div class="form-group">  
  
            <label class="control-label"> Select City</label>  
  
            <select id="products" name="products"  
                    class="form-control" asp-items="@ViewBag.cities"></select>  
  
        </div>  
    </div>  
</div>  
  
<div class="row">  
    <div id="InfoBox">  
  
    </div>  
  
  
</div>  
  
  
  
<script type="text/javascript">  
  
    $("#products").change(function () {  
  
        $("#InfoBox").load("@Url.Action("InfoBox01")" + "?value=" + this.value);  
       }).trigger();  
  
  
</script>  
  
**<div class="spinner" style="display:none">  
    <div class="center-div">  
        <div class="inner-div">  
            <div class="loader"></div>  
        </div>  
    </div>  
</div>**  
  
**<script>  
    $(document).ready(function () {  
        $('#ActionSubmit').click(function () {  
            $('.spinner').css('display', 'block');  
        });  
    });  
</script>**  

Views ( InfoBox01.cshtml )

@model IEnumerable<PartialViewWithoutReloadWholePage.Models.FoodGet>  
  
<table>  
    <tr>  
        <td>No&nbsp;&nbsp;&nbsp;</td>  
  
        <td>Id&nbsp;&nbsp;&nbsp;</td>  
        <td>Value&nbsp;&nbsp;&nbsp;</td>  
        <td>Food Name&nbsp;&nbsp;&nbsp;</td>         
    </tr>  
  
    @foreach (var item in Model.Select((x, i) =>  
  new { Data = x, Index = i }))  
    {  
        <tr>  
            <td>@(item.Index + 1)</td>  
  
            <td>@item.Data.Id</td>  
            <td>@item.Data.Value</td>  
            <td>@item.Data.FoodName</td>  
                          
        </tr>  
    }  
</table>  

Please help me

Answer 1

The spinner is designed to show when a form is submitted but your code does not submit a forum. It submits an AJAX request therefore you must show/hide the spinner in script. Please read the jQuery load reference documentation.

Example script.

$('.spinner').hide();

$("#products").change(function () {
    $('.spinner').show();
    $("#InfoBox").load("@Url.Action("InfoBox01")", function () { $('.spinner').hide(); });
});

Secondly, styles must be placed in the head tag within the _layout.cshtml page.

Answer 2

Hi @AgaveJoe

It's working. Thanks