如何在ASP.NET Core与HTML中实现范围搜索功能

1. 修改输入模型（inputModel） #

将原单个数值字段替换为范围字段，支持空值输入：

public class inputModel
{
    public string areaunit { get; set; }
    // 面积范围
    public decimal? MinArea { get; set; }
    public decimal? MaxArea { get; set; }
    // 价格范围
    public decimal? MinPrice { get; set; }
    public decimal? MaxPrice { get; set; }
}

2. 更新视图代码 #

替换原单个输入框为范围输入组，保留datalist提示：

<!-- 面积范围搜索 -->
<div style="display: flex; align-items: center; gap: 10px; margin-left:20px;">
    <input list="MinAreaList" asp-for="Input.MinArea" placeholder="最小面积" style="height:50px; border:solid black; border-radius:5px; padding:0 10px;">
    <span>-</span>
    <input list="MaxAreaList" asp-for="Input.MaxArea" placeholder="最大面积" style="height:50px; border:solid black; border-radius:5px; padding:0 10px;">
    <datalist id="MinAreaList">
        <option value="10"></option>
        <option value="12"></option>
        <option value="15"></option>
        <option value="20"></option>
        <option value="25"></option>
        <option value="30"></option>
        <option value="35"></option>
        <option value="40"></option>
        <option value="45"></option>
        <option value="50"></option>
        <option value="55"></option>
    </datalist>
    <datalist id="MaxAreaList">
        <option value="10"></option>
        <option value="12"></option>
        <option value="15"></option>
        <option value="20"></option>
        <option value="25"></option>
        <option value="30"></option>
        <option value="35"></option>
        <option value="40"></option>
        <option value="45"></option>
        <option value="50"></option>
        <option value="55"></option>
    </datalist>
</div>

<!-- 价格范围搜索 -->
<div style="display: flex; align-items: center; gap: 10px; margin:10px 0 0 20px;">
    <input asp-for="Input.MinPrice" placeholder="最低价格" style="height:50px; border:solid black; border-radius:5px; padding:0 10px;">
    <span>-</span>
    <input asp-for="Input.MaxPrice" placeholder="最高价格" style="height:50px; border:solid black; border-radius:5px; padding:0 10px;">
</div>

3. 调整控制器筛选逻辑 #

拆分筛选条件，处理空值情况，修正分页计算时机：

public IActionResult Rent(inputModel input, int PageNumber = 1)
{
    var data = rdb.GetDataHouse();
    var datas = rdb.GetDataHouse();

    ViewBag.Data = datas.Take(7).ToList();

    // 面积单位筛选
    if (!string.IsNullOrEmpty(input.areaunit))
    {
        data = data.Where(x => x.areaUnit == input.areaunit);
    }

    // 面积范围筛选
    if (input.MinArea.HasValue)
    {
        data = data.Where(x => x.area >= input.MinArea.Value);
    }
    if (input.MaxArea.HasValue)
    {
        data = data.Where(x => x.area <= input.MaxArea.Value);
    }

    // 价格范围筛选
    if (input.MinPrice.HasValue)
    {
        data = data.Where(x => x.price >= input.MinPrice.Value);
    }
    if (input.MaxPrice.HasValue)
    {
        data = data.Where(x => x.price <= input.MaxPrice.Value);
    }

    // 筛选后计算分页参数
    var totalItems = data.Count();
    ViewBag.Totalpages = Math.Ceiling(totalItems / 6.0);

    // 分页截取数据
    data = data.Skip((PageNumber - 1) * 6).Take(6).ToList();

    var viewModel = new RentModel
    {
        Data = data,
        Input = input // 回显用户输入的筛选条件
    };

    return View(viewModel);
}

关键注意事项 #

• 使用可空类型（decimal?）处理用户未输入的情况，避免空值异常
• 不要过早调用ToList()，确保EF Core将筛选逻辑转换为SQL查询，提升性能
• 视图模型中传递用户输入的input对象，实现筛选条件回显
• 若需更美观的交互（如滑块选择范围），可集成jQuery UI等前端组件扩展

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