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 -- the AJAX request to GetPetsAsync

@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：

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;
});

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.