如何使用 jquery 将列表 <string> 图像发送到字符串图像

Question

我的模型中有一些数据，模型中有一些图像。来自数据库的图像，我想在单击按钮上使用 jquery 将该图像添加到我的购物车中。我正在获取除图像之外的所有数据，这是代码。模型。图像是字符串图像列表，我只想要一个图像在我的字符串图像购物车类中。帮帮忙。

@{
@model MobileModel
}
<button type="submit" class="addcartbtn mt-5" data-pid="@Model.Id" data-pname="@Model.Name" data-pprice="@Model.Price" data-purl="@Model.Images" data-pqty="1">
    <span class=" fa fa-shopping-cart"> Add To Cart</span>
</button>

Jquery 代码

$(".addcartbtn").click(function (e) {
    e.preventDefault();

    var obj = {
        "Id": $(this).data("pid"),
        "Name": $(this).data("pname"),
        "Price": $(this).data("pprice"),
        "Images": $(this).data("purl"),
        "Quantity": $(this).data("pqty")
    }
    $(this).parents("#proditem").fadeOut(300);
    $.ajax(
        {
            url: "/Cart/Add",
            type: "GET",
            data:  obj
        }
    ).done(function (itemscount) {
        $("#cartitems").text(itemscount);
});

购物车类

public class ShoppingCartItem
{
    public int Id { get; set; }
    public string Name  { get; set; }
    public int Price { get; set; }
    public string Images { get; set; }
    public int Quantity { get; set; }
    public int Amount { get {return Quantity * Price;}}
}

我要发送数据的购物车控制器

 public class CartController : Controller
    {
        [HttpGet]
        public int Add(ShoppingCartItem item)
        {
            ShoppingCart cart = HttpContext.Session.Get<ShoppingCart>(WebUtil.Cart);
            if (cart == null) cart = new ShoppingCart();
            cart.Add(item);
            HttpContext.Session.Set(WebUtil.Cart, cart);            
            return cart.NumberOfItems;
        }

数据传入的MobileModel类表单

 public class MobileModel
    {
        public MobileModel()
        {
            Images = new List<string>();
        }
        public int Id { get; set; }

        public string Name { get; set; }

        public int Price  { get; set; }
        public List<string> Images { get; set; }
}

Answer 1

在 ShoppingCartItem 模型类改变

public string Images { get; set; }

变量为

public List<string> Images { get; set; }

然后在您的剃刀视图文件中获取这样的图像

@Model.Images[0]

Answer 2

如果直接将List数据传递给按钮的属性，则不会保存图片列表，可以change them to a string by comma to split。

<button type="submit" class="addcartbtn mt-5" data-pid="@Model.Id" data-pname="@Model.Name" data-pprice="@Model.Price" 
data-purl="@String.Join(",", Model.Images)"  data-pqty="1">
    <span class=" fa fa-shopping-cart"> Add To Cart</span>
</button>


  <script>
        $(".addcartbtn").click(function (e) {
            e.preventDefault();
            var obj = {
                "Id": $(this).data("pid"),
                "Name": $(this).data("pname"),
                "Price": $(this).data("pprice"),
                "Images": $(this).data("purl").split(',')[0],
                "Quantity": $(this).data("pqty")
            }
            ...
        });
    </script>

或者您可以使用ViewBag 传递此图像列表：

public IActionResult Index()
    {
        MobileModel mobileModel = new MobileModel()
        {
            Id = 1,
            Name = "aaaa",
            Price = 200,
            Images = new List<string>(){ "Image1","Image2","Image3"}
        };
        ViewBag.Images = mobileModel.Images;
        return View(mobileModel);
    } 


$(".addcartbtn").click(function (e) {
    e.preventDefault();
    var obj = {
        "Id": $(this).data("pid"),
        "Name": $(this).data("pname"),
        "Price": $(this).data("pprice"), 
        "Images": "@ViewBag.Images[0]",
        "Quantity": $(this).data("pqty")
    }
    ...
});