如何使用ASP.NETCORE从控制器传递AJAX响应(true/false)

Question

我想通过AJAX从我的ASP.NET核心控制器检索响应。这是我的代码的例子

public IActionResult Submit(ViewModel model) {
var isValid = true;
if (isValid) {
return Json(new {
success = true
});
}
return Json(new {
success = false
});
}

CSHTML部分

<form asp-action="Submit" asp-controller="Home" id="formSubmit" name="formSubmit" method="post" enctype="multipart/form-data">
<input type="text" id="Name" name="Name">
<input type="text" id="Address" name="Address">
<input type="text" id="JobDescription" name="JobDescription">
</form>

$("#formSubmit").on('submit', function(e) {
var datas = {
Name: $("input[name='Name']").val(),
Address: $("input[name='Address']").val(),
JobDescription: $("input[name='JobDescription']").val()
};
var formAction = $(this).attr("action");
$.ajax({
method: "POST",
url: formAction,
data: JSON.stringify(datas),
dataType: "json",
contentType: 'application/json',
success: function(response) {
if (response.success) {
alert("Test");
return true;
} else {
alert("Invalid/Error");
e.preventDefault();
}
});
});

该代码中的问题是重定向/加载到显示{"success":false}的页面。

我的ViewModel

public class ViewModel{
public string Name { get; set; }
public string Address { get; set; }
public string JobDescription { get; set; }
}

Answer 1

这里似乎存在一些问题

<form asp-action="Submit" asp-controller="Home" id="formSubmit" name="formSubmit" method="post" enctype="multipart/form-data">

您正在指定asp操作和asp控制器。忽略所有这些属性。仅从开始

<form>...</form>

原因是，当你设置这些属性时，它使用了老式的表单提交机制，该机制会重定向(列出的副作用之一(。

此外，名称类型似乎不匹配，您使用ViewModel，但在您的示例中，类型名称是TFAViewModel

请尝试以下操作，在控制器上方(对于每种方法(或在方法本身上方添加

[Consumes("application/json")]
[Produces("application/json")]
public IActionResult Submit([FromBody]ViewModel model)
{
ModelState.IsValid; //use to inspect. You will also see any violations
....
}

在您的JS代码中，请确保执行以下操作(如前所述(

e.preventDefault(); //stops redirect

Answer 2

是否在Submit操作中使用了[HttpPost]属性？您需要设置一个特定的url，如"/Home/Submit"，并引用jquery。

行动：

[HttpPost]
[Consumes("application/json")]
[Produces("application/json")]
public IActionResult Submit(ViewModel model)
{
var isValid = true;
if (isValid)
{
return Json(new
{
success = true
});
}
return Json(new
{
success = false
});
}

视图：

<form id="formSubmit" name="formSubmit" method="post" enctype="multipart/form-data">
<input type="text" id="Name" name="Name">
<input type="text" id="Address" name="Address">
<input type="text" id="JobDescription" name="JobDescription">
<input type="submit" value="Create" class="btn btn-default" />
</form>
@section Scripts{
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$("#formSubmit").on('submit', function (e) {
var datas = {
Name: $("input[name='Name']").val(),
Address: $("input[name='Address']").val(),
JobDescription: $("input[name='JobDescription']").val()
};
e.preventDefault();
//var formAction = $(this).attr("action");
$.ajax({
method: "POST",
url: "/Home/Submit",
data: JSON.stringify(datas),
dataType: "json",
contentType: 'application/json',
success: function (response) {
if (response.success) {
alert("Test");
return true;
} else {
alert("Invalid/Error");
// e.preventDefault();
}
}
});
});
</script>
}