Question posted in
You can find the official documentation here.

How to Send List<string> images to string images with jquery – Jquery ajax

I have some data in my Model and Images in Model. Images that are coming From Database and I want to add that image in my Shopping Cart with jquery on click button. I am getting all the data except Images here is the code. Model. Images are the List of string Images and I want one image only in my string images cart class. Help it out.

@{
@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 Code 

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

Cart Class

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

Cart Controller where i want to send data

 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 class form where data is comming

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

2

Answers


  1. 0

    In ShoppingCartItem Model class change 

    public string Images { get; set; }

    variable to 

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

    then in your razor view file get the image like this

    @Model.Images[0]
    Login or Signup to reply.
  2. 0

    It will not save the list of images if you directly pass List data to the button’s attribute, you can 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>

    Or you can use ViewBag to pass this List of images:

    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")
    }
    ...
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search