Data from viewbag is not displaying properly when using a swatch instead a drop down menu

Question

Using C# ASP.NET MVC for this.

I am working on a Product Detail Page. If a product has multiple variations then a drop down appears so the user can navigate to the other products.

So far this works using drop down, all records with are populating it. But now I want it to work with a SWATCH.

The problem I am having is that when I try to use the same logic that populates the drop down but for SWATCHES, the page does not return EACH individual color. It is only returning the color of the product you happen to be on.

Explanation of what I have tried

This is the code for the dropdown. This is working and is populating the page.

<div class="form-group">
     <div class="col-md-6">
          @Html.DropDownListFor(model => model.id, new SelectList(ViewBag.myColorValues, "id", 
           "color"), null, new { @class = "form-control"})
      </div>
</div>

Now when I try to implement the same logic to display the data using a swatch icon not all the records display as they would in a drop down.

<div class="product-size-variations">
   <p class="variation-label">Size:</p>
      <div class="product-size-variation variation-wrapper">
         <div class="swatch-wrapper">
            <a href="~/myproduct/@Model.id"
              class="product-size-swatch-btn selected bg-color" data-bg- 
                   color="@Model.ColorValue"
                   data-bs-placement="top" title="@Model.color">
                 <span class="product-size-variation-label"></span>
            </a>
          </div>
      </div>
    </div>

Code Snippets For Drop Down Logic

Controller:

    public ActionResult Details(int? id)
        {                      
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Product Product = db.Products.Find(id);
            if (Product == null)
            {
                return HttpNotFound();
            }

           
            ViewBag.myColorValues = db.Products.Where
                (x => x.isActive == true &&
                x.VariantGroupID == Product.VariantGroupID &&
x.color == Product.color && x.ColorValue == ColorValue).AsNoTracking().ToList();

            return PartialView("_nazhapdp", Product);
        }


    
     public PartialViewResult GetProductVariants(int? id, string VariantGroupID, string color, string ColorValue)
    {
        
        //This is for the drop down list
        ViewBag.LoadVariantColors = db.Products.Where(x => x.isActive == true &&
        x.VariantGroupID == VariantGroupID &&
        x.color == color && x.ColorValue == ColorValue).AsNoTracking().ToList();
       
        //Returning the data for when using the drop down or SWATCH
        return PartialView("_partialviewVariantsPDP", ViewBag.LoadVariantColors);      
    }

Swatch icon logic on the view:

if (Model.isVariant == true && Model.VariantGroupID == VariantGroupID)
      {        
            @foreach (var record in Model.id.ToString())
            {
     <div class="product-size-variations">
       <p class="variation-label">Size:</p>
          <div class="product-size-variation variation-wrapper">
             <div class="swatch-wrapper">
                <a href="~/myproduct/@Model.id"
                  class="product-size-swatch-btn selected bg-color" data-bg- 
                       color="@Model.ColorValue"
                       data-bs-placement="top" title="@Model.color">
                     <span class="product-size-variation-label"></span>
                </a>
              </div>
          </div>
        </div>
            }            
      }

Am I missing something? Does it work differently when returning data to a drop down, than when returning data in another form on a page? For the drop down I am using a select list and for the swatches I am simply adding the code in a for loop and know enough to be sure this should also work. I am thinking it might have something to do with the loop but cant figure it out.

Answer 1

Is the issue that you are filtering on the colour in your controller? It doesn't explain why you get four records but the issue would appear to be in here somewhere.

Stepping through and debugging this should confirm the issue.

 public PartialViewResult GetProductVariants(int? id, string VariantGroupID, string color, string ColorValueSelectionHashForPDP)
{
    
    //This is for the drop down list
    ViewBag.DynamicLoadVariantColors = db.Products.Where(x => x.isActive == true &&
    x.VariantGroupID == VariantGroupID &&
    // Are you filtering on only one colour here? Try removing this.
    x.color == color && 
    
    x.ColorValueSelectionHashForPDP == ColorValueSelectionHashForPDP).AsNoTracking().ToList();
   
    //Returning the data for when using the drop down or SWATCH
    return PartialView("_partialviewVariantsPDP", ViewBag.DynamicLoadVariantColors);      
}