在 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