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

Posted 2023-04-13

【中文标题】使用 mvc 视图中的参数从 jquery 调用 web api

【英文标题】：Call web api from jquery with parameters in mvc view

【发布时间】：2019-10-02 20:47:01

【问题描述】：

我正在尝试调用我新创建的 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。我做错了什么？

【问题讨论】：

我经常使用辅助方法并将其粘贴在属性中，而不是硬编码：<span data-url="@Url.Action("SendMessages", "messages", new /*Route values here*/)"> 更多信息：docs.microsoft.com/en-us/dotnet/api/… 示例：将其粘贴在 <form> 元素中

【参考方案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 绑定到方法参数。

【讨论】：

但是我有多个 Post 方法，我能告诉我调用哪个函数以及如何传递多个参数吗？

@LearnAspNet：我已经更新了答案。 URL 可能需要包含操作方法名称，具体取决于您如何设置路由。

如您所述更改网址后它可以工作。我会接受答案。但是你能告诉我如何传递多个参数以及为 API 设置路由的最佳方法是什么。我只想传递带有控制器名称的 url

@LearnAspNet：我已经更新了答案。由于它是 POST 请求，因此您可以将复杂对象添加到请求数据中。在这种情况下，它只是一个单一的属性，但它可以更多，并包括其他对象上的嵌套属性。

它不起作用，我已经更新了有问题的代码，就像你提到的那样，还有我的 web API