Javascript 如何将字段（动态创建的）从视图传递到控制器？

我是MongoDB的新手。我的应用程序是动态表单生成器，它允许用户在表单上添加动态字段。表单上的字段都不是固定的或静态的。用户可以在表单上添加任意数量和任何类型的字段，如Textbox、Textarea、Dropdown、Checkbox、Radiobutton等字段，并保存表单

现在，我们希望将创建的字段存储到数据库中。然后，保存的表单将用于从用户收集数据

如何将字段从视图传递到控制器？描述一个模型和控制器（处理字段）

我使用ASP.NETMVC作为前端MongoDB作为后端

我把所有的领域都推到这里：

$('.field').each(function() {

    var $this = $(this);

    //field type
    var fieldType = $this.data('type');

    //field label
    var fieldLabel = $this.find('.field-label').val();

    //field required
    var fieldReq = $this.hasClass('required') ? 1 : 0;

    //check if this field has choices
    if($this.find('.choices li').length >= 1) {

        var choices = [];

        $this.find('.choices li').each(function() {

            var $thisChoice = $(this);

            //choice label
            var choiceLabel = $thisChoice.find('.choice-label').val();

            //choice selected
            var choiceSel = $thisChoice.hasClass('selected') ? 1 : 0;

            choices.push({
                label: choiceLabel,
                sel: choiceSel
            });

        });
    }

    fields.push({
        type: fieldType,
        label: fieldLabel,
        req: fieldReq,
        choices: choices
    });
});

使用动态字段保存表单：

var formArray=[];
  formArray.push({ name: "formID", value: "formID" }, { name: "formFields", value: "fields" });
  var formObject = JSON.stringify(formArray);
          $.ajax({
              method: "POST",
              url:'@Url.Action("Index", "Home")',
              data: formObject,
              dataType: 'JSON',
              success: function (data)
              {
                  console.log(data);
                  $('.alert').removeClass('hide');
                  $("html, body").animate({ scrollTop: 0 }, "fast");

                  //Demo only
                  $('.alert textarea').val(JSON.stringify(fields));
              }
          });

有人能推荐一个模型和控制器吗

使现代化 按照@stom的建议，我做了以下更正：

型号

namespace Simple_jQuery_Form_Builder.Models
{
    public class ControlsAttribute
    {
        public string id { get; set; }
        public string value { get; set; }
        public string name { get; set; }
    }
    public class FormControl:ControlsAttribute
    { 
        public object textBox { get; set; }
        public object textArea { get; set; }
        public object checkBox { get; set; }
        public object radioButton { get; set; }
        public object agreeBox { get; set; }
        public object selectBox { get; set; }
        public object datePicker { get; set; }
    }
    public class Simple_jQuery_Form_Builder_Model
    {
        public List<FormControl> controls { get; set; }
        public List<FormControl> formEditor { get;set; }

    }

}

---

它应该在所需的链接/div中显示保存的表单。它显示“success”消息。现在我必须在另一个视图中显示创建的表单（如预览）

首先创建视图模型

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

行动方法

这是在

GET

请求中加载表单

public ActionResult Index()
    {
        return View();
    }

这是为了在post请求中发布您的数据

 [HttpPost]
 public ActionResult SaveForm(IEnumerable<FormViewModel> model)
  {
        if (model != null)
        {
            return Json("Success");
        }
        else
        {
            return Json("An Error Has occoured");
        }

   }

这应该行得通

---

查看更多信息。

您的json绑定到一个模型，该模型具有属性<代码>字符串名称和<代码>字符串值-并且在POST方法中是<代码>公共操作结果（IEnumerable model）您还需要设置

contentType:'application/json'

，以便绑定到模型。请阅读-总结是，这不是解决志愿者问题的理想方法，可能会对获得答案产生反作用。请不要将此添加到您的问题中。@Iswarya，您最近的编辑有很多问题，1。你的模特没有任何亲戚关系。2.使用

@Html.DisplayFor

将不允许将值发布到操作方法，而使用

@Html.HiddenFor

，有很多代码可以提供解决方案，这现在是不可能的。建议您从中学习

MVC

和

Jquery

基础知识，并进一步学习。另外，请正确设置编辑的格式，以便于其他人阅读。感谢您的即时回复@stom:）@Iswarya，如果您发现此答案有帮助，请进行投票或通过勾选答案左侧的勾号接受答案。我有一些疑问。我怎么回复你？我不能再提另一个问题了。评论部分限制了字数。我怎样才能纠正我的疑问？@Iswarya您可以编辑您的问题，并添加有关您面临的问题的更多信息，以便其他人也可以帮助您，或者您可以在评论中一次提出一个问题。

public ActionResult Index()
    {
        return View();
    }

 [HttpPost]
 public ActionResult SaveForm(IEnumerable<FormViewModel> model)
  {
        if (model != null)
        {
            return Json("Success");
        }
        else
        {
            return Json("An Error Has occoured");
        }

   }

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(function () {

    $('#saveInMongo').click(function (e) {

      var formArray=[];

          formArray.push({ name: "formID", value: "formID" }, { name: "formFields", value: "fields" });
      var formObject = JSON.stringify(formArray);

            $.ajax({
                url: "@Url.Action("Home","SaveForm")",
                type: "POST",
                data: formObject,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: function (response) {
                    alert(response.responseText);
            },
                success: function (response) {
                    alert(response);
                }
            });

        });
    });
</script>

<input type="button" value="Save In Mongo" id="saveInMongo" />