我是 asp.net mvc 和网络技术的初学者。 现在我被困在某个时候了。我有一个创建用户页面。当管理员用户想要添加新用户时，他被重定向到创建具有空数据类的用户页面。在该页面中，数据类已填满。现在我想使用 POST 方法将该模型的数据返回给 Controller 。
我想要实现的是将整个模型作为 JSON 对象直接发布回 Controller 并且它始终为 null。
在创建新用户时点击:
[HttpGet]
public ActionResult CreateUser()
{
var newUser = new User();
return View(newUser);
}
我的CreateUser查看代码:
@model WebApplication7.Models.User
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>CreateUser</title>
<h2>Create new user</h2>
</head>
<body>
<div>
<table>
<tr>
<td>Username : </td>
<td>
@Html.TextBoxFor(model => model.userName, new { @class = "", id = "txtUsername", @maxlength = 6 })
</td>
</tr>
<tr>
<td>Password : </td>
<td>
@Html.TextBoxFor(model => model.passWord, new { @class = "", id = "txtUsername", @maxlength = 6 })
</td>
</tr>
<tr>
<td>First Name : </td>
<td>
@Html.TextBoxFor(model => model.firstName, new { @class = "", id = "txtUsername", @maxlength = 6 })
</td>
</tr>
<tr>
<td>Last Name : </td>
<td>
@Html.TextBoxFor(model => model.lastName, new { @class = "", id = "txtUsername", @maxlength = 6 })
</td>
</tr>
<tr>
<td>Display name : </td>
<td>
@Html.TextBoxFor(model => model.displayName, new { @class = "", id = "txtUsername", @maxlength = 6 })
</td>
</tr>
<tr>
<td>Email : </td>
<td>
@Html.TextBoxFor(model => model.emailID, new { @class = "", id = "txtUsername", @maxlength = 6 })
</td>
</tr>
<tr>
<td>
<input type="button" name="btnClear" value="Submit" class="btn-Clear" onclick="Submit()" />
</td>
</tr>
</table>
</div>
</body>
</html>
提交功能代码:
<script>
function Submit() {
$.ajax({
type: "POST",
url: "/UserManagement/SubmitNewUserData",
data: JSON.stringify({ userData: model }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
ServiceSucceeded(msg);
},
error: function () {
return "error";
}
});
}
</script>
我的 Controller 代码:
[HttpPost]
public JsonResult SubmitNewUserData(User userData)
{
if (userData != null)
{
}
return Json(true);
}
此处的userData 始终为空。请帮我将该模型发回该 Controller 。谢谢。
最佳答案
你没有指出model的值是什么是，但为了工作，它需要
var model = {
userName: $('#userName').val(),
passWord: $('#passWord').val(),
... // etc for each property of User
};
假设你删除所有你new { id = "txtUsername" }生成无效(重复)名称属性的属性。
一个更简单的解决方案是将所有表单控件包装在 <form> 中标记然后使用 .serialize();正确序列化所有表单控件。然后脚本将是
$.ajax({
type: "POST",
url: '@Url.Action("SubmitNewUserData", "UserManagement")', // always use Url.Action() to generate your url's
data: $('form').serialize;
dataType: "json",
success: function (msg) {
ServiceSucceeded(msg);
},
error: function () {
return "error";
}
});
return false; // cancel the default submit
要进一步改进，请删除您的 onclick="Submit()"并处理 .submit()事件使用 Unobtrusive Javascript
$('form').submit(function() {
if (!$(this).valid()) {
return;
}
$.ajax({
....
});
return false;
});
if (!$(this).valid()) {将允许您处理客户端验证，您应该通过包含 @Html.ValidationMessageFor(..) 来完成 helper ，包括相关的jquery.validate.js和 jquery.validate.unobtrusive.js脚本，并将验证属性添加到您的模型属性，以便您获得客户端和服务器端验证。
旁注:应使用 @Html.PasswordFor() 生成密码字段.还不清楚为什么您使用 ajax 而不是标准提交(为什么您希望用户停留在同一页面上并再次编辑它？
关于javascript - 使用ajax将整个模型发布回 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40486599/