Получить значения скрытых полей и установить флажки в родительском классе

Question

Я пытаюсь перебрать класс, чтобы получить значения скрытых полей, а также значения любых флажков CHECKED, мне нужно зациклить класс, так как он может быть создан более одного раза на странице, так как несколько частичных представлений могут быть производится из корзины для украшения продукта. Затем я хочу отправить цикл через ajax на контроллер MVC (я уже создал бэкэнд)

HTML

    <div class="EmbPosWrap">
    <input class="hidden-field" id="CartItemId" name="hiddenfield" value="167" type="hidden"/>
    <input class="hidden-field" id="StoreId" name="hiddenfield" value="1" type="hidden"/>
    <input class="hidden-field" id="CustomerId" name="hiddenfield" value="1" type="hidden"/>
    <input class="hidden-field" id="ItemID" name="hiddenfield" value="11976" type="hidden"/>
    <div class="EmbPosBx">      
        <input type="checkbox" name="embellishmentcart" value="1" />
        <input type="checkbox" name="embellishmentcart" value="2" />
        <input type="checkbox" name="embellishmentcart" value="5" />
        <input type="checkbox" name="embellishmentcart" value="6" />
    </div>
</div>

Но HTML может быть таким с двумя отдельными элементами

    <div class="EmbPosWrap">
    <input class="hidden-field" id="CartItemId" name="hiddenfield" value="167" type="hidden"/>
    <input class="hidden-field" id="StoreId" name="hiddenfield" value="1" type="hidden"/>
    <input class="hidden-field" id="CustomerId" name="hiddenfield" value="1" type="hidden"/>
    <input class="hidden-field" id="ItemID" name="hiddenfield" value="11976" type="hidden"/>
    <div class="EmbPosBx">          
        <input type="checkbox" name="embellishmentcart" value="1" />    
        <input type="checkbox" name="embellishmentcart" value="2" />    
        <input type="checkbox" name="embellishmentcart" value="5" />
        <input type="checkbox" name="embellishmentcart" value="6" />
    </div>
</div>

<div class="EmbPosWrap">
    <input class="hidden-field" id="CartItemId" name="hiddenfield" value="168" type="hidden"/>
    <input class="hidden-field" id="StoreId" name="hiddenfield" value="1" type="hidden"/>
    <input class="hidden-field" id="CustomerId" name="hiddenfield" value="1" type="hidden"/>
    <input class="hidden-field" id="ItemID" name="hiddenfield" value="1256" type="hidden"/>
    <div class="EmbPosBx">      
        <input type="checkbox" name="embellishmentcart" value="1" />    
        <input type="checkbox" name="embellishmentcart" value="2" />
        <input type="checkbox" name="embellishmentcart" value="3" />    
        <input type="checkbox" name="embellishmentcart" value="4" />
        <input type="checkbox" name="embellishmentcart" value="5" />
        <input type="checkbox" name="embellishmentcart" value="6" />
    </div>
</div>

Jquery

$(function(){    
var items=$(".EmbPosWrap")
 $.each(items,function (index,item) {      
   alert($(item).attr("value"));       
   var checkboxValues = [];
  $('input[name=embellishmentcart]:checked').map(function () {
    checkboxValues.push($(this).val());
    alert($(item).attr("checkboxValues"));
  });           
});     

});

Я могу легко получить одну форму, как показано ниже -

 $('#submit').on('click', function () {
  var checkboxValues = [];
  $('input[name=embellishmentcart]:checked').map(function () {
    checkboxValues.push($(this).val());
  });
  var dataRow = {
    'CartItemId': $('#CartItemId').val(),
    'embellishmentcart': checkboxValues,
    'StoreId': $('#StoreId').val(),
    'CustomerId': $('#CustomerId').val(),
    'ItemID': $('#ItemID').val()
  };
  const data = JSON.stringify(dataRow);
  console.log(data);
  $.ajax({
    type: "POST",
    url: '@Url.Action("EmbellishmentOrder", "EmbellishmentCart")',
    dataType: 'json',
    data: dataRow,
    success: function (data) {
      setTimeout(function () {
        window.location.href = data;
      }, 2000);
    }
  });
});

Контроллер

   public ActionResult EmbellishmentOrder(EmbellishmentCartDetailModelVM.EmbellishmentCartDetailItemModelVM vm)
{
  var picId = (int)TempData["RecordId"];

  foreach (var item in vm.embellishmentcart)
  {
    EmbellishmentOrderDetailRecord dataModel = new EmbellishmentOrderDetailRecord();

    dataModel.CustomerID = vm.CustomerId;
    dataModel.StoreID = vm.StoreId;
    dataModel.CartItemID = vm.CartItemId;
    dataModel.ItemID = vm.ItemID;
    dataModel.PictureId = picId;
    dataModel.EmbellishmentPositionProductDetailID = item;
    _orderDetailService.InsertEmbellishmentOrderDetailRecord(dataModel);
  }

  return Json(Url.RouteUrl("ShoppingCart"), JsonRequestBehavior.AllowGet);
}

