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

Question

我是 MVC Core 的新手，在正确处理这件事上遇到了一些困难。

我有一张表格，里面填满了我的产品的一些基本值，我想要将产品的数量值和 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)

我确定我缺少有关表单如何工作的一些基本知识，因此我非常感谢在这里获得一些帮助。我一直在尝试用谷歌搜索，但我也在为此苦苦挣扎。非常感谢

Answer 1

您可以改用 javascript。

@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

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

我现在的解决方案可能是使用 JS 发布。此外，我不会将我的“asp-route-id="@product.ID" 放在一个元素上，我可以将它作为隐藏输入并发布它。哦，那个 data-ajax-mode 的东西很困惑我比它帮助更多，肯定删除它。

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

Answer 3

您可以尝试将 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
    }