Use AJAX to pass the value from the text box to Controller action

Question

I have the Edit page where I am trying to update only one field the view is like below. I am allowing the users to update only one field the Quantity of the item, OrderQuantity is the field

        ............
       <div class="form-group">
            <label asp-for="OrderQuantity" class="control-label"></label>
            <input asp-for="OrderQuantity" class="form-control" />
            <span asp-validation-for="OrderQuantity" class="text-danger"></span>
        </div>
    </form>
    <form asp-action="EditItem">
        <input type="hidden" id="inventoryorderId" name="inventoryorderId" value="@Model.InventoryOrderId" />
        <input type="hidden" id="inventoryId" name="inventoryId" value="@Model.InventoryId" />
        <input type="hidden" id="orderedQuantity" name="orderedQuantity" value="OrderQuantity" />
        <input type="submit" value="Edit" />

< /form>

I need to pass newly entered value to the EditItem action method because based on the newly entered value I need to update the inventory Quantity accordingly like below

    public async Task<IActionResult> EditItem(int? inventoryorderId, int? inventoryId, int? orderedQuantity)
    {
        var inventoryOrder = await _context.InventoryOrders
            .FirstOrDefaultAsync(io => io.InventoryOrderId == inventoryorderId);
        int curentQuantity = inventoryOrder.OrderQuantity;
        inventoryOrder.OrderQuantity = (int)orderedQuantity;
        _context.SaveChanges();

        var intData = await _context.Inventories.FindAsync(inventoryId);
        if ((int)orderedQuantity > curentQuantity)
        {
            intData.QuantityAvailable = intData.QuantityAvailable - ((int)orderedQuantity- curentQuantity);
            _context.Update(intData);
            await _context.SaveChangesAsync();
        }
        else if ((int)orderedQuantity < curentQuantity)
        {
            intData.QuantityAvailable = intData.QuantityAvailable + (curentQuantity - (int)orderedQuantity);
            _context.Update(intData);
            await _context.SaveChangesAsync();
        }
        return RedirectToAction("Index", "Orders", new { custEmail = "xyz@ff.org" });
    }

The issue I am unable to pass the newly/updated user entered value to the action method

<input type="hidden" id="orderedQuantity" name="orderedQuantity" value="OrderQuantity" />

this passes null value to orderedQuantity to the EditItem action

i nput type="hidden" id="orderedQuantity" name="orderedQuantity" value="@Model.OrderQuantity" />

passes the the old value orderedQuantity that is in the DB to the Edit Action

How can I capture what is that the user entered and pass it to the controller so I can preform some calculation

Answer 1

The issue will most likely be this:

<input type="hidden" id="orderedQuantity" name="orderedQuantity" value="OrderQuantity" />

Your hidden input's value is the string "OrderQuantity". You can set the initial value using "@Model.OrderQuantity" but that won't relay changes made in your input control.

Normally the input controls editing the given model would be contained within the Form that they are submitted under. You appear to have two Forms, where the second is used to submit changes. (Is the first form ever submitted?) If the two forms are necessary, then you can wire up a JavaScript event on your input control to update the value on the orderQuantity hidden input after a change so that this value can be submitted with the second form. You will probably want to be careful about the naming of the fields/parameters between the two forms to ensure any situations where IDs might be repeated are avoided.