如何將我的 JavaScript 數據傳遞到 ASP.NET Core 中的 Controller？

Question

我有一個腳本 function 正在獲取所有數據，但它是將數據傳輸到 Controller 我遇到了麻煩。 我不能執行@Html.ActionLink ，因為基本上我需要 select 我的一個游戲片段，然后單擊空白區域以運行 controller。

這些空白區域是 onclick 事件上的 div，將使用其行和列的輸入運行 getPos function。

在我的 GameBoard 視圖中：

var selected = false;
        var row = -1;
        var col = -1;
        var gamePieceId = null;
        var gamePiece = null;

        function selectPiece(id, row, col){
            gamePieceId = id;
            selected = true;
            gamePiece = document.getElementById(gamePieceId);
            gamePiece.style.backgroundColor("lightblue");
        }

        function getPos(rowPos, colPos){

            row = (50 * (rowPos - 1)) + 5;
            col = (50 * (colPos - 1)) + 5;
            if(selected){

                gamePiece.style.top = row.toString() + "px";
                gamePiece.style.left = col.toString() + "px";
                selected = false;


                addMoveToDB(gamePieceId, rowPos.toString(), colPos.toString());
            }
        }
        function addMoveToDB(id, mrow, mcol)
        {
          $.ajax({
              url: '/GamePiece/GameBoard',
              type: 'POST',
              async: true,
              processData: false,    
              data: { 
                  id: id, 
                  mrow: mrow,
                  mcol: mcol},
              success: function (data) {alert("success");},
                error: function (jqXHR, exception) {
                    var msg = '';
                    if (jqXHR.status === 0) {
                        msg = 'Not connect.\n Verify Network.';
                    } else if (jqXHR.status == 404) {
                        msg = 'Requested page not found. [404]';
                    } else if (jqXHR.status == 500) {
                        msg = 'Internal Server Error [500].';
                    } else if (exception === 'parsererror') {
                        msg = 'Requested JSON parse failed.';
                    } else if (exception === 'timeout') {
                        msg = 'Time out error.';
                    } else if (exception === 'abort') {
                        msg = 'Ajax request aborted.';
                    } else {
                        msg = 'Uncaught Error.\n' + jqXHR.responseText;
                    }
                    $('#post').html(msg);
                },
            });
        }

在我的游戲機 Controller 中：

[HttpPost]
public async Task<ActionResult> GameBoard(string id, string mrow, string mcol)
{
    try
    {
        GameVM gameVM = new GameVM();
        GamePiece gamePiece = new GamePiece();
        gamePiece = await (GamePieceManager.LoadById(Guid.Parse(id)));
        gamePiece.Row = int.Parse(mrow);
        gamePiece.Col = int.Parse(mcol);
        await GamePieceManager.Update(gamePiece);
        gameVM.gamePieces = await GamePieceManager.LoadByGameId(gamePiece.GameId);
        return PartialView(gameVM);
    }
    catch (Exception)
    {
        throw;
    }
}

通過 Ajax 部分中的成功和錯誤方法，我意識到數據甚至沒有 go 到 controller 並且它拋出錯誤 500

Answer 1

通過 Ajax 部分中的成功和錯誤方法，我意識到數據甚至沒有 go 到 controller，它立即拋出錯誤。

那么，根據您的共享代碼，很明顯您的請求將在執行后立即終止，因為您正在使用processData: false 。 如果將 set processData:設置為false ，它會停止 jQuery/Javascript 處理任何數據。 結果，您的請求根本沒有提交。 您應該將其刪除或使其為真。

工作解決方案：

            var id = "1";
            var mrow = "mrow-Test";
            var mcol = "mcol-Test";
            $.ajax({
                url: "/GamePiece/GameBoard",
                type: 'POST',
                async: true,
                dataType: 'text',
                data: {
                    id: id,
                    mrow: mrow,
                    mcol: mcol
                },
                success: function (data) {
                    alert("success");
                    alert(data);
                    console.log(data);
                },
                error: function (xhr) {
                    alert("false");
                }
            });

注意：我只是刪除了processData: false屬性。

Output：