Asynchronous JsonResult Method returns 404 when calling from AJAX passing an ID attribute-CodePudding

I got the following problem.

in my Controller, this method is supposed to return a JSON with the pets from the database. but is being called, the server returns a 404.

public async Task<JsonResult> GetPetsAsync(int ownerId )
        {
            var pets = await _dataContext.Pets
                .Where(p => p.Owner.Id == ownerId)
                .OrderBy(p => p.Name)
                .ToListAsync();
            return Json(pets);
        }

=====================================================

This is the form that provides the OwnerId for the method to find the pets for that particular owner.

<div >
    <div >
        <form asp-action="Assign" enctype="multipart/form-data">
            <div asp-validation-summary="ModelOnly" ></div>
            <input type="hidden" asp-for="Id" />

            <div >
                <label asp-for="OwnerId" ></label>
                <select asp-for="OwnerId" asp-items="Model.Owners" ></select>
                <span asp-validation-for="OwnerId" ></span>
            </div>

            <div >
                <label asp-for="PetId" ></label>
                <select asp-for="PetId" asp-items="Model.Pets" ></select>
                <span asp-validation-for="PetId" ></span>
            </div>

            <div >
                <label asp-for="Remarks" ></label>
                <textarea asp-for="Remarks" ></textarea>
                <span asp-validation-for="Remarks" ></span>
            </div>

            <div >
                <button value="Assign" type="submit" ><i ></i></button>
                <a asp-action="Index" ><i ></i> Go Back</a>
                <span asp-validation-for="Remarks" ></span>
            </div>


        </form>
    </div>
</div>

In my View

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
        $(document).ready(function () {
            $("#OwnerId").change(function () {
                $("#PetId").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetPetsAsync", "Agenda")',
                    //Take the OwnerId and send it to the JsonResult Method to retrieve the pets
                    data: { ownerId: $("#OwnerId").val() },
                    dataType: 'Json',
                    success: function (pets) {
                        $("#PetId").append('<option value="0">(Select a pet...)</option>');
                        $.each(pets, function (i, pet) {
                            $("#PetId").append('<option value="'
                                  pet.id   '">'
                                  pet.name   '</option>');
                        });
                    },
                    error: function (ex) {
                        alert('Failed to retrieve pets. '   ex.statusText);
                    }
                });
                return false;
            })
        });
    </script>

CodePudding user response：

Make sure the "httppost" attribute is used. If you continue to get an error, check the data part in the ajax section.

CodePudding user response：

I found the solution. Incredibly just by changing the Method Name to GetPetAsyncronous the problem was solve. I don’t know why the previous method wouldn’t work. But It worked.

CodePudding user response：

It looks like this feature change is affecting you.

Async suffix for controller action names will be trimmed by default #14716

You can just drop the "Async" suffix from your view-side code. Which is why renaming your method "fixed" your problem.

You have control over this behavior in your app startup with SuppressAsyncSuffixInActionName

builder.Services.AddMvc(options =>
{
    options.SuppressAsyncSuffixInActionNames = false;
});