ASP.NET Core - 选择颜色时更改产品详细信息的 URL

Question

我正在研究电子商务笔记本电脑。我希望当用户在选择下拉列表中选择另一种颜色时，它将重定向到该颜色的产品。

我正在使用 JavaScript 来重定向 URL，代码如下：

$(document).on('change', '#color', function () {
    var selectedRam = $('#@Model.RamId').val(); 
    var selectedSSD = $('#@Model.Ssdid').val(); 
    var selectedColor = $(this).val();

    
    var url = '@Url.Action("ProductDetail", "ProductView", new { id = "selectedColor", ramId = "selectedRam", ssdId = "selectedSSD" })';

    window.location.href = url;
});

控制器：

public async Task<IActionResult> ProductDetail(int? id, int ramId, int ssdId)
{
    if (id == null)
    {
        return BadRequest();
    }
    var sp = await _context.ProductVariations
        .Include(n => n.ProductItems.Product)
        .Where(n => n.ProductItemsId == id && n.RamId == ramId && n.Ssdid == ssdId)
        .FirstOrDefaultAsync();


    ViewBag.Lisp = _context.ProductItems
        .Include(n => n.Product.Category)
        .Where(n => n.Product.CategoryId == sp.ProductItems.Product.CategoryId);

    ViewBag.Color = await _context.ProductItems
        .Where(n => n.ProductId == sp.ProductItems.ProductId)
        .Include(n => n.Color)
        .ToListAsync();


    if (sp == null)
    {
        return NotFound();
    }

    return View(sp);
}

所选框中的颜色值为

productItemsId

。

当我得到

productItemsId

、

SsdId

和

RamId

时，我会在数据库的

productVariation

表中找到该颜色的乘积。但问题是当我选择另一种颜色时，它不起作用。

我相信我的 JavaScript 是错误的。我搜索了 ChatGPT 和 Copilot 但还是一样。有谁知道解决方案吗？我将不胜感激任何指示。谢谢你。

Answer 1

假设您能够正确获取这 3 个变量的值：

selectedRam

、

selectedSSD

和

selectedColor

,

不幸的是，您无法将客户端代码的 JavaScript 变量值传递到服务器端代码

@Url.Action()

。

您需要使用参数和/或查询参数手动构造 URL。

var url = '@Url.Action("ProductDetail", "ProductView")' 
  + `/${selectedColor}?ramId=${selectedRam}&ssdId=${selectedSSD}`;