从视图发送请求时在控制器中收到 NULL 对象 (Ajax) 即使我使用 [FromBody] C#

Question

型号：

public class From
        {
            public DateTime from { get; set; }
            public DateTime to { get; set; }

        }

控制器：

public MediaViewModel DashboardMediaByDate([FromBody] From y)
        { // some logic }

查看：

<script>

    $(function () {
        // Get value on button click and show alert
        $("#myBtn").click(function () {
            var from =  {
                from: $("#from").val(), to: $("#to").val()
            };
            alert(from.from);
            var y = JSON.stringify(from);

            $.ajax({
                type: "POST",
                data: y,
                dataType: 'json',

                url: "/Queues/DashboardMediaByDate",
                contentType: "application/json"
            }).done(function (res) {
                alert(res);
            });
        });

    });
   

</script>

当我调试来自浏览器的请求时：

Request Header Payload

我在 Controller 中收到的内容：

Method Parameter
如何将对象从视图模型发送到控制器？

提前致谢，

Answer 1

您可以使用以下 AJAX 调用来根据需要获取您的数据：

AJAX:

<script>
    $(function () {
        // Get value on button click and show alert
        $("#myBtn").click(function () {
        
            var from =  {
                from: $("#from").val(), to: $("#to").val()
            };
            
            alert(from.from);
            
            $.ajax({
                type: "POST",
                data: {'json': JSON.stringify(from)},
                dataType: 'json',
                url: "/Queues/DashboardMediaByDate"
            }).done(function (res) {
                alert(res);
            });
        });
    });
   
</script>

你的 Controller 方法：

using System.Web.Script.Serialization;


[HttpPost]
public JsonResult DashboardMediaByDate(string json)
{
        MediaViewModel myModel = new MediaViewModel();
        var serializer = new JavaScriptSerializer();
        dynamic jsondata = serializer.Deserialize(json, typeof(object));

        //Get your variables here from AJAX call
        var from  = Convert.ToDateTime(jsondata["from"]);
        var to  = Convert.ToDateTime(jsondata["to"]);
        
        //Your logic

        return Json(new {myModel=myModel});
}

与您的原始通话相比的变化：

已从您的 AJAX 通话中删除 contentType
在您的 Controller 方法上添加了 [HttpPost] 属性
删除了 [FromBody] 属性以将您的数据作为 JSON 字符串
将您的 data 更改为发送 JSON 字符串而不是 Model

将数据作为 JSON 字符串获取后，您可以根据需要 de-serialize 将其作为 Model 结构。当我的Model没有很多属性时，我通常使用这种方法。

您正在使用 AJAX 功能，该功能通常用于更新页面的一部分而无需重新加载整个页面。如果您想使用 Model 从 Controller 重定向 POST 方法，请不要使用 ajax。或者，如果您知道要向视图添加什么，您 return 然后处理成功回调并更新 DOM.

您可以在 AJAX 内的 success 方法中访问上述 Model，如下所示：

success: function(data) {
    //Get your model here
    console.log(data.myModel);
}

从视图发送请求时在控制器中收到 NULL 对象 (Ajax) 即使我使用 [FromBody] C#

Received NULL Object in Controller when send request from view ( Ajax) even I use [FromBody] C#

c#

jquery

ajax

asp.net-mvc

model-view-controller