通過ajax調用傳遞給mvc控制器時，在列表中獲取空值

Question

我將我的列表傳遞給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發送我的列表，但這也行不通。

Answer 1

您在AJAX設置中有兩次contentType和dataType，具有不同的值，這將打破AJAX調用。

請記住，contentType是告訴服務器期望的數據類型，dataType用於確定從文檔中返回的數據類型。

編輯：我看到你編輯了你的代碼！

在這種情況下，由於您使用JSON.Stringify來修改要發送的數據，因此您將使用contentType: "application/json; charset=utf-8",作為您的contentType，因為您要將JSON數據發送到后端。

Answer 2

使用方法： [HttpGet]的方法AddTiles因為你已經使用type: "GET"在阿賈克斯打。

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

如果仍然不起作用，那么嘗試type: "POST" Ajax命中的type: "POST"和方法使用[HttpPost]

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

Answer 3

當我們嘗試使用ajax傳遞對象數據時，我們必須將數據存儲在變量中並使用AJAX中的“data：'variable'”直接傳遞數據到Controller方法

$("#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();
} 

Answer 4

我認為你的列表定義不合適：

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

應該：

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

Answer 5

我使用這個順序工作正常

你檢查了contentType：“application / json”，dataType：“json”，ajax方法中的序列