文章/答案/技术大牛

发布

社区首页 >问答首页 >获取隐藏字段的值并选中父类中的值复选框

问获取隐藏字段的值并选中父类中的值复选框
EN

Stack Overflow用户

提问于 2018-09-13 09:13:36

回答 2查看 329关注 0票数 0

我试图循环一个类来获取隐藏字段的值以及任何复选框的值，我需要循环这个类，因为它在页面上产生了不止一次，因为几个部分视图可能会从购物车中生成，用于产品装饰。然后，我想通过ajax将循环提交给MVC控制器(ive已经创建了后端内容)

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

html

asp.net-mvc

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-09-13 10:37:36

每个<div class="EmbPosWrap">中的输入与您的EmbellishmentCartDetailItemModelVM相关，因此您需要更改post方法以接受集合

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

或者使用EmbellishmentCartDetailModelVM，它包含EmbellishmentCartDetailItemModelVM的集合( 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 }),

票数 1

Stack Overflow用户

发布于 2018-09-13 09:21:04

这里的问题是

var items=$(".EmbPosWrap")

正在回归

<div class="EmbPosWrap">

据我所知，你需要孩子，所以你需要这样做

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52310423

复制

相似问题

问获取隐藏字段的值并选中父类中的值复选框
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取隐藏字段的值并选中父类中的值复选框EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取隐藏字段的值并选中父类中的值复选框
EN