EN VI

C# - How to choose shoe size by color ASP.NET Core?

C# - How to choose shoe size by color ASP.NET Core

I'm working on add to Cart in Shoe Shopping. Here is my problem. I design one product have many size and many color in database (I'm not sure it correct). When I choose the shoe for add to cart. I want the user to choose a color then the size of that shoe will appear, here the view

Because the product has different Id but same name with different color and size so I use linq to get all the color of that product and use viewbang to send to the view

var sizes = _context.Products.Where(n => n.name== sp.name)
    .Include(s => s.ColorNavigation)
    .Include(s => s.SizeNavigation)
    .GroupBy(n=>n.SizeNavigation.Size1)
    .Select(n => n.FirstOrDefault())
    .ToList();
ViewBag.ListSizes = sizes;

Here the Razor view

@{
    IEnumerable<SanPham> ListSize = ViewBag.ListSizes;
}

<div class="product-options">
                <label>
                    Color
                    <select class="input-select" onchange="redirectToSelectedOption(this)">
                        <option value="0">@Model.ColorNavigation.Color1</option>
                        @foreach (var item in ViewBag.ListSizes)
                        {
                            if (item.ColorNavigation.Color1 != Model.ColorNavigation.Color1)
                            {
                                <option data-url="/post/@(SlugGenerator.SlugGenerator.GenerateSlug(item.Hinhanh1)) - @(item.Idsp)">@item.ColorNavigation.Color1</option>
                            }

                        }
                    </select>
                </label>

                <label>
                    Size
                    <select class="input-select" onchange="redirectToSelectedOption(this)">
                        <option >@Model.SizeNavigation.Size1</option>
                        @foreach (var item in ViewBag.ListSizes)
                        {
                            if (item.SizeNavigation.Size1 != Model.SizeNavigation.Size1)
                            {
                                <option  data-url="/post/@(SlugGenerator.SlugGenerator.GenerateSlug(item.Hinhanh1)) - @(item.Idsp)">@item.SizeNavigation.Size1</option>
                            }
                            
                        }
                    </select>

                </label>

</div>

Is there any way to choose the color and then shoes size? Because my code when I chose the color and then select the size its change to different products. Does my database design is wrong?. I think my problem is the code logic when I group by the name of product. Is there any solutions to add product with color and size correspond. Here the product table and relationship with size and color

Solution:

Is there any way to choose the color and then shoes size? Because my code when I chose the color and then select the size its change to different products. Does my database design is wrong.

Yeah there is. Regarding your database design, its hard to comment if its correct or wrong, because we don't know what's the requirement. However, for this kind of scenario or we could say for ecommerce shopping cart design, we usually, design by product table, productVariant table. within the product variant we include color, size, SKU, price and quanity.

Therefore, we cannot say your design is incorrect, may be you have done it as per the requirement. But if there's a variant table or if the product as color and size list we still could filter the product by its size.

In order to leverage your product ERD, I am writing your product table as following:

public class Product
{
    public int ProductID { get; set; }
    public string Name { get; set; }
    public List<string> Colors { get; set; }
    public List<string> Sizes { get; set; }
}

Note: In order to execute my test I am doing this way, you could modify based on your requirement.

Now, let's assume you have following product list in the Database:

List<Product> products = new List<Product>
     {
         new Product { ProductID = 1, Name = "Nike Shoe", Colors = new List<string>{"Black", "White"}, Sizes = new List<string>{"8", "9", "10"}},
         new Product { ProductID = 2, Name = "Adidas T-Shirt", Colors = new List<string>{"Red", "Blue", "Green"}, Sizes = new List<string>{"S", "M", "L"}},
         new Product { ProductID = 3, Name = "Puma Jacket", Colors = new List<string>{"Black", "Grey"}, Sizes = new List<string>{"M", "L"}},
         new Product { ProductID = 4, Name = "Reebok Shorts", Colors = new List<string>{"Blue", "Grey"}, Sizes = new List<string>{"S", "M", "L"}},
         new Product { ProductID = 5, Name = "New Balance Sneakers", Colors = new List<string>{"Red", "Blue"}, Sizes = new List<string>{"9", "10", "11"}},
         new Product { ProductID = 6, Name = "Under Armour Hoodie", Colors = new List<string>{"Grey", "Black"}, Sizes = new List<string>{"S", "M", "L"}},
         new Product { ProductID = 7, Name = "Fila Pants", Colors = new List<string>{"Black", "Navy"}, Sizes = new List<string>{"M", "L", "XL"}},
         new Product { ProductID = 8, Name = "Converse Shoes", Colors = new List<string>{"White", "Black"}, Sizes = new List<string>{"7", "8", "9"}},
         new Product { ProductID = 9, Name = "Vans Sneakers", Colors = new List<string>{"Black", "Checkerboard"}, Sizes = new List<string>{"8", "9", "10"}},
         new Product { ProductID = 10, Name = "Asics Running Shoes", Colors = new List<string>{"Blue", "Yellow"}, Sizes = new List<string>{"8", "9", "10"}},
     };

Now, I would like to get the each specific product's all size available. So that I can do like below:

string searchName = "Nike Shoe";
string searchColor = "Black";

          
var sizes = products
    .Where(p => p.Name == searchName && p.Colors.Contains(searchColor))
    .SelectMany(p => p.Sizes)
    .Distinct()
    .ToList();


Console.WriteLine($"Sizes for {searchName} in {searchColor}:");
foreach (var size in sizes)
{
    Console.WriteLine(size);
}

Alternative way:

You could also try this query:

 var sizes = products
      .Where(p => p.ProductName == searchName && p.Color.ColorName == searchColor)
      .Select(p => p.Size.SizeName)
      .Distinct()
      .ToList();

Output:

Note: This is one of the way, there's might other way depending on the table design and preference.