ASP.NET MVC筛选视图：如何POST SearchModel并返回ProductVM列表？

我来给你捋清楚这个问题——你遇到的核心错误就是控制器返回的模型类型和视图强类型声明的不匹配：视图期望的是SearchModel，但你返回的是List<ProductVM>，自然会报错。要同时处理搜索表单和结果展示，最稳妥的方案是创建一个复合视图模型，把两个模型整合到一起，下面一步步给你讲怎么做：

1. 创建复合视图模型 #

首先，我们需要一个能同时容纳搜索条件和结果列表的主视图模型，这样视图就能一次性拿到所有需要的数据：

public class ProductSearchViewModel
{
    // 用户输入的搜索条件
    public SearchModel SearchCriteria { get; set; }
    // 筛选后的产品列表
    public List<ProductVM> FilteredProducts { get; set; }

    // 构造函数初始化，避免视图里出现空引用异常
    public ProductSearchViewModel()
    {
        SearchCriteria = new SearchModel();
        FilteredProducts = new List<ProductVM>();
    }
}

2. 修改控制器代码 #

接下来调整控制器，返回这个复合模型而不是直接返回产品列表，同时要保留用户输入的搜索条件（这样表单会回显之前的输入）：

public ActionResult Index(SearchModel searchModel)
{
    var viewModel = new ProductSearchViewModel();
    // 把用户提交的搜索条件赋值给视图模型的对应属性
    viewModel.SearchCriteria = searchModel;

    // 可以加个判断：只有当有搜索条件时才执行筛选，否则返回空列表或全部产品
    if (!string.IsNullOrEmpty(searchModel.Name) || searchModel.Id.HasValue || searchModel.PriceFrom.HasValue || searchModel.PriceTo.HasValue)
    {
        viewModel.FilteredProducts = _Repository.GetFilteredProducts(searchModel);
    }

    return View(viewModel);
}

3. 调整主视图（Index.cshtml） #

主视图强类型绑定到ProductSearchViewModel，这样既可以渲染搜索表单（绑定到SearchCriteria的属性），又能把结果列表传递给局部视图：

@model ProductSearchViewModel

<!-- 搜索表单，自动回显用户之前输入的条件 -->
@using (Html.BeginForm("Index", "YourControllerName", FormMethod.Get))
{
    <div class="form-group">
        @Html.LabelFor(m => m.SearchCriteria.Id)
        @Html.TextBoxFor(m => m.SearchCriteria.Id, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.SearchCriteria.PriceFrom)
        @Html.TextBoxFor(m => m.SearchCriteria.PriceFrom, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.SearchCriteria.PriceTo)
        @Html.TextBoxFor(m => m.SearchCriteria.PriceTo, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.SearchCriteria.Name)
        @Html.TextBoxFor(m => m.SearchCriteria.Name, new { @class = "form-control" })
    </div>
    <button type="submit" class="btn btn-primary">搜索</button>
}

<!-- 调用局部视图展示结果，传入筛选后的产品列表 -->
<div class="mt-4">
    @Html.Partial("_ResultsPartialView", Model.FilteredProducts)
</div>

4. 局部视图（_ResultsPartialView.cshtml） #

局部视图只需要处理产品列表的渲染，强类型绑定到List<ProductVM>即可：

@model List<ProductVM>

@if (Model.Any())
{
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var product in Model)
            {
                <tr>
                    <td>@product.Id</td>
                    <td>@product.Name</td>
                    <td>@product.Price</td>
                </tr>
            }
        </tbody>
    </table>
}
else
{
    <p class="text-muted">没有找到匹配的产品</p>
}

关于局部视图的疑问 #

你把结果放到局部视图的做法完全没问题，甚至是推荐的：

• 它把搜索表单和结果展示的代码解耦，让主视图更简洁
• 后续如果要优化成AJAX异步搜索，只需要局部刷新这个视图就行，不用重新加载整个页面

总结一下核心逻辑 #

视图必须绑定一个能覆盖所有需求的模型——这里就是复合的ProductSearchViewModel，它既包含了搜索表单需要的SearchModel（用于回显和提交），又包含了结果列表List<ProductVM>（用于展示），这样就解决了之前的类型不匹配问题，同时保留了搜索表单的功能。

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