Question

美好的一天

我正在尝试使用Razor检索MVC中的文本框字段的值，并将其分配给变量以便稍后通过ajax传递给动作控制器。我尝试过使用.val（）但是在使用Google开发人员工具进行调试时，我不断得到.val（）不是函数。我现在不是那种经验丰富的jquery，并希望得到一些帮助。 herre是下面的coode。

Jquery代码

$(".RefreshQuantity").click(function () {
            // Get the id from the link
            var productToUpdate = $(this).attr("data-id");
            var countToUpdate = $('#txt-id').val();
            if (productToUpdate != '') {
                // Perform the ajax post
                $.post("/ShoppingCart/UpdateQuantity", { "id": productToUpdate, "cartCount": countToUpdate },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        if (data.ItemCount == 0) {
                            $('#row-' + data.DeleteId).fadeOut('slow');
                        } //else {
                        //    $('#item-count-' + data.DeleteId).text(data.ItemCount);  
                        //}

                        $('#cart-total').text(data.CartTotal).formatCurrency();
                        $('#update-message').text(data.Message).show();
                        setTimeout(function () { $("#update-message").hide(); }, 4000);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');

                    });
            }
        })

我正在尝试获取值并将其分配给countToUpdate变量

我的剃刀代码在

之下

 @{int i = 0;}
            @foreach (var item in Model.CartItems)
            {
                <tr id="row-@item.OrderCodeID">
                    <td>
                        @*@item.ProductAttribute.Product.ProductImagePath*@
                        <img src="/Images/OnlineStore/ProductImages/@item.ProductAttribute.Product.ProductImagePath"
                             style="border:solid; height: 50px; width: 50px; border-color: #CCCCCC;" alt="@item.ProductAttribute.Product.ProductImagePath" />
                    </td>
                    <td>
                        @item.ProductAttribute.OrderCodeID
                    </td>
                    <td>
                        @Html.ActionLink(item.ProductAttribute.Product.ProductName, "ProductDetails", "Store", new { productId = item.ProductAttribute.ProductID }, null)
                    </td>
                    <td>
                        @String.Format("{0:c}",@item.ProductAttribute.Product.ProductPrice)
                    </td>
                    @*<td id="item-count-@item.OrderCodeID">
                        @item.Quantity
                    </td>*@
                    <td>
                        @Html.TextBoxFor(model => model.CartItems[i].Quantity, new { style = "width:50px; text-align:right"})
                    </td>
                    <td>
                        <a href="#" class="RemoveLink btn-success btn-sm" data-id="@item.OrderCodeID" >
                            <i class="fa fa-times">&nbsp;Remove All</i></a>&nbsp;&nbsp;
                        <a href="#" class="RefreshQuantity btn-success btn-sm" data-id="@item.OrderCodeID" txt-id="CartItems_@(i)__count ">
                            <i class="fa fa-refresh">&nbsp;Update</i>
                        </a>
                    </td>
                    @*<td>
                        <a href="#" class="RemoveLink btn-success btn-xs" data-id="@item.OrderCodeID">Update</a>
                    </td>*@
                </tr>   
                i++;
            }

请帮助，在这里待了几个小时。

Answer 1

val()是一个函数，但仅限于jQuery对象。这不会返回这样的对象：

$('#txt-id')

因为它找不到任何匹配的元素。该选择器正在查找具有此属性的一个元素：

id="txt-id"

并且您没有任何具有该属性的元素。你有这个：

txt-id="CartItems_@(i)__count "

但我不确定你在那里做什么或者使用txt-id属性会是什么。此外，它位于a元素上，.val()函数无法读取“值”。即使您确实提供了id，但id必须在DOM中唯一。基于一个独特的计数器或类似的东西，你可以在一个循环中轻松完成，但是你将不得不在你的jQuery中考虑那个动态的id。

您可以使用jQuery中的input type="text"函数从文本框（.val()）中获取值，但您需要一个标识所需文本框的选择器。 看起来文本框与您点击的内容相比有几个元素，因此您可能需要获得创意。也许在您的选择中进行一些DOM遍历。

例如（这只是一个例子，有很多方法可以做到），你可以给它一个类：

new { style = "width:50px; text-align:right", @class = "someClass" }

然后在您的jQuery中，您可以使用以下内容识别与被点击元素相关的特定input元素：

$(this).closest('tr').find('.someClass')

基本上说：“从点击的元素开始，找到最近的tr祖先（所以你现在在整个表格行的上下文中），然后找到类{{1}的子元素}（这将标识该文本框，假设您不将该类用于其他任何内容）。

Answer 2

你的DOM中没有任何带有该id的元素，你有一个属性为txt-id的锚，这是你将你的函数绑定到click事件的元素，你应该能够做如下：

$(".RefreshQuantity").click(function () {
            // Get the id from the link
            var productToUpdate = $(this).attr("data-id");
            var countToUpdate = $(this).attr("txt-id"); //Here is the change
            if (productToUpdate != '') {
                // Perform the ajax post
                $.post("/ShoppingCart/UpdateQuantity", { "id": productToUpdate, "cartCount": countToUpdate },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        if (data.ItemCount == 0) {
                            $('#row-' + data.DeleteId).fadeOut('slow');
                        } //else {
                        //    $('#item-count-' + data.DeleteId).text(data.ItemCount);  
                        //}

                        $('#cart-total').text(data.CartTotal).formatCurrency();
                        $('#update-message').text(data.Message).show();
                        setTimeout(function () { $("#update-message").hide(); }, 4000);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');

                    });
            }
        })

如果由于任何原因导致无法使用（因为txt-id不是标准属性，您可以将其更改为data-txt-id）：

<a href="#" class="RefreshQuantity btn-success btn-sm" data-id="@item.OrderCodeID" data-txt-id="CartItems_@(i)__count ">
    <i class="fa fa-refresh">&nbsp;Update</i>
</a>

Answer 3

在你的Razor中，text-id是锚标记的一部分。 val（）方法在表单上唯一有效。

以下内容适用于大多数浏览器。使用属性选择器$（“[txt-id]”），然后获取该属性的值：

`$("[txt-id]").getAttribute("txt-id")`

使用Jquery获取MVC文本框值

3 个答案: