将数据从动态创建的字段发送到控制器

Question

我目前正在处理一个 .NET Core 项目，并且我有一个包含不同字段的表单。有些是可以通过使用 jQuery/Javascript 按下按钮来动态生成的字段

$(function() {

  $(".addRow").click(function(e) {
    e.preventDefault();
    var template = $("#items").find(".itemRow").first();
    var newRow = template.clone();
    newRow.find("input.formfield").val("");
    $("#items").append(newRow);

  });

  // I have tried adding this set of Javascript code to pass data to the `Controller` when I press the button Submit, but it doesn't work..

  $("#btnSubmit").click(function(e) {
    e.preventDefault();
    var _this = $(this);
    var url = _this.closest("form").attr("action");

    var rows = [];
    var items = $(".itemRow");

    $.each(items, function(i, item) {
      var tbOne = $(item).find("input[name='tbOne']").val();
      var tbTwo = $(item).find("input[name='tbTwo']").val();

      var row = {
        Test1: tbOne,
        Test2: tbTwo
      };
      rows.push(row);
    });

    //Let's post to server
    $.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(rows),
        contentType: "application/json"
      })
      .done(function(result) {
        //do something with the result
      })

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" asp-controller="Test" asp-action="Insert">
<div class="form-group row">
    <div class="col-lg-1">
        <label>Name</label>
    </div>
    <div class="col-lg-3">
        <input type="text" asp-for="name" name="Name" />
    </div>
    <div class="col-lg-1">
        <label>Age</label>
    </div>
    <div class="col-lg-3">
        <input type="text" asp-for="age" name="Age" />
    </div>
</div>

<div id="items">
    <div class="itemRow">
        <div class="form-group row">
            <div class="col-lg-1">
                <label>Tb One</label>
            </div>
            <div class="col-lg-3">
                <input type="text" asp-for="tbOne" name="tbOne" />
            </div>
            <div class="col-lg-1">
                <label>Tb Two</label>
            </div>
            <div class="col-lg-3">
                <input type="text" asp-for="tbTwo" name="tbTwo" />
            </div>
            <div class="col-lg-2">
                <button type="button" class="addRow">Add Row</button>
            </div>
        </div>
    </div>
</div>
</form>

控制器：

public IActionResult Insert(IEnumerable<Model> model)
{
      foreach (var item in model)
      {
          // to do here
      }
}

我希望有人可以为我提供建议，告诉我如何进一步改进此代码以成功从动态生成的字段中获取数据。

Answer 1

1. 为 addrow 按钮使用一个类并将其委托或移动到 itemRow 之外
2. 不要对数据进行字符串化，ajax 会为你做这件事

$(function() {

  $("#items").on("click",".addRow", function(e) {
    e.preventDefault();
    var template = $("#items").find(".itemRow").first();
    var newRow = template.clone();
    newRow.find("input.formfield").val("");
    $("#items").append(newRow);

  });

  // I have tried adding this set of Javascript code to pass data to the `Controller` when I press the button Submit, but it doesn't work..

  $("#btnSubmit").click(function(e) {
    e.preventDefault();
    var _this = $(this);
    var url = _this.closest("form").attr("action");

    var rows = [];
    var items = $(".itemRow");

    $.each(items, function(i, item) {
      var tbOne = $(item).find("input[name='tbOne']").val();
      var tbTwo = $(item).find("input[name='tbTwo']").val();

      var row = {
        Test1: tbOne,
        Test2: tbTwo
      };
      rows.push(row);
    });

    //Let's post to server
    $.ajax({
        type: "POST",
        url: url,
        data: rows,
        contentType: "application/json"
      })
      .done(function(result) {
        //do something with the result
      })

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" asp-controller="Test" asp-action="Insert">
  <div id="items">
    <div class="itemRow">
      <div class="form-group row">
        <div class="col-lg-3">
          <input type="text" asp-for="name" name="Name" />
        </div>
        <div class="col-lg-3">
          <input type="text" asp-for="age" name="Age" />
        </div>
      </div>

      <div class="form-group row">
        <div class="col-lg-3">
          <input type="text" asp-for="tbOne" name="tbOne" />
        </div>
        <div class="col-lg-3">
          <input type="text" asp-for="tbTwo" name="tbTwo" />
        </div>
        <div class="col-lg-2">
          <button class="addRow" type="button">Add Row</button>
        </div>
      </div>
    </div>
  </div>
</form>