ASP.NET Core MVC多列搜索栏实现及数据绑定技术咨询

一、视图层：改造搜索栏支持多条件筛选 #

将原搜索表单调整为支持价格区间、面积区间+单位选择的结构，给每个表单控件添加name属性，方便后端接收参数：

@model IEnumerable<eHouse.Models.RentModel>

<form asp-action="Rent" method="get" id="searchForm">
    <div class="wrap">
        <!-- 全局搜索框 -->
        <div class="search">
            <input type="text" class="searchTerm" name="keyword" 
                   style="width: 700px; color:#000000; text-align: left;" 
                   placeholder="搜索房源名称/描述..." value="@Request.Query["keyword"]">
            <button type="submit" class="searchButton">
                <i class="fa fa-search"></i>
            </button>
        </div>
        <!-- 多条件筛选区 -->
        <div id="filter">
            <!-- 面积单位选择 -->
            <select name="areaUnit" class="area-unit">
                <option value="Kanal" @(Request.Query["areaUnit"] == "Kanal" ? "selected" : "")>Kanal</option>
                <option value="Marla" @(Request.Query["areaUnit"] == "Marla" ? "selected" : "")>Marla</option>
                <option value="Square Feet" @(Request.Query["areaUnit"] == "Square Feet" ? "selected" : "")>Square Feet</option>
                <option value="Square Meter" @(Request.Query["areaUnit"] == "Square Meter" ? "selected" : "")>Square Meter</option>
                <option value="Square Yards" @(Request.Query["areaUnit"] == "Square Yards" ? "selected" : "")>Square Yards</option>
            </select>
            <!-- 面积区间 -->
            <input type="number" name="minArea" placeholder="最小面积" value="@Request.Query["minArea"]" min="0">
            <input type="number" name="maxArea" placeholder="最大面积" value="@Request.Query["maxArea"]" min="0">
            <!-- 价格区间 -->
            <input type="number" name="minPrice" placeholder="最低价格" value="@Request.Query["minPrice"]" min="0">
            <input type="number" name="maxPrice" placeholder="最高价格" value="@Request.Query["maxPrice"]" min="0">
        </div>
    </div>
</form>

二、控制器层：接收筛选参数并过滤数据 #

修改Rent方法，接收筛选参数并添加过滤逻辑，同时保留分页功能：

public IActionResult Rent(int PageNumber = 1, 
                          string keyword = null, 
                          string areaUnit = null, 
                          decimal? minArea = null, 
                          decimal? maxArea = null, 
                          decimal? minPrice = null, 
                          decimal? maxPrice = null)
{
    var data = rdb.GetDataHouse().AsQueryable();

    // 关键词筛选（匹配标题或描述）
    if (!string.IsNullOrEmpty(keyword))
    {
        data = data.Where(x => x.tittle.Contains(keyword) || x.descrip.Contains(keyword));
    }

    // 面积筛选（需确保数据库中面积字段与选择单位匹配，或统一转换单位后比较）
    if (!string.IsNullOrEmpty(areaUnit) && minArea.HasValue)
    {
        data = data.Where(x => x.area >= minArea.Value && x.areaUnit == areaUnit);
    }
    if (!string.IsNullOrEmpty(areaUnit) && maxArea.HasValue)
    {
        data = data.Where(x => x.area <= maxArea.Value && x.areaUnit == areaUnit);
    }

    // 价格区间筛选
    if (minPrice.HasValue)
    {
        data = data.Where(x => x.price >= minPrice.Value);
    }
    if (maxPrice.HasValue)
    {
        data = data.Where(x => x.price <= maxPrice.Value);
    }

    // 分页逻辑
    var totalCount = data.Count();
    ViewBag.Totalpages = Math.Ceiling(totalCount / 6.0);
    var paginatedData = data.Skip((PageNumber - 1) * 6).Take(6).ToList();

    return View(paginatedData);
}

三、数据绑定到property_information div #

你当前的视图已通过@foreach实现数据绑定，这里补充空数据提示并优化细节：

<div class="property_information">
    @if (Model.Any())
    {
        foreach (var item in Model)
        {
            <div class="home-info">
                <span id="houseid">@item.id</span>
                <a href="#" class="home-images">
                    <img src="@item.pic1" alt="@item.tittle" />
                </a>
                <div class="home-data">
                    <div class="home-name">
                        <p>@item.tittle</p>
                    </div>
                    <div class="price">
                        <p>@item.price</p>
                    </div>
                    <div class="features">
                        <span>@item.bedroom 卧室</span>
                        <span>@item.bathroom 浴室</span>
                        <span>@item.area @item.areaUnit</span>
                    </div>
                    <div class="desc">
                        @item.descrip
                    </div>
                    <div class="contact-save">
                        <a href="#" class="phone_number" id="favorite" onclick="Fav(this)" data-id="@item.id">
                            <i class="fas fa-heart" style=" color: white;"></i>
                        </a>
                        <div class="popup" onclick="myFunction()">
                            <a href="tel:+928754756478" class="phone_number" onclick="call()"></a>
                        </div>
                        <div class="popupmsg" onclick="myFunctionmsg()">
                            <a href="#" class="phone_number open_message" onclick="msg()"></a>
                        </div>
                        <a href="#" class="phone_number" onclick="del(this)" data-id="@item.id">
                            <i class="fas fa-trash-alt" style=" color: white;"></i>
                        </a>
                    </div>
                </div>
            </div>
        }
    }
    else
    {
        <p class="no-data">未找到符合条件的房源</p>
    }
</div>

可选：无刷新搜索优化 #

若要实现无刷新更新房源列表，添加AJAX逻辑局部刷新目标区域：

$(document).ready(function() {
    $("#searchForm").submit(function(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        $.get("/Rent", formData, function(response) {
            $(".property_information").html($(response).find(".property_information").html());
        });
    });
});

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