ASP.NET MVC动态表单字段传参及MongoDB存储方案咨询

作为MongoDB和ASP.NET MVC的新手，你这个动态表单构建器的场景很典型——完全由用户自定义字段，没有固定结构，咱们一步步拆解解决你的问题：

1. 从View将字段数据传递到Controller #

你当前的JS代码已经能正确收集字段信息，但传递方式需要优化，推荐用AJAX异步提交JSON数据，这样能更优雅地处理动态结构：

修正后的前端JS代码 #

// 提前初始化fields数组，避免未定义问题
var fields = [];

$('.field').each(function() { 
    var $this = $(this); 
    var fieldType = $this.data('type'); 
    var fieldLabel = $this.find('.field-label').val(); 
    var fieldReq = $this.hasClass('required') ? true : false; 
    // 提前初始化choices数组，避免无选项时出现undefined
    var choices = [];

    if($this.find('.choices li').length >= 1) { 
        $this.find('.choices li').each(function() { 
            var $thisChoice = $(this); 
            var choiceLabel = $thisChoice.find('.choice-label').val(); 
            var choiceSel = $thisChoice.hasClass('selected') ? true : false; 
            choices.push({ Label: choiceLabel, IsSelected: choiceSel }); 
        }); 
    } 
    fields.push({ 
        Type: fieldType, 
        Label: fieldLabel, 
        IsRequired: fieldReq, 
        Choices: choices 
    }); 
});

// 提交到Controller的AJAX请求
$.ajax({
    url: '/Form/SaveDynamicForm', // 替换成你的Controller/Action实际路径
    type: 'POST',
    contentType: 'application/json; charset=utf-8', // 关键：告知服务器接收JSON格式
    data: JSON.stringify({
        FormId: "自定义表单ID（建议用GUID生成唯一值）",
        Fields: fields
    }),
    success: function(response) {
        alert('表单保存成功！');
        // 可添加后续逻辑：比如跳转至表单列表页
    },
    error: function(xhr, status, error) {
        console.error('保存失败：', error);
    }
});

2. 设计对应的Model（适配MongoDB文档结构） #

MongoDB是文档型数据库，我们的Model要贴合JSON结构，同时支持ASP.NET MVC的模型绑定。首先需要安装官方驱动包：MongoDB.Driver

字段选项Model #

public class FormFieldChoice
{
    public string Label { get; set; }
    public bool IsSelected { get; set; } // 标记默认选中项
}

单个表单字段Model #

public class FormField
{
    public string Type { get; set; } // 对应Textbox/Textarea/Dropdown等类型
    public string Label { get; set; }
    public bool IsRequired { get; set; }
    public List<FormFieldChoice> Choices { get; set; } = new List<FormFieldChoice>(); // 初始化空列表，避免null
}

完整表单Model（用于MongoDB存储） #

using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;

public class DynamicForm
{
    [BsonId] // 标记为MongoDB主键
    public ObjectId Id { get; set; } // 用MongoDB默认的ObjectId，也可自定义FormId作为主键
    public string FormId { get; set; } // 业务层面的表单唯一标识
    public List<FormField> Fields { get; set; } = new List<FormField>();
    public DateTime CreatedAt { get; set; } = DateTime.UtcNow; // 可选：记录表单创建时间
}

如果想用自定义FormId作为主键，只需将[BsonId]标记移到FormId属性上，类型改为string即可。

3. Controller处理逻辑 #

创建FormController，编写接收前端数据并保存到MongoDB的Action：

ASP.NET Core MVC版本 #

using Microsoft.AspNetCore.Mvc;
using MongoDB.Driver;

public class FormController : Controller
{
    private readonly IMongoCollection<DynamicForm> _formsCollection;

    // 通过依赖注入获取MongoDB连接（推荐方式）
    public FormController(IMongoDatabase mongoDatabase)
    {
        _formsCollection = mongoDatabase.GetCollection<DynamicForm>("DynamicForms"); // MongoDB集合名
    }

    [HttpPost]
    public IActionResult SaveDynamicForm([FromBody] DynamicForm form) // [FromBody]用于解析JSON数据
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        // 插入到MongoDB
        _formsCollection.InsertOne(form);

        return Ok(new { Message = "表单保存成功", FormId = form.FormId });
    }
}

传统ASP.NET MVC（.NET Framework）版本 #

using System.Web.Mvc;
using MongoDB.Driver;

public class FormController : Controller
{
    private readonly IMongoCollection<DynamicForm> _formsCollection;

    public FormController()
    {
        // 这里可替换为你的MongoDB连接逻辑
        var client = new MongoClient("mongodb://localhost:27017");
        var database = client.GetDatabase("YourDatabaseName");
        _formsCollection = database.GetCollection<DynamicForm>("DynamicForms");
    }

    [HttpPost]
    public JsonResult SaveDynamicForm(DynamicForm form)
    {
        if (!ModelState.IsValid)
        {
            return Json(new { Success = false, Message = "数据验证失败" });
        }

        _formsCollection.InsertOne(form);

        return Json(new { Success = true, Message = "表单保存成功", FormId = form.FormId });
    }
}

4. 后续收集用户表单数据的扩展 #

当用户用保存的表单提交数据时，可设计如下模型存储提交内容：

public class FormSubmission
{
    [BsonId]
    public ObjectId Id { get; set; }
    public string FormId { get; set; } // 关联对应的动态表单
    public Dictionary<string, object> SubmittedData { get; set; } = new Dictionary<string, object>(); // 键：字段唯一标识，值：用户输入/选择的数据
    public DateTime SubmittedAt { get; set; } = DateTime.UtcNow;
}

这种字典结构可以灵活适配任意类型的用户输入，无需修改模型即可支持新的字段类型。

内容的提问来源于stack exchange，提问作者Iswarya