ViewModel

namespace Nop.Plugin.Other.ProductEmbellishment.Models.ViewModels
{
  public partial class EmbellishmentCartDetailModelVM : BaseNopModel
  {
    public EmbellishmentCartDetailModelVM()
    {
      Items = new List<EmbellishmentCartDetailItemModelVM>();
    }
    public bool ShowSku { get; set; }
    public bool ShowProductImages { get; set; }
    public bool IsEditable { get; set; }
    public IList<EmbellishmentCartDetailItemModelVM> Items { get; set; }
    public partial class EmbellishmentCartDetailItemModelVM : BaseNopEntityModel
    {
      public EmbellishmentCartDetailItemModelVM()
      {
        Picture = new PictureModel();
      }
      public PictureModel Picture { get; set; }

      public int CustomerId { get; set; }

      public int StoreId { get; set; }

      public int CartItemId { get; set; }

      public int Qty { get; set; }

      public string AttributeInfo { get; set; }

      public string PictureURL { get; set; }

      public string ImageUrl { get; set; }

      public string Title { get; set; }

      public HttpPostedFileBase File { get; set; }

      public int[] embellishmentcart { get; set; }

      public int ItemID { get; set; }

      public class EmbellishmentPictureModelVM
      {
        public int Id { get; set; }

        public string EmbellishmentPositionDescription { get; set; }

        public string EmbellishmentPositionCost { get; set; }

        public string ImageUrl { get; set; }

        public string Title { get; set; }

        public string AlternateText { get; set; }

        public int ItemID { get; set; }
      }
    }
  }
}

Answer 1

Входные данные в каждом <div class="EmbPosWrap"> относятся к вашему EmbellishmentCartDetailItemModelVM, поэтому вам нужно изменить метод публикации, чтобы принять коллекцию

public ActionResult EmbellishmentOrder (List<EmbellishmentCartDetailModelVM.EmbellishmentCartDetailItemModelVM> vm)

или использовать EmbellishmentCartDetailModelVM, который содержит коллекцию EmbellishmentCartDetailItemModelVM (свойство Items)

public ActionResult EmbellishmentOrder (EmbellishmentCartDetailModelVM vm)

Далее, у вас недействительный html из-за дублирования атрибутов id, и вы должны изменить свои входные данные hdden, чтобы вместо них использовать имена классов

<div class="EmbPosWrap">
    <input class="hidden-field" class="CartItemId" name="CartItemId" value="167" type="hidden"/>
    <input class="hidden-field" class="StoreId" name="StoreId" value="1" type="hidden"/>
    ....
    <div class="EmbPosBx">      
         <input type="checkbox" class="embellishmentcart" name="embellishmentcart" value="1" />
         <input type="checkbox" class="embellishmentcart" name="embellishmentcart" value="2" />
         ....
    </div>
 </div>

Затем в сценарии необходимо выполнить итерацию контейнеров <div> и контейнера foreach, построить объект и добавить его в массив, который вы затем отправляете в метод

$('#submit').click(function () {
    var collection = [];
    var containers = $('.EmbPosWrap');
    $.each(containers, function(index, item) {
        var CartItemId = $(this).find('.CartItemId');
        var StoreId = $(this).find('.StoreId');
        ....
        var embellishmentcart = [];
        var checkboxes = $(this).find('.embellishmentcart:checked');
        $.each(checkboxes, function(index, item) {
            embellishmentcart.push($(this).val());
        })
        collection.push({ CartItemId: CartItemId, StoreId: StoreId, .... , embellishmentcart: embellishmentcart });
    })
    $.ajax({
        type: "POST",
        url: '@Url.Action("EmbellishmentOrder", "EmbellishmentCart")',
        dataType: 'json',
        contentType: 'application/json', // add
        data: JSON.stringify(collection), // see note below
        success: function (data) {
            ....
        });
    });
});

Обратите внимание, что если вы используете модель EmbellishmentCartDetailModelVM в методе POST (2-й вариант выше), тогда опция data должна быть

data: JSON.stringify({ Items: collection }),

Answer 2

Проблема здесь в том, что ваш

var items=$(".EmbPosWrap") 

возвращается

<div class="EmbPosWrap">

Насколько я понял, вам нужны дети, поэтому вам нужно сделать что-то вроде этого

var items=$(".EmbPosWrap").children()