Вызов веб-API из JQuery с параметрами в представлении MVC

Question

Я пытаюсь позвонить в только что созданный веб-API, чтобы отправить сообщение, но оно не работает.У меня есть представление, которое получает данные от метода действия контроллера.Я очень новичок в создании веб-API и вызове его из метода Ajax, поэтому я ищу хорошие подробные инструкции.Я хотел бы передать сообщение, введенное пользователем в текстовой области, а также идентификатор сообщения, который я добавил в качестве атрибута данных для кнопки.

Я создал форму и добавил текстовую область с кнопкой для пользователя, чтобыОтправить сообщение.В API я хотел бы добавить его в базу данных.Я могу выполнить часть базы данных, но мне бы хотелось, чтобы форма обновлялась после выполнения вызова ajax.

Просмотр кода

 <div class="bg-dark rounded padding-x4">
            @*This form will be used to send messages. Use Jquery to run Api to send messages*@
            <form>
                <textarea placeholder="Send a new message..." id="messageToBeSent" rows="6" cols="100"></textarea>
                <button data-message-id="@Model.Messages.MessageID" class="btn btn-primary" id="sendMessage">Send Message</button>
            </form>
        </div>

Моя структура Web Api

[HttpPost]
        public IHttpActionResult SendMessages(int MessageID,string MessageReply)
        {
            //Add a message to MessageReply table

            return Ok();
        }

Код Jquery

 <script>
        $(document).ready(function () {
            $("#sendMessage").on("click", function (e) {
                e.preventDefault();
                var MessageReplyParam = $('#messageToBeSent').val();
                var button = $(this);
                $.ajax({
                    //url: "/api/messages/SendMessages?MessageID=" + button.attr("data-message-id"),
                    url: "/api/messages/SendMessages",
                    method: "POST",
                    data:{
                        MessageID:button.data("message-id"),
                        MessageReply:MessageReplyParam
                    },
                    success: function (data) {
                    }
                });      
             });
        });

    </script>

В настоящее время это не относится к моему классу API, и на вкладке Сеть в Google Chrome написано 404 Не найдено.Что я делаю не так?

Answer 1

Ваше действие контроллера ожидает POST-запрос, но вы пытаетесь отправить запрос «SendMessages», который не является допустимым глаголом HTTP. Укажите POST в настройках:

$.ajax({
    url: "/api/messages/" + button.attr("data-message-id"),
    method: "POST",
    success: function (data) {

    }
});

Вы также можете использовать .data(), чтобы лучше получить значение атрибута data- *:

$.ajax({
    url: "/api/messages/" + button.data("message-id"),
    method: "POST",
    success: function (data) {

    }
});

Кроме того, правильно ли ваш URL? Разве это не должно включать название действия? И настроены ли ваши маршруты для автоматического заполнения MessageID, или вам нужно установить его вручную?:

$.ajax({
    url: "/api/messages/SendMessage?MessageID" + button.data("message-id"),
    method: "POST",
    success: function (data) {

    }
});

<ч />

Если вы хотите, вы также можете использовать серверный помощник для генерации вашего URL. Поскольку это запрос POST, вы можете поместить значения в запрос, а не в URL. Примерно так:

$.ajax({
    url: "/api/messages/SendMessage",
    method: "POST",
    data: {
        MessageID: button.data("message-id")
    },
    success: function (data) {

    }
});

Таким образом, вы можете легко добавить столько свойств к этому data объекту, сколько захотите.

Редактировать: Возможно , что вы можете столкнуться здесь с проблемами привязки модели, и это может зависеть от версии Web API. (Честно говоря, я не уверен.) Но иногда он видит этот объект JavaScript как один параметр со свойствами, а не как отдельные параметры.

В этом случае создайте модель на стороне сервера:

public class Message
{
    public int MessageID { get; set; }
    public string MessageReply { get; set; }
}

И используйте его на метод действия:

public IHttpActionResult SendMessages([FromBody]Message message)

Это должно более эффективно связать входящий JSON с параметром метода.