jQuery 添加行中缺少 ViewBag 数据

Question

这是我的模型和 ViewModel。我有多个模型，现在只展示其中的一部分。

public class Order
    {
        [Key]
        public int Id { get; set; }

        public int TotalItems { get; set; }

        public DateTime DeliveryDate { get; set; }

        public string OrderNumber { get; set; }
        public string DeliveryAddress { get; set; }

        [ForeignKey("ClientId")]
        public int ClientId { get; set; }
        

        public int OrderItemId { get; set; }
        [ForeignKey("OrderItemId")]
        public List<OrderItem> OrderItems { get; set; }
        public Client Client { get; set; }
    }  

public class OrderItem
    {
        public int Id { get; set; }

        [ForeignKey("OrderId")]
        public int OrderId{ get; set; }

        public int InventoryInfoId { get; set; }
        [ForeignKey("InventoryInfoId")]

        [Required]
        public string ItemCode { get; set; }

        public int Quantity { get; set; }
        public virtual InventoryInfo InventoryInfo { get; set; }
        public Order Order { get; set; }
    }   
public class OrderViewModel
    {
        public Order Order { get; set; }
        public List<OrderItem> OrderItems { get; set; }
    }

基本上我想要一个可以包含 OrderItem 列表的订单。
下面是我的 OrderController。我认为我的 Create 操作存在问题。但我不确定如何修复它。

 public IActionResult Create()
        {
            PopulateClientDropDownList();
            CreateMultipleOrderItem();
            return View();
        }
        public IActionResult CreateMultipleOrderItem()
        {
            ViewBag.Item = new SelectList(_context.ItemInfos.ToList(), "Id", "ItemCode");
            ViewBag.Items = JsonConvert.SerializeObject(new SelectList(_context.ItemInfos.ToList(), "Id", "ItemCode"));
            return View();
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create(OrderViewModel OrderVM)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    
                    _context.Add(OrderVM.Order);
                    _context.Add(OrderVM.OrderItems);
                    await _context.SaveChangesAsync();
                    return RedirectToAction(nameof(Index));
                }
            }
            catch (DbUpdateException ex)
            {
                //Log the error(uncomment ex variable name and write a log.
                ModelState.AddModelError("", "Unable to save changes. " +
                    "Try again, and if the problem persists " +
                    "see your system administrator.");
            }
            PopulateClientDropDownList(OrderVM.Order.ClientId);
            CreateMultipleOrderItem();
            return View(OrderVM);
        }

这是我的 Order/Create.cshtml

 <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th style="width:150px">Item Code</th>
                        <th style="width:150px">Quantity</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot id="item-list">
                    <tr>
                        <td>
                            <select asp-for="OrderItems[0].ItemCode" class="items" asp-items="ViewBag.Item"></select>
                        </td>
                        <td><input type="text" asp-for="OrderItems[0].Quantity" class="items" /></td>

                       
                    </tr>
                </tfoot>
            </table>
            <button id="add">Add another item</button>`enter code here`
Scripts {
    <script>
        $("#add").click(function (e) {
           e.preventDefault();
           var i = ($(".items").length) / 3;
           var model = @Html.Raw(@ViewBag.Items);
            var n = '<tr><td><select id="OrderItems_' + i + '_ItemCode" name="OrderItems[' + i + '].ItemCode" class="items" /></td>' +
            '<td><input type="text" class="items" name="OrderItems[' + i + '].Quantity" /></td></tr>' 

           $("#item-list").append(n);

           var Items = "";
           $(model).each(function () {
               Items = Items + '<option value="' + this.Value + '">' + this.Text + '</option>'
           });

           var subItemList = $("#OrderItems" + i + "_ItemCode");
            subItemList.empty();
            subItemList.append(Items);
                });
    </script>
}

我在点击添加行按钮后看到了这个。

各位大侠帮忙！！！

Answer 1

输入 HTML :

<script type="text/javascript">
var Namespace = Namespace || {};
    Namespace.model= JSON.parse('@Html.Raw(@ViewBag.Items)');
</script>

在 JS 中：

Namespace = Namespace || {};
(function (Namespace, $) {
    var model = Namespace.model;
})(Namespace, jQuery);

Answer 2

我终于解决了3天的问题，这里是解决方案

$("#add").off("Create");
    $("#add").click(function (e) {
           e.preventDefault();
           var i = ($(".items").length) / 2;
           var model = @Html.Raw(@ViewBag.Items);
            var n = '<tr><td><select id="OrderItems_' + i + '_ItemInfoId" name="OrderItems[' + i + '].ItemInfoId" class="items" /></td>' +
                '<td><input type="text" class="items" name="OrderItems[' + i + '].Quantity" /></td></tr>'

            $("#item-list").append(n);    

        var Items = "";
        ****f = 0;****
        $(model).each(function () {
            Items = Items + '<option value="' + model[f].Value + '">' + model[f].Text + '</option>'
            ****f++;****//previously, the text and value wasn't iterating through the loop, now with index its able to iterate through.
        });
        

            var subItemList = $("#OrderItems_" + i + "_ItemInfoId");
            subItemList.empty();
            subItemList.append(Items);
            });

jQuery 添加行中缺少 ViewBag 数据

Missing ViewBag data in jQuery add row

c#

asp.net

asp.net-mvc

jquery

viewbag