获取父类中隐藏字段的值和复选框选中的值

Question

我试图遍历一个类以获取隐藏字段的值以及任何 CHECKED 复选框的值，我需要循环该类，因为它在页面上生成不止一次，因为购物车可能会生成多个部分视图用于产品装饰。然后我想通过 ajax 将循环提交到 MVC 控制器(我创建了后端东西 allready(

.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);
}

视图模型

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相关，因此您需要更改 post 方法以接受集合

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

或使用包含EmbellishmentCartDetailItemModelVM集合的EmbellishmentCartDetailModelVM(Items属性(

public ActionResult EmbellishmentOrder (EmbellishmentCartDetailModelVM vm)

接下来，由于id属性重复，您的 html 无效，您应该将 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>容器，并为每个容器构建一个对象并将其添加到数组中，然后将其发布到方法

$('#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) {
....
});
});
});

请注意，如果您在 POST 方法中使用EmbellishmentCartDetailModelVM模型(上面的第二个选项(，则data选项需要

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

Answer 2

这里的问题是你的

var items=$(".EmbPosWrap") 

正在返回

<div class="EmbPosWrap">

据我了解，你需要孩子，所以你需要做这样的事情

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