Основной проект Asp .net: вызов Ajax не может достичь контроллера (код состояния 400)

Question

Я выполняю рефакторинг своего основного проекта ASP .net и хочу использовать некоторые вызовы Ajax, но я сталкиваюсь со следующей проблемой: когда я пытаюсь отправить запрос методу в контроллере моего проекта, ноэто не работает.

У меня есть модал со следующей кнопкой:

<button onclick="reviewRestaurant(@item.RestaurantId)" class="btn btn-outline-primary">Add review</button>

функция reviewRestaurant () выглядит следующим образом:

function reviewRestaurant(restaurantId) {
    let rating = $("input[type=radio]:checked").val();
    let review = $('textarea').val();

    let data = { restaurantId, rating, review };

    $.ajax({
        type: "POST",
        url: `/Restaurants/Review`,
        data: JSON.stringify(data),
        success: function (res) {
           // TODO: work on this later
        },
        error: function (err) {
            console.log(err);
        }
    });
}

ИМетод, который я хочу вызвать в контроллере Restaurants, выглядит следующим образом:

[Authorize]
[HttpPost]
public async Task<IActionResult> Review(int restaurantId, string rating, string content)
{
    var username = this.User.Identity.Name;
    await this.restaurantsService.Review(restaurantId, username, rating, content);
    return this.RedirectToAction("Details", new { id=restaurantID });
    // the output of this method will be refactored later once I manage to get to it
}   

Проблема в том, что я не могу получить доступ к методу Review в контроллере.Я получаю код состояния 400, и я не знаю, как это исправить.Я попытался использовать атрибуты DTO и [FormData] для параметров метода и попытался передать данные без их строкового преобразования, но все равно ничего не работает.

Если кто-нибудь может мне помочь, я был бы очень благодарен.Я относительно новичок в вызовах ajax и просто не вижу, где моя ошибка.

Answer 1

Вот рабочая демонстрация, которую я тестирую.

@section Scripts
    {
    <script>
            function reviewRestaurant(restaurantId) {
                let rating = $("input[type=radio]:checked").val();
                let content = $('textarea').val();
                let data = { restaurantId, rating, content };
                $.ajax({
                    type: "POST",
                    url:'/Restaurants/Review',
                    data: data,
                    success: function (res) {
                        // TODO: work on this later
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }
    </script>
}

Answer 2

Вы можете попробовать это решение:

Создайте общий класс для ваших параметров (int restaurantId, рейтинг строки, содержимое строки) и используйте FromBody. => Обзор ([FromBody] YourClassName)

И запишите эти параметры в вашем коде ajax. contentType: 'application / json; кодировка = UTF-8' , данные: 'json'

Надеюсь, это вам поможет.