'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 |
