ASP.NET Core 9 MVC分类下拉筛选报错及自动触发问题求助

问题1：RZ1031标签助手错误 #

原视图代码在option标签属性区直接拼接C#代码，触发RZ1031错误，错误提示：

Error (active) RZ1031
The tag helper 'option' must not have C# in the element's attribute declaration area.
C:\Users\zaida\Desktop\Clinic Management Software\ClinicManagementSystem\Views\ProductManagement\Index.cshtml 55

错误代码 #

<div class="d-flex align-items-center">
    <label for="category-select" class="me-2">Category</label>
    <select name="categoryFilter" class="form-select" id="category-select">
        <option value="">All Categories</option>
        @foreach (var category in Model.Categories)
        {
            var isSelected = Model.CategoryFilter == category.Value ? "selected" : "";
            <option value="@category.Value" selected="" @isSelected>@category.Text</option>
        }
    </select>
</div>

修复方法 #

ASP.NET Core标签助手不允许在属性声明区直接插入C#代码，提供两种修复方式：

方式1：直接绑定布尔值判断选中状态

修改option标签的selected属性，用布尔表达式直接判断，避免字符串拼接：

<div class="d-flex align-items-center">
    <label for="category-select" class="me-2">Category</label>
    <select name="categoryFilter" class="form-select" id="category-select">
        <option value="">All Categories</option>
        @foreach (var category in Model.Categories)
        {
            <option value="@category.Value" selected="@(Model.CategoryFilter == category.Value)">@category.Text</option>
        }
    </select>
</div>

方式2：利用SelectListItem的Selected属性（更简洁）

在控制器中直接设置选项的选中状态，视图无需额外判断：

// 控制器中修改Categories获取逻辑
var categories = await _context.Product_Category
    .Select(c => new SelectListItem 
    { 
        Text = c.Name, 
        Value = c.Name,
        Selected = c.Name == categoryFilter // 直接绑定选中状态
    })
    .ToListAsync();

视图简化为：

<div class="d-flex align-items-center">
    <label for="category-select" class="me-2">Category</label>
    <select name="categoryFilter" class="form-select" id="category-select">
        <option value="">All Categories</option>
        @foreach (var category in Model.Categories)
        {
            <option value="@category.Value">@category.Text</option>
        }
    </select>
</div>

问题2：切换分类后需回车才执行筛选 #

修改后错误消失，但切换分类不会自动触发筛选，需手动回车搜索栏才生效，这是因为下拉框未绑定自动提交逻辑。

解决方法 #

添加JavaScript监听下拉框的change事件，自动触发筛选请求：

方案1：表单提交（适配现有控制器逻辑）

将筛选控件包裹在form内，监听change事件提交表单：

<form asp-action="Index" method="get">
    <div class="d-flex align-items-center">
        <label for="category-select" class="me-2">Category</label>
        <select name="categoryFilter" class="form-select" id="category-select">
            <option value="">All Categories</option>
            @foreach (var category in Model.Categories)
            {
                <option value="@category.Value" selected="@(Model.CategoryFilter == category.Value)">@category.Text</option>
            }
        </select>
        <!-- 其他筛选控件（如搜索框）也放入该表单 -->
        <input type="text" name="searchTerm" value="@Model.SearchTerm" class="form-control ms-2" placeholder="Search...">
    </div>
</form>

<script>
    // 监听分类下拉框切换事件
    document.getElementById('category-select').addEventListener('change', function() {
        this.form.submit();
    });
</script>

方案2：直接发起GET请求（无需表单）

若不想使用表单，可直接构造URL并跳转：

<div class="d-flex align-items-center">
    <label for="category-select" class="me-2">Category</label>
    <select name="categoryFilter" class="form-select" id="category-select">
        <option value="">All Categories</option>
        @foreach (var category in Model.Categories)
        {
            <option value="@category.Value" selected="@(Model.CategoryFilter == category.Value)">@category.Text</option>
        }
    </select>
</div>

<script>
    document.getElementById('category-select').addEventListener('change', function() {
        const category = this.value;
        const searchTerm = '@Model.SearchTerm';
        const sortBy = '@Model.SortBy';
        const page = '@Model.CurrentPage';
        
        // 构造带参数的URL
        const url = `/ProductManagement/Index?categoryFilter=${encodeURIComponent(category)}&searchTerm=${encodeURIComponent(searchTerm)}&sortBy=${encodeURIComponent(sortBy)}&page=${page}`;
        window.location.href = url;
    });
</script>

控制器代码优化（可选） #

当前IndexPost方法可删除，筛选逻辑已在Index的GET方法中实现，筛选、排序类操作推荐用GET请求，方便书签和分享。

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