'Error 404 upon AJAX call to async Task<ActionResult> in MVC

I am trying to make an aJax Call (View-side) to an async Task<> function on the Controller-side and returning the result back to the ajax call for some other functions later on.

Controller Snippet

using Microsoft.AspNetCore.Identity;
using System.Security.Claims;

    public class DataController : Controller
    {
        private UserManager<AppUser> _userManager { get; }
        private SignInManager<AppUser> _signInManager { get; }
        public CSVController(SignInManager<AppUser> signInManager, UserManager<vFarmAppUser> userManager)
        {
            _userManager = userManager;
            _signInManager = signInManager;
        }

        public async Task<ActionResult> RetrieveDataAsync(string time)
        {
            var count = 0;
            using (var context = new DataDbContext())
            {
                proxyRecords = context.Datas.ToList();
                count = proxyRecords.Count();
            }

            var userId = this.User.FindFirstValue(ClaimTypes.Name);
            Console.WriteLine(userId);
            AppUser user = await _userManager.FindByNameAsync(userId);

            var metaHolder = new ModelClass
            {
                UniqueId = 1000,
                dataTime = time,
                RecordNo = count,
                Topic = user.Topic
            };
            Console.WriteLine(metaHolder);
            return Json(metaHolder);
        }
    }

View Snippet

<div style="width: 100%; width: 1100px; background-color: none">
    <div>
        <button id="btnSave" class="btn btn-primary">Save Data</button>
    </div>
</div>    
@section Scripts
{
    <script type="text/javascript">
    
        $(document).ready(function () {
            Init();
        });

        function Init() {
            _oRecord = [];
            _metaData = [];

            $("#btnSave").click(function () {
                $.ajax({
                    url: '../Data/RetrieveProxy/',
                    cache: false,
                    dataType: "json",
                    success: function (result) {
                        _oRecords = result;
                        var d = new Date();
                        var getDate = [d.getFullYear(), d.getMonth(), d.getDay()].map((a) => (a < 10 ? '0' + a : a));
                        var getJoinedDate = getDate.join(':');
                        var getTime = [d.getHours(), d.getMinutes(), d.getSeconds()].map((a) => (a < 10 ? '0' + a : a));
                        var getJoinedTime = getTime.join(':');
                        var getDateTime = getJoinedDate + "-" + getJoinedTime;

                        RetrieveDataFoo(getDateTime);                    
                    },
                });
            });
        };

        function RetrieveDataFoo(getDateTime) {
                $.ajax({
                    url: '../CSV/RetrieveDataAsync/',
                    type: "POST",
                    data: { time: getDateTime },

                    success: function (result) {
                        _metaDatas = result;
                        alert(JSON.stringify(_metaDatas));
                    },
                    error: function (error) {
                        alert(error.statusText);
                    }
                });
        };
    </script>
}

Currently, the 1st ajax call to /Data/RetrieveProxy/ works perfectly fine but the 2nd ajax call does not work. I was trying to solve it by following this Post but to no avail, unfortunately.



Solution 1:[1]

Turns out, I just needed to ignore the Async in the URL as mentioned here, i.e., ../CSV/RetrieveData/ instead of ../CSV/RetrieveDataAsync/.

Updated View Snippet

        function RetrieveDataFoo(getDateTime) {
                $.ajax({
                    url: '../CSV/RetrieveData/',     // Does not have `Async` suffix
                    type: "POST",
                    data: { time: getDateTime },

                    success: function (result) {
                        _metaDatas = result;
                        alert(JSON.stringify(_metaDatas));
                    },
                    error: function (error) {
                        alert(error.statusText);
                    }
                });
        };

Controller Snippet - Function Name

        # Inclusion of `Async` Suffix as part of VSTHRD200 .net Guideline
        public async Task<ActionResult> RetrieveDataAsync(string time)
        {
              // Do Async Stuff
        }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ajax