在 ASP.NET MVC 中使用 ajax 將數據從視圖傳遞到控制器

Question

我是 ASP.NET MVC 和 Web 開發的新手（我主要從事 C# 和桌面開發），但我遇到了一個大問題：

我嘗試將數據從我的視圖傳遞到控制器，但我嘗試的所有操作都以控制器操作中的空參數或空參數結束......

我嘗試了網上不同教程的許多方法，但沒有任何效果，一定是我在專業上做錯了什么。

我創建了一個簡單的項目來演示我的問題：

我的看法：

@model TestJsonBinding.Models.TestModel


<body>
    @using (Html.BeginForm("TestTransfer", "Home", FormMethod.Post))
    {
        <p>Name: <input id="txbName" type="text" value="@Model.Name" /></p>
        <p>Alter: <input id="txbAge" type="number" value="@Model.Age" /></p>
        <p></p>
        <a id="btnSend" onclick="send()"> Send </a>
    }
</body>

<script>
    function send() {
        $.ajax({
            type: "POST",
            url: "TestTransfer",
            contentType: "application/json",
            data: GetModelJson(),
            success: function (result) {

            },
            error: function (result) {
                alert(result.text);
            }
        })
    }


    function GetModelJson() {
        var customModel = new Object();
        customModel.Name = $("#txbName").attr("value");
        customModel.Age = Number($("#txbAge").attr("value"));

        alert(JSON.stringify({ JsonDataTransfer: customModel }));

        return JSON.stringify({ JsonDataTransfer: customModel });
    }

</script>

我的控制器：

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestJsonBinding.Models;

namespace TestJsonBinding.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View(new TestModel() { Name = "Parker", Age = 27});
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }

        [HttpPost]
        public ActionResult TestTransfer(TestModel model)
        {
            return Json(model);
        }

    }
}

我的模型：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestJsonBinding.Models
{
    public class TestModel
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

這是我的警報顯示的 JSON：

{“JsonDataTransfer”：{“姓名”：“帕克”，“年齡”：27}}

這就是我在控制器中得到的：

截屏

Answer 1

您不需要 AJAX 調用即可將模型發布到控制器操作。 只需提交表格。 代替：

<a id="btnSend" onclick="send()"> Send </a>

采用：

<input type="submit" value="Send"/>

如果出於任何原因您想堅持使用 AJAX，請更改您的方法，例如：

function GetModelJson() {
        var customModel = new Object();
        customModel.Name = $("#txbName").attr("value");
        customModel.Age = Number($("#txbAge").attr("value"));

        alert(JSON.stringify({ TestModel: customModel }));

        return JSON.stringify({ TestModel: customModel });
    }

Answer 2

首先，你不需要將你的對象包裝到另一個對象中。 我的意思是你的警報應該顯示：

{"Name":"Parker","Age":27}

因為它只需更改此行：

return JSON.stringify({ JsonDataTransfer: customModel });

到：

return JSON.stringify(customModel);

並將方法符號更改為：

[HttpPost]
public ActionResult TestTransfer([FromBody]TestModel model)

在 ASP.NET MVC 中使用 ajax 將數據從視圖傳遞到控制器

問題描述

2 個解決方案

解決方案1
1 2020-01-24 14:45:11

解決方案2
0 2020-01-24 14:48:19

在 ASP.NET MVC 中使用 ajax 將數據從視圖傳遞到控制器

問題描述

2 個解決方案

解決方案1 1 2020-01-24 14:45:11

解決方案2 0 2020-01-24 14:48:19

解決方案1
1 2020-01-24 14:45:11

解決方案2
0 2020-01-24 14:48:19