获取操作方法的输入值。 Mvc 核心 & AJAX

Question

我是 MVC Core 的新手，我很难做到这一点。

我有一个 table 填充了我的产品的一些基本值，我想要的是将数量值和产品 ID 发送到我的操作方法。我遇到的问题是我能够将我的 product.ID 发送到操作方法，但我似乎无法获得我的输入值。我尝试使用按钮而不是我的元素，当我使用它时我设法获得输入但不是 product.ID.

@model List<Product>

<div id="productList">
    <form>
        <table>
            @foreach (var product in Model)
            {
                <tr>
                    <td>@product.Name</td>
                    <td>@product.Price</td>
                    <td><input type="text" name="quantity" /></td>
                    <td>
                        <a
                           asp-action="AddProductToCart"
                           asp-route-id="@product.ID"
                           data-ajax="true"
                           data-ajax-method="GET"
                           data-ajax-mode="replace"
                           data-ajax-update="#cartinfo">Add to basket</a>
                    </td>
                </tr>
            }
        </table>
    </form>
</div>

<div id="cartinfo">

</div>

我的操作方法参数如下所示：

public IActionResult AddProductToCart(int id, int quantity)

我确信我缺少一些关于表单如何工作的基本知识，所以我真的很感激在这里得到一些帮助。我一直在尝试 google 这个，但我也在努力解决这个问题。非常感谢

Answer 1

您可以改用 java脚本。

@model List<Product>

<div id="productList">
    <form>
        <table>
            @foreach (var product in Model)
            {
                <tr>
                   <td style="visibility:hidden" class="pID">@product.ID</td>
                    <td>@product.Name</td>
                    <td>@product.Price</td>
                    <td><input type="text" name="quantity" class="qty"/></td>
                    <td>

                     <button class="btnAdd" >Add to basket</button>
                    </td>
                </tr>
            }
        </table>
    </form>
</div>

<div id="cartinfo">

</div>

java 脚本

<script type="text/javascript">

    $(document).ready(function () {

        $('.btnAdd').click(function () {
            var PID= $(this).closest("tr").find(".pID").text();
            var Pqty= $(this).closest("tr").find(".qty").text();

            AddtoCart(PID, Pqty);
        });

    }); 

    function AddtoCart(pid,qty) {
            $.ajax({
                url: "@Url.Action("AddProductToCart", "Your Controller")",
                type: 'GET',
                data: { id: pid, quantity: qty},
                datatype: 'json',

                success: function (data) {

                    $('#cartinfo').html(data);

                }
            });
        }

</script>

希望对您有所帮助！

Answer 2

您可以尝试将 data-ajax 属性放在 <form> 中，并在您的视图和操作中的参数中进行以下更改

<div id="productList">
    <table>
        @foreach (var product in Model)
        {
            <tr>
              <form data-ajax="true"
                       data-ajax-url="/Your controllerName/AddProductToCart"
                       data-ajax-method="Post"
                       data-ajax-mode="replace"
                       data-ajax-update="#cartinfo">
               <td>@product.Name</td>
                <td>@product.Price</td>

                <td>
                    <input type="text"  asp-for="@product.quantity"/>
                    <input asp-for="@product.Id" hidden />
                </td>
                <td>
                    <input type="submit" value="Add to basket"/>
                </td>
             </form>
            </tr>
        }
    </table>

将参数改为Model对象，注意参数名称必须与客户端传过来的数据名称一致

[HttpPost]
    public IActionResult AddProductToCart( Product product)
    {
        //the stuff you want
    }

Answer 3

哦，伙计，现在我知道开发人员说他们 1 年前的代码是垃圾是什么意思了。不知道是尴尬还是自豪，哈哈

我现在的解决方案可能是 post 使用 JS。此外，我不会将我的 "asp-route-id="@product.ID" 放在一个元素上，我可以将其作为隐藏输入并 posted 它。哦，那个数据-ajax-mode 东西让我困惑多于帮助，请务必删除它。

自我提示：不断改进。 :-)

获取操作方法的输入值。 Mvc 核心 & AJAX

Getting input value to action method. Mvc Core & AJAX

asp.net-mvc

asp.net-ajax

asp.net-core