Question

我将要有一些需要向数据库中提交多行的用户，我想使用一个表来收集输入，然后将所有数据插入数据库中。在我的脑海中，这看起来像是占据了表格的第一行，单击“添加另一项”，将该行存储在对象列表中...重复N行。当用户按下“提交”按钮时，它将在“对象列表”中循环并插入它们。完成这样的事情的最佳方法是什么？请参阅图片，了解我要做什么的简短示例。

Answer 1

这是一个可行的示例。您可以根据需要参考并进行修改

模型

api?ids[]=1&ids[]=2

控制器

public class Product
{
    public int ProductId { get; set; }
    public string Name { get; set; }
    public int Quantity { get; set; }
    [ForeignKey("Category")]
    public int CategoryId { get; set; }
    public Category Category { get; set; }
}

public class Category
{
    public int Id { get; set; }
    public string CategoryName { get; set; }
}

public class ProductViewModel
{
    public List<Product> Products { get; set; }
}

查看，使用jquery添加多行记录

public IActionResult CreateMultipleData()
    {
        ViewBag.Category = new SelectList(_context.Category.ToList(), "Id", "CategoryName");
        ViewBag.Categories = JsonConvert.SerializeObject( new SelectList(_context.Category.ToList(), "Id", "CategoryName"));
        return View();
    }

    [HttpPost]
    public async Task<IActionResult> PostData(ProductViewModel productVM)
    {
        if (ModelState.IsValid)
        {
            _context.AddRange(productVM.Products);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(productVM.Products);
    }

Answer 2

尝试这种...

$(document).on('click', '.add', function(){
      var html = '';
      var row_count = $('#row_count').val();
      var row_count_val = +row_count+ 1;
      /*alert(row_count_val);*/
      $("#row_count").val(row_count_val);
      html += '<tr>';
      html += '<td>'+
                '<select class="form-control category" name="category_id[]" id="category_'+row_count_val+'">'+
                    '<option value="0"> Select Category </option>'+
                    '@if(count($ingredient_categories) > 0)'+
                        '@foreach($ingredient_categories->all() as $ingredient_category)'+
                            '<option value="{{ $ingredient_category->id }}">{{ $ingredient_category->category }}</option>'+
                        '@endforeach'+
                    '@else'+
                        '<option value="-"> -- No Data -- </option>'+
                    '@endif'+
                '</select>'+
                '</td>';
      html += '<td>'+
                '<select name="ingredient_id[]" id="ingredient_'+row_count_val+'" class="form-control ingredient" required="">'+
                    '<option value="-"> -- No Data -- </option>'+
                '</select>';
      html += '<td>'+
                '<select name="unit_id[]" id="unit_'+row_count_val+'" class="form-control" required="">'+
                    '<option value="-"> -- No Data -- </option>'+
                '</select>';
      html += '<td><input type="text" name="quantity[]" id="quantity_'+row_count_val+'" class="form-control income_quality" placeholder="0" /></td>';
      html += '<td><input type="text" name="rate[]" id="rate_'+row_count_val+'" class="form-control income_rate" placeholder="0.00"/></td>';
      html += '<td><input type="text" name="tax[]" id="tax_'+row_count_val+'" class="form-control income_tax" placeholder="0%"/></td>';
      html += '<td><input type="text" name="amount[]" id="amount_'+row_count_val+'" class="form-control income_amount" placeholder="0.00"/></td>';
      html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
      $('#income_table').append(html);
     });

使用表输入多个值并将其作为对象列表提交

2 个答案: