时间戳

首页 > 解决方案 > IFormCollection 不接收单个表单数据

javascript - IFormCollection 不接收单个表单数据

问题描述

我正在研究 asp.net 核心 MVC 项目。有一个视图已经有一个带有一些静态字段的表单，这些字段被提交到后端并且数据保存在 DB 中。现在需要在视图中添加动态字段。这些字段将来自数据库。渲染这些字段之后，就是提交这些动态字段数据的部分了。我的理解是您可以使用 FormCollections 在表单中收集表单字段。所以我所做的是创建两种形式，一种是静态的，另一种是动态的，如下所示：

@model FormDataVM
<section>
    <form class="staticFormFields">
        <input type="text" id="FirstName" value="@Model.FirstName">
    </form>
    <form class="dynamicFormFields">
        @foreach (var field in Model.DynamicFields)
        {
        <div class="form-group row">
            <label class="col-md-4 col-form-label">@field.FieldTitle</label>
            <div class="col-md-8">
                <input class="form-control" type="@field.FieldType" placeholder="@field.FieldTitle" value="@field.FieldValue" name="@field.FieldCode" />
            </div>
        </div>
        }   
    </form>

    <button type="button" class="btn btn-primary" onclick="SubmitForm">Save</button>

</section>

所以在服务器端，我在我的视图模型中添加了一个 IFormCollection 成员，如下所示：

public class FormDataVM
{
    public string FirstName { get; set; }
    public IFormCollection DynamicFormFields { get; set; }
}

然后在单击按钮时，我向 API 发送 Ajax 调用，如下所述：

<script>
function SubmitForm() {
    var firstName = $('#FirstName').val();
    var dynamicFormFields = $('#dynamicFormFields').serialize();;
            $.ajax({
                type: 'POST',
                url: <API URL>,
                data: {
                    FirstName: ,
                    DynamicFormFields: dynamicFormFields
                },
                dataType: "json",   
            }).done(function (result) {
                if (!result.status) {
                    alert("Error");
                }
                alert("Success");
            });
        }
    }
</script>

我希望的是 DynamicFormFields 将只包含动态表单中的字段，但它包含所有字段的列表，即 staticForm 和 dynamicForm 中的字段。当我调试我的 ajax 调用时，对象 dynamicFormFields 确实只包含动态字段，但是当调用到达服务器端时，DynamicFormFields 变量包含所有字段数据。我显然在这里遗漏了一些东西。谁能指导我为什么会发生这种情况以及正确的方法是什么。

谢谢。

标签： javascriptc#asp.netajaxforms

解决方案

对于任何可能面临此类问题的人，我无法解决此问题，但决定采取另一种方法。我将我的变量（DynamicFormFields）类型从 IFormCollection 更改为字符串，从客户端，我正在发送 JSON 字符串。

JavsScript 代码如下所示：

<script>
function SubmitForm() {
    var firstName = $('#FirstName').val();
    var dynamicFormFields = JSON.stringify($('#dynamicFormFields').serializeArray());
    $.ajax({
        type: 'POST',
        url: <API URL>,
        data: {
            FirstName: firstName,
            DynamicFormFields: dynamicFormFields
        },
        dataType: "json",   
    }).done(function (result) {
        if (!result.status) {
            alert("Error");
        }
        alert("Success");
    });
}
</script>

在服务器端，我将这个 JSON 解析为 KeyValue 对，如下所示：

var dynamicFieldList = JsonConvert.
                       DeserializeObject<IEnumerable<DynamicFormKV>>
                       (FormDataVM.DynamicFormFields);

.

/** KV model for parsing dynamic form fields JSON **/

public class DynamicFormKV
{
    public string name { get; set; }
    public string value { get; set; }
}

/******/

推荐阅读