ASP MVC中如何使用Select标签实现按类别筛选产品

你的筛选功能失效核心原因是HTML结构错误：<option>标签内部不能嵌套<a>标签，这种写法不符合HTML规范，浏览器不会识别option里的链接，导致点击选项无法触发路由跳转。

修复方案1：使用表单提交（无JS依赖） #

把select放到表单里，提交到Products/ByName接口：

@using AspNetCoreTemplate.Web.ViewModels.Category;
@model ListCategoryViewModel

<form asp-controller="Products" asp-action="ByName" method="get">
    <select name="categoryId" onchange="this.form.submit()">
        <option value="">请选择分类</option>
        @foreach (var item in Model.Categories)
        {
            <option value="@item.Id">@item.Name</option>
        }
    </select>
</form>

说明：

• 表单通过asp-controller和asp-action指定目标接口
• select的name属性必须和Action方法的参数名categoryId一致
• onchange="this.form.submit()"实现选择选项后自动提交表单

修复方案2：使用JavaScript监听跳转 #

保留select，添加JS事件监听，选择后跳转到对应路由：

@using AspNetCoreTemplate.Web.ViewModels.Category;
@model ListCategoryViewModel

<select id="categorySelect">
    <option value="">请选择分类</option>
    @foreach (var item in Model.Categories)
    {
        <option value="@Url.Action("ByName", "Products", new { categoryId = item.Id })">@item.Name</option>
    }
</select>

<script>
    document.getElementById('categorySelect').addEventListener('change', function() {
        const url = this.value;
        if (url) {
            window.location.href = url;
        }
    });
</script>

说明：

• 用Url.Action提前生成好每个选项对应的跳转URL
• 监听select的change事件，当选项变化时跳转到对应的URL

后端检查（可选） #

如果修复前端后仍有问题，确认以下几点：

• ProductInListViewModel与实体类的映射是否正确（To<T>()方法是否正常工作）
• productRepository.All()是否返回正确的产品数据
• 数据库中产品的CategoryId是否与分类ID匹配

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