ASP.NET MVC 视图到控制器动态 javascript

Question

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

当我填写表格并按 "submit" 时，我的控制器仅获取静态数据 "formHead" 而动态数据 "fields" 为空。谁能帮帮我？

这是我的 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";
}

我的模型class:

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 请求提交表单来实现这一点，因为您可以灵活地使用动态数据创建 post 数据对象。

 $('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

ASP.NET MVC view to controller dynamic javascript

asp.net

razor

asp.net-mvc-5