[SOLVED] Ability to Add row to ViewModel dynamically with ViewBag


I’m building a simple Inventory and Ordering System. Where An Order Order.cs have multiple Order Items OrderItem. And I have a ViewModel for it. Also the quantity of Order Items should update the Inventory as well, but I have not gone so far yet


public class Order
        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; }

        public int ClientId { get; set; }

        public int OrderItemId { get; set; }

        public List<OrderItem> OrderItems { get; set; }
        public Client Client { get; set; }
public class OrderItem
        public int Id { get; set; }

        public int OrderId{ get; set; }

        public int ItemInfoId { get; set; }
        public int Quantity { get; set; }
        public ItemInfo ItemInfo { get; set; }
        public Order Order { get; set; }
public class OrderViewModel
        //public int OrderId { get; set; }
        //public string OrderNumber { get; set; }
        //public string DeliveryAddress { get; set; }
        //public int ClientId { get; set; }
        //public DateTime Deliverydate { get; set; }
        public Order Order { get; set; }
        public IList<OrderItem> OrderItems { get; set; }

While Create button is been clicked.

public IActionResult Create()
            return View();

My CreateMultipleOrderItem() is working and returning me some value.

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();

Razor View

<table id="tblCustomers" class="table" cellpadding="0" cellspacing="0" >
                <h3>Order Items</h3>
                        <th style="width:150px">Item Code</th>
                        <th style="width:150px">Quantity</th>
                <tfoot id="item-list">
                            <select asp-for="OrderItems[0].ItemInfoId" class="items" asp-items="@ViewBag.Item"></select>
                        <td><input type="text" asp-for="OrderItems[0].Quantity" class="items" /></td>
                        @*<td><input type="button" id="btnAdd" value="Add" /></td>*@
            <button id="add">Add another item</button>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script>
        $("#add").click(function (e) {
           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"></select></td>' +
                '<td><input type="text" class="items" name="OrderItems[' + i + '].Quantity" /></td>'+
                '<td><button type="button" class="deletebtn">Delete</button></td></tr>


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

           var subItemList = $("#OrderItems" + 1 + "_ItemInfoId");


enter image description here

I’m seeing this now, not sure why when new rows are added, my ViewBag items are not returned to the Select list.

I have been stuck here for few days and this is the closest I have get so far. Really appreciate if someone can help me with this.


var subItemList = $("#OrderItems" + 1 + "_ItemInfoId");

According to your code:
<select id ="OrderItems_' + i + '_ItemInfoId" name="OrderItems[' + i + '].ItemInfoId" class="items"></select>

change the id to be consistent with the id in select, like below:

 var subItemList = $("#OrderItems_" + i + "_ItemInfoId");


enter image description here

Answered By – Qing Guo

Answer Checked By – Mildred Charles (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *