ASP.NET Core：选择产品颜色时跳转详情页失败问题求助

你的跳转失效核心问题是Razor语法与JavaScript变量的替换逻辑错误：

• @Url.Action是服务器端渲染代码，页面加载时就会生成固定URL，其中的"selectedColor"、"selectedRam"、"selectedSSD"是字面量字符串，不会被后续的JS变量替换。最终跳转的URL参数都是这些占位符文本，而非用户实际选中的值。
• 另外需确认$('#@Model.RamId')和$('#@Model.Ssdid')的选择器是否正确：如果你的Ram/SSD下拉框id属性是类似"ramId"而非Model中RamId的数值，这个选择器会定位不到正确元素，导致获取不到有效值。

修改JavaScript代码，采用模板替换或参数拼接的方式生成正确URL：

方案一：模板替换法 #

$(document).on('change', '#color', function () {
    // 修正选择器：将#ramId/#ssdId替换为你实际的Ram/SSD下拉框id
    var selectedRam = $('#ramId').val(); 
    var selectedSSD = $('#ssdId').val(); 
    var selectedColor = $(this).val();

    // 生成带占位符的基础URL
    var urlTemplate = '@Url.Action("ProductDetail", "ProductView", new { id = "{id}", ramId = "{ramId}", ssdId = "{ssdId}" })';
    
    // 替换占位符为实际选中值
    var url = urlTemplate
        .replace("{id}", selectedColor)
        .replace("{ramId}", selectedRam)
        .replace("{ssdId}", selectedSSD);

    window.location.href = url;
});

方案二：查询参数拼接法 #

如果不想用模板替换，也可以直接拼接查询参数：

$(document).on('change', '#color', function () {
    var selectedRam = $('#ramId').val(); 
    var selectedSSD = $('#ssdId').val(); 
    var selectedColor = $(this).val();

    // 获取基础路由地址
    var baseUrl = '@Url.Action("ProductDetail", "ProductView")';
    
    // 拼接并编码查询参数，避免特殊字符导致URL解析错误
    var url = baseUrl + '?id=' + encodeURIComponent(selectedColor) 
        + '&ramId=' + encodeURIComponent(selectedRam) 
        + '&ssdId=' + encodeURIComponent(selectedSSD);

    window.location.href = url;
});

• 元素选择器校验：打开浏览器控制台（F12），执行$('#ramId').val()（替换为你的实际元素id），确认能获取到正确的Ram/SSD数值，避免因选择器错误导致参数为空。
• 后端参数匹配：确保控制器ProductDetail方法的id参数对应颜色下拉框的productItemsId值，与前端传递参数一致。
• 空值处理：可增加参数非空校验，避免因用户未选择Ram/SSD导致无效跳转。

内容的提问来源于stack exchange，提问作者John