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类，并且在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绑定到method参数。

在MVC视图中使用参数从jquery调用Web API

1 个答案: