Question

我想将数据从<input>值和相应的recordID传递到购物车中每个购物车项目的控制器方法。我的for循环为每个购物车项目生成输入字段，如此

<table>
    @for (int i = 0; i < Model.CartItems.Count; i++)
      {
     <tr>
       <td>
            <input data-id="@Model.CartItems[i].RecordID" type="text" value="@Model.CartItems[i].CartCount"/>
      </td>
    </tr>
    }
    <tr>
      <td>
           <button class="UpdateQuantity">Save Changes</button>
      </td>
    </tr>
</table>

这是我的试用硬脚本。我不知道如何获取数据ID和输入值，所以我可以将两者都传递给控制器方法。我想为购物车中的每个购物车项目发送一对id和输入值，因此方法可以更新购物车中每件商品的数量变化。

    $(".UpdateQuantity").click(function(){
        $("input[data-id][value]").each(function(i){
            $.ajax({
                type:"POST",
                url:"/ShopingCart/UpdateCartQuantity",
                data:{"id":input[data-id],"cartCount":input[value]},
                dataType:'json',
                cache:false,
                contenttype:"application/jsonrequest; charset=utf-8"
            }
                )
        })})

Answer 1

您可以使用jquery：

$("input").each(function(){
  var id = $(this).data("id");
  var value = $(this).val();
  alert("My id is: " + id + " with this value: " + value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-id="myRecordID1" type="text" value="myValue1"/>
<input data-id="myRecordID2" type="text" value="myValue2"/>

Answer 2

您可以使用jQuery的attr函数。

$(".UpdateQuantity").click(function(){
    // in jQuery's .each, the second parameter is the element
    $("input[data-id][value]").each(function(i, input){
        var id = input.attr('data-id');
        var cardCount = input.attr('value');

        $.ajax({
            type:"POST",
            url:"/ShopingCart/UpdateCartQuantity",
            data:{"id":id,"cartCount":cardCount},
            dataType:'json',
            cache:false,
            contenttype:"application/jsonrequest; charset=utf-8"
        });
    });
});

Answer 3

只是想要减少到一个ajax呼叫......

使用表单包装输入并将data-id更改为name：

<table>
   <form id="frm_cart">
    @for (int i = 0; i < Model.CartItems.Count; i++)
      {
     <tr>
       <td>
            <input name="@Model.CartItems[i].RecordID" type="text" value="@Model.CartItems[i].CartCount"/>
      </td>
    </tr>
    }
   </form>
    <tr>
      <td>
           <button class="UpdateQuantity">Save Changes</button>
      </td>
    </tr>
</table>

然后：

$(".UpdateQuantity").click(function(){
    //get frm inputs into array
    var frm_data = $("#frm_cart").serializeArray();

    $.ajax({
         type:"POST",
         url:"/ShopingCart/UpdateCartQuantity",
         data: frm_data,
         dataType:'json',
         cache:false,
         contenttype:"application/jsonrequest; charset=utf-8",
         error: function (jqXHR, textStatus) {
           //do on error
         },
         success: function (data){
            //do on success
         }
    });
});

//期望服务器端的数组，其中record_id为键，cart_count为值

使用ajax

3 个答案: