使用 mvc 视图中的参数从 jquery 调用 web api

Question

我正在尝试调用我新创建的 Web API 来发布消息，但它不起作用。我有一个从控制器操作方法接收数据的视图。我在创建 web api 并从 Ajax 方法调用它方面非常新，所以我正在寻找好的详细说明。我想传递用户在文本区域中输入的消息以及我作为数据属性添加到按钮上的消息 ID。

我创建了一个表单并添加了一个带有按钮的文本区域供用户发送消息。在 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 类，并且在谷歌浏览器的网络选项卡上显示 404 Not found。我做错了什么？

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) {

    }
});

另外，您的网址一开始就正确吗？它不应该包括动作名称吗？您的路由是否设置为自动填充 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; }
}

并用在action方法上：

public IHttpActionResult SendMessages([FromBody]Message message)

这应该更有效地将传入的 JSON 绑定到方法参数。