Question

我可以在控制器中获取静态数据，但是我不知道如何获取由javascript动态创建的数据。

当我填写表格，然后按“提交”，我的控制器只得到静态数据“formHead”和动态数据“域”是空的。谁能帮我吗？

这是我的cshtml

<form method="post" action="">
    <input type="text" name="formHead">
        <div id="fields" name="fields">
        // here I create fields by pressing a-link below and fill data
        </div>
        <a href="#" onclick="createField()">+ Add field</a>
        <input type="submit" value="Save">
</form>

这是我的控制人

public string FrontendForm(FormEditor formEditor)
{
    return "Success";
}

我的模型班：

public class FormEditor
{
    public string formHead { get; set; }
    public IList<Field> fields { get; set; }
}

Answer 1

您可以通过在使用javascript提交表单之前将动态创建的值附加到表单元素来实现。

- html -
<input type="hidden" id="fields" name="fields">

<input type="text" id="dynamic_field_1" name="dynamic_field_1">
<input type="text" id="dynamic_field_2" name="dynamic_field_2">

- javascript -

 $('form').submit(function(event){
  event.preventDefault();
  var dynamicData;
  dynamicData.push($('#dynamic_field_1').val());
  dynamicData.push($('#dynamic_field_2').val());
  $('#fields').val(dynamicData);
  $('form').submit();
 });

或者您可以通过ajax请求提交表单来实现此目的，因为您可以灵活地使用动态数据创建发布数据对象。

 $('form').submit(function(event){
  event.preventDefault();
    $.ajax({           
     type:"post",
     url: '@Url.Action("FrontendForm")',
     data: function(data){
      data. formHead = $('#formHead').val()
      var dynamicData;
      dynamicData.push($('#dynamic_field_1').val());
      dynamicData.push($('#dynamic_field_2').val());
      data.fields = dynamicData;
     },
     success: function(result) {
        // on success function
     }
    });
  });

Answer 2

首先请更改您的模型，如下所示：

public class FormEditor
{
    public string formHead { get; set; }
    public IList<string> fields { get; set; }
}

然后为javascript添加代码，以将id为fields的div附加到字段

<script>
var globalFieldCount=0;
function createField(){

$('#fields').append('<input type="text" id="fields' + globalFieldCount +'" name="fields[' + globalFieldCount + ']" >')
globalFieldCount++;

}

</script>

ASP.NET MVC查看到控制器动态JavaScript

2 个答案: