动态添加输入字段并将数据保存到数据库

时间:2018-12-17 14:32:27

标签: javascript c# jquery ajax

我有一个页面,用户可以在其中动态地添加/删除输入字段及其生成的输入字段,最终用户可以单击“提交”按钮将输入字段的数据/值保存到数据库中。

  

但是它只能将一个输入字段值保存到数据库中,而不能保存第二个或第三个输入字段的数据/值

任何人都可以帮助我或为我指出正确的方向:)预先感谢:)

这是我的JavaScript:

<script>
    $(document).ready(function () {
        //Add input field 
        var i = 1;
        $("#add").click(function (e) {
            i++;
            e.preventDefault();
            $("#tbhold").append('<tr id="row' + i + '"><td><div class="col-md-8"><input type="text" name="Varenummer[]" id=' + i + '  class="form-control" /></div></td><td><div class="col-md-8"><input type="text" name="Serienummer[]" id=' + i + '  class="form-control" /></div></td><td><button type="button" class="btn btn-danger btn_remove" id="' + i + '" name="remove">X</button></td></tr>');
        });

        //Remove input field 
        $(document).on('click', '.btn_remove', function () {
            var button_id = $(this).attr("id");
            $("#row" + button_id + '').remove();
        });

    //Save to db by click
    $("#submit").click(function (e) {
        e.preventDefault();

        $.ajax({
          type: 'POST',
          url: '@Url.Action("ProcessCreateRMA", "User")',
            dataType: 'json',
            data: $('#add_rma').serialize(),
            success: function (CreateRMA) {
                console.log(CreateRMA);
            },
            error: function () {
            console.log('something went wrong - debug it!');
            }
        });
    });
 });
</script>

HTML:

<form name="add_rma" id="add_rma">
    <table id='tbhold' class="table">
        <thead>
            <tr>
                <th>Varenummer</th>
                <th>Serienummer</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="col-md-8">
                        <input type="text" name="Varenummer[]" id="Varenummer" class="form-control" />
                    </div>
                </td>
                <td>
                    <div class="col-md-8">
                        <input type="text" name="Serienummer[]" id="Serienummer" class="form-control" />
                    </div>
                </td>
             <td>
              <button type="button" name="add" id="add" class="btn btn-success">Add More</button>
            </td>
        </tbody>
    </table>
    <input type="button" name="submit" id="submit" value="Submit" />
</form>

控制器:

    [HttpPost]
    public JsonResult ProcessCreateRMA(CreateRMAVM model)
    {
        var RMA = new RMA_History
        {
            Varenummer = model.Varenummer,
            Serienummer = model.Serienummer,
        };

        db.RMA_History.Add(RMA);
        db.SaveChanges();

        return Json(model, JsonRequestBehavior.AllowGet);
    }

ViewModel:
 public class CreateRMAVM
    {
        public string Varenummer { get; set; }
        public string Serienummer { get; set; }
    }

0 个答案:

没有答案