MVC.Net核心实体框架如何通过Ajax传递EditorForModel表单数据

Question

我正试图使用Ajax将创建数据库对象的表单数据传递给创建操作。我这样做是因为我想在成功时更新一个分部。然而，我似乎无法从表格中检索数据。

我试过像这样通过url传递模型，但结果是空的：

<button type="submit" onclick="javascript: CreateEntity('@Url.Action("CreateItem", "Home", Model)')">Submit</button>
<script>
function CreateEntity(createAction) {
$.ajax({
type: "POST",
url: createAction,
dataType: 'html',
success: function (data) {
$('#form-container).html(data);
}
});
}
</script>

我还尝试将模型作为json字符串传递到ajax中，但我遇到了一个奇怪的错误语法：

<button type="submit" onclick="javascript: CreateEntity('@Url.Action("CreateItem", "Home")', '@Html.Raw(Json.Serialize(Model))')">Submit</button>
<script>
function CreateEntity(createAction, entity) {
var model = JSON.parse(entity);
$.ajax({
type: "POST",
url: createAction,
data: { model: model },
dataType: 'html',
success: function (data) {
$('#form-container).html(data);
}
});
}
</script>

我的创建操作基本上是这样的：

public IActionResult (Item model) 
{
//save model to db
}

但无论我在表单中输入了什么，所有的模型字段都会返回为0或null

编辑：

表单由EntityFramework生成，如下所示：

@Html.EditorForModel()

我需要能够从中获取输入并通过ajax进行传递。

Answer 1

EditorForModel辅助方法为模型中的每个属性呈现输入元素。但您的尝试是将模型的序列化版本传递给视图，这是没有意义的，因为当剃刀渲染页面时，C#行将被执行，并且它将没有用户输入的值。

如果您想使用服务器的输入表单元素进行ajax调用，则需要读取其中每个元素的值，并构建一个与Item类的结构匹配的js对象，然后使用该对象进行ajax调用。但有一个简单的方法可以做到这一点。您可以简单地将输入元素保存在表单中，并使用jQuery serialize方法生成字符串的序列化版本并发送。

@model Item
<form asp-action="Create" id="create-form" method="post">
@Html.EditorForModel()
<button type="submit" id="btn-save">Submit</button>
</form>
<div id="form-container"></div>

这将在表单内为Item类中的每个属性呈现输入元素以及提交按钮。

现在，在这个表单上连接提交事件，并序列化表单并将其用于ajax调用。

$(function() {
$("#create-form").submit(function (e) {
var $form = $(this);
e.preventDefault();
$.ajax({
type: "POST",
url: $form.attr("action"),
data: $form.serialize()
}).done(function(data) {
$('#form-container').html(data);
});
});
})

就我个人而言，我不会将EditorFor与EF创建的任何实体类一起使用。您应该考虑使用仅具有特定视图所需属性的视图模型。即便如此，我很少使用EditorForModel，除非它是一个微小的视图模型(我喜欢为我的输入元素编写标记，在那里我可以完全控制标记应该如何)