[英]Pass data from view to controller using ajax in ASP.NET MVC
I'm very new to ASP.NET MVC and web development (I work mainly with c# and desktop development) and I have a big problem:我是 ASP.NET MVC 和 Web 开发的新手(我主要从事 C# 和桌面开发),但我遇到了一个大问题:
I try to pass data from my view to the controller, but everything I try ends up in an empty or null parameter in my controllers action...我尝试将数据从我的视图传递到控制器,但我尝试的所有操作都以控制器操作中的空参数或空参数结束......
I tried many approaches from different tutorials on the web but nothing worked, there must be something I am doing wrong in major.我尝试了网上不同教程的许多方法,但没有任何效果,一定是我在专业上做错了什么。
I've created a simple project to demonstrate my problem:我创建了一个简单的项目来演示我的问题:
My View:我的看法:
@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>
My controller:我的控制器:
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);
}
}
}
My 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; }
}
}
That's the JSON my alert shows:这是我的警报显示的 JSON:
{"JsonDataTransfer":{"Name":"Parker","Age":27}} {“JsonDataTransfer”:{“姓名”:“帕克”,“年龄”:27}}
and thats what I'm getting in the controller:这就是我在控制器中得到的:
You don't need AJAX call to post the model to the controller action.您不需要 AJAX 调用即可将模型发布到控制器操作。 Just submit the form.
只需提交表格。 Instead of:
代替:
<a id="btnSend" onclick="send()"> Send </a>
Use:采用:
<input type="submit" value="Send"/>
If for any reason you want to stick on AJAX, change your method like:如果出于任何原因您想坚持使用 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 });
}
First of all u needn't to wrap ur object to one more object.首先,你不需要将你的对象包装到另一个对象中。 I mean ur alert should show:
我的意思是你的警报应该显示:
{"Name":"Parker","Age":27}
For it simply change this line:因为它只需更改此行:
return JSON.stringify({ JsonDataTransfer: customModel });
To:到:
return JSON.stringify(customModel);
And change method sign to:并将方法符号更改为:
[HttpPost]
public ActionResult TestTransfer([FromBody]TestModel model)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.