使用 AJAX 将文本框中的值传递给控制器​​操作

Posted 2023-02-15

【中文标题】使用 AJAX 将文本框中的值传递给控制器​​操作

【英文标题】：Use AJAX to pass the value from the text box to Controller action

【发布时间】：2021-12-16 15:29:11

【问题描述】：

我有一个编辑页面，我试图只更新一个字段，视图如下所示。我只允许用户更新项目数量的一个字段，OrderQuantity 是字段

...
   <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>

我需要将新输入的值传递给 EditItem 操作方法，因为根据新输入的值，我需要相应地更新库存数量，如下所示

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 = "[e-mail]" );

我无法将新/更新的用户输入值传递给操作方法的问题

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

这会将 null 值传递给 orderedQuantity 到 EditItem 操作

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

将数据库中的旧值 orderedQuantity 传递给编辑操作

如何捕获用户输入的内容并将其传递给控制器​​，以便我可以执行一些计算

***** 编辑 ******

我试图删除两个表单，现在只有一个表单像

<form asp-action="EditItem">
 <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 ..............
 <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>
    
  <input type="hidden" id="orderId" name="orderId" value="@Model.OrderId" />
   <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>

即使现在输入 OrderQuantity 的用户仍为 null

【参考方案1】：

问题很可能是这样的：

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

您的隐藏输入值是字符串“OrderQuantity”。您可以使用“@Model.OrderQuantity”设置初始值，但这不会传递您在输入控件中所做的更改。

通常，编辑给定模型的输入控件将包含在提交它们的表单中。您似乎有两个表单，其中第二个用于提交更改。 （是否曾经提交过第一个表单？）如果这两个表单是必需的，那么您可以在输入控件上连接一个 javascript 事件，以在更改后更新 orderQuantity 隐藏输入上的值，以便该值可以与第二个一起提交形式。您可能需要注意两个表单之间的字段/参数的命名，以确保避免出现任何可能重复 ID 的情况。

【讨论】：

对不起，我不确定我是否关注我只有一个表格可以更新记录，没有两个表格可以编辑/更新

@ 我试图解释我尝试将用户输入的值传递给操作value="OrderQuantity" - 他传递的空值并通过 value="@Model.OrderQuantity" 再次传递数据库中的任何内容而不是用户输入的值

声明了（至少）两种形式：</form> <-end of one form then <form asp-action="EditItem"> 您对该字段的输入控件在第一种形式的范围内 <input asp-for="OrderQuantity" class="form-control" /> asp-for 是 ASP,Net 将值链接到的编辑时。因为此控件不在提交的表单中，所以该隐藏控件只是尝试传递字符串“OderQuantity”。如果您想从第二个表单提交，您需要在输入控件上编写一个事件处理程序脚本，以便在其更改时将其值复制到隐藏控件。

我不确定是否可以以相同的形式将值传递给按钮，因此创建了一个新的并尝试传递。我可以在同一个按钮中使用该按钮并仍然可以访问这些值吗？你能举个例子我如何在同一个表单中传递

我试图将表单更改为一个，但我仍然在 <input type="hidden"> value="OrderQuantity" 上具有相同的行为，这传递了 null 值，并且通过执行 value="@Model.OrderQuantity" 再次传递了其中的任何内容数据库不是用户在页面上输入的值