【问题标题】:getting null value in list when passing by ajax call to mvc controller通过ajax调用传递给mvc控制器时在列表中获取空值
【发布时间】:2015-09-19 12:08:12
【问题描述】:

我正在将我的列表传递给一个 mvc 控制器,但我在控制器中得到空值。但是当我的列表在客户端的警报中显示时有值。

ajax 调用

$("#addTiles").click(function() {
    userTiles = JSON.stringify({
        'userTiles': userTiles
    });
    alert("Entered function.");
    alert(userTiles[0].TileID);
    var url = '@Url.Action("AddTiles")';
    $.ajax({
        type: "GET",
        url: url,
        data: userTiles,
        success: function(d) {
            if (d.indexOf('"IsSessionExpired":true') != -1) {
                location.reload();
            } else {
                onAddTilesSuccessful(d);
            }
        },
        error: function() {
            errorInOperation();
        },
        contentType: "application/html; charset=utf-8",
        dataType: 'html'
    });
});

function onAddTilesSuccessful(e) {
    $("#tilesSubmissionMsg").append(e);
}

function errorInOperation(d) {
    $("#tilesSubmissionMsg").append("Something went wrong");
}

mvc 控制器

  public ActionResult AddTiles(List<UserTilesVM> userTiles)
    {
        return View();
    }

列表模型

public class UserTilesVM
{
    public int TileID { get; set; }
    public int TopPosition { get; set; }
    public int LeftPosition { get; set; }
}

在 javascript 中列出

"{"userTiles":[{"TileID":"3","TopPosition":0,"LeftPosition":0}]}"

我也尝试过使用 stringfy 发送我的列表,但这也不起作用。

【问题讨论】:

  • console 中的任何错误?
  • 您已指定 contentType: 'application/json; charset=utf-8',contentType: "application/html; charset=utf-8", - 不能同时指定(dataType 同上)
  • 是的,我只提到过一次,错误地粘贴在这里两次
  • 现在您已经删除了 json 一个(它是您需要删除的 html 一个,因为您将 json 发送到控制器)

标签: javascript ajax asp.net-mvc asp.net-mvc-4


【解决方案1】:

在方法 AddTiles 上使用:[HttpGet],就像在 Ajax 命中使用 type: "GET" 一样。

[HttpGet]
public ActionResult AddTiles(List<UserTilesVM> userTiles)
{
     return View();
}

如果仍然不起作用,那么在 Ajax 命中尝试 type: "POST" 并在方法上使用 [HttpPost]

[HttpPost]
public ActionResult AddTiles(List<UserTilesVM> userTiles)
{
    return View();
}

【讨论】:

  • 我的控制器方法被命中但在我的列表中我得到空值如何解决这个问题
  • 您在 userTiles 中有一个“UserTilesVM”列表。 ??
  • 感谢现在它的工作已经使用 post 作为类型和 [HttpPost] 在控制器的操作上,它现在可以工作了
【解决方案2】:

您的 AJAX 设置中有两次 contentType 和 dataType,它们的值不同,这会中断 AJAX 调用。

记住 contentType 是告诉服务器期望什么类型的数据,而 dataType 是确定返回什么类型的数据,来自documentation

编辑:我看到你已经编辑了你的代码!

在这种情况下,由于您使用 JSON.Stringify 来修改您发送的数据,因此您将使用 contentType: "application/json; charset=utf-8", 作为您的 contentType,因为您将 JSON 数据发送到后端。

【讨论】:

  • 是的,我只提到过一次,错误地粘贴在这里两次
  • 你删错了。考虑您发送的内容类型!
  • 我已尝试将 contentype 更改为 json,但列表中仍为空值已在我的控制器操作中使用了 [HttpGet]
  • 您正在使用 AJAX 调用进行发布。使用 [HttpPost]
  • 谢谢,是的,我使用类型作为帖子,是的,我只提到过一次,错误地粘贴到这里两次,现在 [HttpPost],它现在可以工作了
【解决方案3】:

当我们尝试使用 ajax 传递对象数据时,我们必须将数据存储在变量中,并使用 AJAX 中的“data :'variable'”直接将数据传递给控制器​​方法

$("#addTiles").click(function() {
   var userTiles = ({
        'userTiles': userTiles
    });
    alert("Entered function.");
    alert(userTiles[0].TileID);
    var url = '@Url.Action("AddTiles")';
    $.ajax({
        type: "POST",
        url: url,
        data: userTiles,
        success: function(d) {
            if (d.indexOf('"IsSessionExpired":true') != -1) {
                location.reload();
            } else {
                onAddTilesSuccessful(d);
            }
        },
        error: function() {
            errorInOperation();
        },
        contentType: "application/html; charset=utf-8",
        dataType: 'html'
    });
});

function onAddTilesSuccessful(e) {
    $("#tilesSubmissionMsg").append(e);
}

function errorInOperation(d) {
    $("#tilesSubmissionMsg").append("Something went wrong");
}

//使用[HttpPost]关键字获取AJAX传递的值。

[HttpPost]
public ActionResult AddTiles(List<UserTilesVM> userTiles)
{
    return View();
} 

【讨论】:

    【解决方案4】:

    我认为您的列表定义不正确:

    "{"userTiles":[{"TileID":"3","TopPosition":0,"LeftPosition":0}]}"
    

    应该是:

    "{"userTiles":[{"TileID":"3","TopPosition":"0","LeftPosition":"0"}]}"
    

    【讨论】:

      【解决方案5】:

      我已经使用了这个工作正常的序列

      你已经检查了 内容类型:“应用程序/json”, 数据类型:“json”, ajax方法中的序列

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2020-01-27
        • 1970-01-01
        • 2016-11-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-07-09
        相关资源
        最近更新 更多