Получение значения текстового поля MVC с помощью Jquery

Question

Добрый день

Я пытаюсь получить значение поля текстового поля в MVC, используя бритву и присвоить его переменной позже передается через AJAX к контроллеру действий. Я пробовал использовать .val(), но при отладке с помощью инструментов разработчика Google я продолжаю получать .val() не является функцией. Я не так опытен с jquery прямо сейчас и хотел бы немного помочь. Герре ниже.

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. Что вы можете сделать в цикле достаточно легко, основываясь на уникальном счетчике или что-то в этом роде, но тогда вам придется учитывать эту динамику id в вашем jQuery.

Вы можете получить значение из текстового поля (input type="text") с помощью функции .val() в jQuery, но вам нужен селектор, который идентифицирует нужное текстовое поле. Похоже, что текстовое поле находится в нескольких элементах от того, что вы нажимаете, поэтому вам может потребоваться творческий подход. Возможно, сделайте немного обхода DOM в своем выборе.

Например (и это только один пример, есть много способов сделать это), вы могли бы дать ему класс:

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

Затем в Jquery вы можете определить, что конкретный input элемент отношение к щелкнутому элементу с чем-то вроде этого:

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

это в основном говорит: «Начиная с щелкнутым элементом, найти ближайший tr предка (так что вы сейчас в контексте всей строки таблицы), а затем найти дочерние элементы h класс someClass (который будет идентифицировать это текстовое поле, если вы не используете этот класс для чего-либо еще).

Answer 2

У вас нет элемента с этим идентификатором в DOM, у вас есть привязка с атрибутом как 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

В вашей Бритве текстовый идентификатор является частью тега привязки. Методы val() работают однозначно на формах.

В большинстве браузеров должно работать следующее. Используйте селектор атрибута $ («[TXT-идентификатор]»), а затем получить значение этого атрибута:

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