如何在单个页面中使用两个视图模型：一个展示一个收集输入

你遇到的核心问题是单页面需要同时承载展示数据和输入表单，但合并ViewModel会因Post时展示字段为空导致ModelState验证失败。这里有两种实用的解决思路：

方案一：创建组合ViewModel，针对性验证输入部分 #

直接把两个模型组合成一个，但通过调整验证逻辑，只对输入相关的属性做校验，避免展示字段的空值干扰验证结果。

组合ViewModel代码（嵌套式，结构更清晰） #

public class ProductReviewPageModel
{
    // 展示用的模型，无需验证特性
    public ProductDisplayModel DisplayModel { get; set; }
    // 输入用的模型，保留原有验证特性
    public CreateReviewModel InputModel { get; set; }
}

Post方法中的验证处理 #

在Post请求里，仅针对输入模型部分做验证，忽略展示字段的空值问题：

[HttpPost]
public IActionResult SubmitReview(ProductReviewPageModel model)
{
    // 只验证输入模型的有效性
    if (TryValidateModel(model.InputModel))
    {
        // 验证通过，执行评论提交逻辑
        SaveNewReview(model.DisplayModel.Product.Id, model.InputModel);
        return RedirectToAction("ProductDetails", new { id = model.DisplayModel.Product.Id });
    }

    // 验证失败，重新加载展示数据并返回页面
    model.DisplayModel = LoadProductAndReviews(model.DisplayModel.Product.Id);
    return View(model);
}

如果使用扁平式组合模型（将两个模型的属性直接合并），可以手动移除展示字段的ModelState错误：

[HttpPost]
public IActionResult SubmitReview(ProductReviewPageModel model)
{
    // 移除展示字段的验证错误记录
    ModelState.Remove(nameof(model.Reviews));
    ModelState.Remove(nameof(model.Product));

    if (ModelState.IsValid)
    {
        // 执行提交逻辑
        SaveNewReview(model.Product.Id, model.Comment, model.Rating);
        return RedirectToAction("ProductDetails", new { id = model.Product.Id });
    }

    // 重新加载展示数据
    model.Reviews = LoadReviews(model.Product.Id);
    model.Product = LoadProduct(model.Product.Id);
    return View(model);
}

方案二：用ViewData传递展示数据，ViewModel仅负责输入 #

保持两个原模型独立，页面展示数据通过ViewData传递，表单仅绑定输入模型，彻底避免展示字段对验证的干扰。

Get方法中传递展示数据 #

[HttpGet]
public IActionResult ProductReview(int productId)
{
    var product = LoadProduct(productId);
    var reviews = LoadReviews(productId);

    // 将展示数据存入ViewData
    ViewData["Product"] = product;
    ViewData["Reviews"] = reviews;

    // 初始化输入模型返回页面
    return View(new CreateReviewModel());
}

页面中的使用方式 #

<!-- 展示产品信息和已有评论 -->
<h1>@((Product)ViewData["Product"]).Name</h1>
@foreach (var review in (List<Review>)ViewData["Reviews"])
{
    <div class="review-item">
        <p>@review.Comment</p>
        <span>评分：@review.Rating</span>
    </div>
}

<!-- 评论提交表单，绑定CreateReviewModel -->
<form asp-action="SubmitReview" asp-route-productId="@((Product)ViewData["Product"]).Id" method="post">
    <div>
        <label asp-for="Comment">评论：</label>
        <input asp-for="Comment" />
        <span asp-validation-for="Comment" class="text-danger"></span>
    </div>
    <div>
        <label asp-for="Rating">评分：</label>
        <input asp-for="Rating" />
        <span asp-validation-for="Rating" class="text-danger"></span>
    </div>
    <button type="submit">提交评论</button>
</form>

Post方法处理 #

[HttpPost]
public IActionResult SubmitReview(int productId, CreateReviewModel inputModel)
{
    if (ModelState.IsValid)
    {
        // 保存新评论
        SaveNewReview(productId, inputModel.Comment, inputModel.Rating);
        return RedirectToAction("ProductReview", new { productId });
    }

    // 验证失败，重新加载展示数据并返回页面
    ViewData["Product"] = LoadProduct(productId);
    ViewData["Reviews"] = LoadReviews(productId);
    return View(inputModel);
}

方案对比 #

• 组合ViewModel：结构规整，强类型安全，适合复杂页面；需要额外处理验证逻辑。
• ViewData方式：实现简单，无需修改原有ViewModel；但属于弱类型，页面中需要类型转换，适合简单场景。

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