如何从我的 ASP.NET 核心 AJAX 表单访问从控制器返回的 json 数据?



在我的 ASP.NET Core 3.1 Web应用程序中,我创建了一个非常基本的Ajax表单,它利用了Unobusive Ajax库。 当我们提交的表单时,将执行检查以查找当前是否存在具有相同名称的记录,如果存在,则将与该名称匹配的任何记录作为 Json 结果以及请求的结果返回。

<form asp-controller="Test" asp-action="Create" id="CreateForm"
data-ajax="true"
data-ajax-method="POST">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="md-form form-group">
<label asp-for="Name"></label>
<input type="text" asp-for="Name" />
</div>
<div class="md-form form-group">
<button type="submit" value="Save" class="btn btn-info">Save</button>
</div>
</form>

下面是在提交此表单时处理此表单的控制器。

[HttpPost]
public IActionResult Create(Test model)
{            
if (ModelState.IsValid)
{
bool safetyCheck = _testService.GetTests().Any(x => x.Name == model.Name);
if (safetyCheck == true)
{
var something = _testService.GetTests()
.Where(x => x.Name == model.Name /*&& x.Active == model.Active*/)
.Select(x => new { x.Id, x.Name })
.ToList();
return Json(new { success = false, error = something });
}
else {
//Add Record
_testService.InsertTest(model);
return Json(new { success = true });
}
}
else {
return View();
}
}

如您所见,传入模型,检查模型状态的有效性,然后执行检查以确定从模型传入的名称是否与任何当前存在的记录匹配。 如果检查true,那么我创建一个对象,该对象可以通过 JSON 与success = false一起发送回视图。

如果名称不存在,则只是创建记录。

我想知道的是,一旦返回了这个 JSON 数据,例如,我如何在我的视图中使用它。如果我返回与上面同名的所有记录的列表,我将如何向用户显示此信息以及消息?

简而言之,您需要编写一个自定义 JS 函数来处理返回数据。若要将其与 AJAX 请求完成挂钩,可以在窗体data-ajax-complete属性值中指定它。

它大致如下所示:

<form asp-controller="Test" asp-action="Create" id="CreateForm"
data-ajax="true"
data-ajax-method="POST"
data-ajax-complete="ajax_handler">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="md-form form-group">
<label asp-for="Name"></label>
<input type="text" asp-for="Name" />
</div>
<div class="md-form form-group">
<button type="submit" value="Save" class="btn btn-info">Save</button>
</div>
</form>
@section Scripts
{
...
<script>
ajax_handler = function (xhr) {
var data = xhr.responseJSON;
// Process returned data here
};
</script>
}

最新更新