javascript - 如何获取单个输入字段的值并将每个产品发送到数据库

Question

我有一个页面，我在其中添加一个或多个产品(这部分正在工作)并将其添加产品，包括(产品名称、序列号、数量)到数据库。正如您在屏幕截图 中看到的那样，我有一个输入字段客户名称，我希望获取客户名称输入字段的值并将其与每个产品一起发送到数据库。

数据插入数据库时​​的示例:

客户名称 |产品名称 |序列号 |数量

Stackoverflow                A                                   1234                        1

Stackoverflow                B                                   4567                        2


但是，现在在我的数据库中插入数据时看起来像这样:

客户名称 |产品名称 |序列号 |数量

空                                 A                                   1234                        1

空                                 B                                   4567                        2

说实话，当尝试将数据插入数据库时​​，我不知道如何发送每个产品的客户名称输入字段的值。谁能帮助我或指出我正确的方向!预先感谢:)

Controller :

[HttpPost]
public JsonResult ProcessCreateRMA(CreateRMAVM vm)
{
    using (var namespace = new namespace())
    {
        if (vm.vares == null)
        {
            vm.vares = new List<CreateRMAVM.vare>();
        }

        foreach (var item in vm.vares)
        {
            var rmainsert = new RMA_History
            {
                //CustomerName = item.CustomerName,
                ProductName = item.ProductName,
                Serialnumber = item.Serialnumber,
                Qty = item.Qty,

            };

            db.RMA_History.Add(rmainsert);
        }
            db.SaveChanges();
        }

        return Json(vm, JsonRequestBehavior.AllowGet);

    }

JavaScript:

<script>
    $(document).ready(function () {
        //Add input field 
        var i = 0;
        $("#add").click(function (e) {
            i++;
            e.preventDefault();
            $("#tbhold").append('<tr id="row' + i + '"><td><div><input type="text" name="vares[' + i + '].ProductName" id=' + i + ' /></div></td><td><div><input type="text" name="vares[' + i + '].SerialNumber" id=' + i + '/></div></td><td><div style="padding:0" class="col-md-12"><input id="Qty" name="vares[' + i + '].Qty"/></div></td><td><button type="button" class="btn btn-danger btn_remove" id="' + i + '" name="remove"><i class="fa fa-minus-circle" aria-hidden="true"></i>Remove</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 (result) {
                console.log(result);
            },
            error: function () {
            console.log('something went wrong - debug it!');
            }
        });
    });

 });
</script>

查看:

<label>Customer Name</label>
<input type="text" name="CustomerName" id="CustomerName">

<form name="add_rma" id="add_rma">
    <table id='tbhold' class="table">
        <thead>
            <tr>
                <th>Product Name </th>
                <th>Serial number</th>
                <th>Qty</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div>
                        <input type="text" name="vares[0].ProductName" id="ProductName" />
                    </div>

                </td>
                <td>
                    <div>
                        <input type="text" name="vares[0].Serialnumber" id="Serialnumber" />
                    </div>
                </td>
                <td>
                    <div>
                        <input name="vares[0].Qty" id="Qty"/>
                    </div>
                </td>

                <td>
                    <button type="button" name="add" id="add">Add more</button>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="submit" name="submit" id="submit" value="Submit" />
</form>

View 模型:

public class CreateRMAVM
{
   public List<vare> vares { get; set; }

    public class vare
    {

        public vare()
        {

        }

        public vare(/*string CustomerName*/ string ProductName, string SerialNumber, string Qty)
        {
        }

        //public string CustomerName { get; set; }
        public string ProductName { get; set; }
        public string SerialNumber { get; set; }
        public string Qty { get; set; }
    }
 }

Answer 1

我已更新您的代码以使其正常工作。如果您使用数据网格，我可能建议您使用众多数据网格之一，而不是尝试自己重建它。 jqGrid ( http://www.trirand.com/blog/ ) 是一种流行的

1. 将公司名称留在内部您的表单

2. 更新您的模型。我已将客户包含在 CreateRMAVM 和 vare 中

   public class CreateRMAVM
   {
   public List<vare> vares { get; set; }
   public string CustomerName { get; set; }
   
   public class vare
   {
   
   public vare()
   {
   
   }
   
   public vare(/*string CustomerName*/ string ProductName, string SerialNumber, string Qty)
   {
   }
   
   public string CustomerName { get; set; }
   public string ProductName { get; set; }
   public string SerialNumber { get; set; }
   public string Qty { get; set; }
   }
    }
   

3. 更新您的 Controller 。 CustomerName 将填充到 CreateRMAVM 中，然后有一行代码要复制到 vare 列表中

[HttpPost] 公共(public)JsonResult创建(CreateRMAVM虚拟机) { 尝试 { if (vm.CustomerName != null && vm.vares != null) { vm.vares.Select(c => { c.CustomerName = vm.CustomerName; return c; }).ToList(); }