MVC .Net Core Entity Framework 如何通过 Ajax 传递 EditorForModel 表单数据

Question

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

我曾尝试像这样通过 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 辅助方法为模型中的每个属性呈现输入元素。但是您的尝试是将模型的序列化版本传递给视图，这没有意义，因为当 razor 呈现页面时将执行该 C# 行并且它不会具有用户输入的值。

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

@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，除非它是一个很小的视图模型（我喜欢为我的输入元素编写标记，我可以完全控制标记的方式） p>